PDA

View Full Version : Creating info box with mouseover

Thamior
07-13-2004, 07:50 AM
I want to create this (its a concept pic i just edited some images)
http://img78.photobucket.com/albums/v305/thamior/concept2.bmp

I dont know how to switch images in javascript or how to make ones that 'arent there' so that they can show up later. i tried
[code]
var images = document.images;

images[0].src = "wahtever";

and then did

images[0].src = "whateverswitch";

just to test it and that didnt even work....
coothead
07-13-2004, 09:43 AM
Hi there Thamior,

This code may suit your requirements...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tooltip</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
background:#000080;
}
#foo {
position:absolute;
top:166px;
left:47px;
width:122px;
height:70px;
border:solid 1px #000000;
background:#c0c0ff;
padding:2px;
font-family:times new roman;
font-size:10px;
text-align:justify;
display:none;
}
#image {
width:175px;
height:260px;
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
function toolTip() {
document.getElementById("foo").style.display="block";
document.onmouseout=function() {
document.getElementById("foo").style.display="none";
}
}
//]]>
</script>

</head>
<body>

<div><img id="image" src="http://img78.photobucket.com/albums/v305/thamior/concept2.bmp" alt=""
onmouseover="toolTip()"/></div>

<div id="foo">The Donators' Page shows<br />info such as who donated,<br />
how much the donated and<br />what kind of donation they<br /> have made to Gaian Charities</div>

</body>
</html>
Thamior
07-13-2004, 09:54 AM
thanks, if you have the time could you explain it, i'd rather understand, also when i did it, i copied and pastedt he code in the nessescary areas. but the tooltip isnt going where i want it. it shows up somewhere on the screen but not right below the button.
coothead
07-13-2004, 10:20 AM
Hi there Thamior,

to position the tooltip you adjust these values in the 'css'
#foo {
position:absolute;
top:166px; /*adjust this value to move it vertically*/
left:47px; /*adjust this value to move it horizontally*/
width:122px;
height:70px;
border:solid 1px #000000;
background:#c0c0ff;
padding:2px;
font-family:times new roman;
font-size:10px;
text-align:justify;
display:none;
}
Thamior
07-13-2004, 10:57 AM
sorry coothead i ended up figuring it out. thanks though. so this code just creates a tool tip? well wanna see what i did its here (http://sahel.micfo.com/~gaiachar/index.html)
lionscub613
07-13-2004, 11:06 AM
i think it would look better to the side.

the same thing can be done with just a regular link right?
Thamior
07-13-2004, 11:56 AM
yes it can be done with a regular link, but what do u mean to the site?
coothead
07-13-2004, 02:54 PM
Hi there Thamior,

Just had a look at your site...tooltip looks OK :D

If I had known that you wanted multiple tooltips I would have coded slightly differently :o
You can use one function, one css rule and one div to do this, thus cutting down on superflous code :cool:

Check this out...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tooltip</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
background:#cccccc;
}
#foo {
position:absolute;
width:130px;
border:solid 1px #000000;
background:#c0c0ff;
padding:5px;
font-family:times new roman;
font-size:10px;
text-align:justify;
display:none;
}
#container {
width:140px;
border: double 6px #000000;
background:#ffffff;
padding:10px;
}
.links {
margin:30px;
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
function toolTip(txt,top,left) {
var el=document.getElementById('foo');

var text=new Array();
text[0]="The Donators' Page shows info such as who donated, how much the donated and what kind of donation they have made to Gaian Charities.";
text[1]="The How to Help Page shows info to help you submit donations, and will eventually feature a sign-up form.";
text[2]="The Projects Page shows whom Gais Charities is currently helping, who is in line, and how far they on their quest.";
text[3]="The Alumni Page shows whom Gais Charities have helped, for what they were questing, and how much Gais Charities helped.";

el.innerHTML=text[txt];
el.style.top=top+"px";
el.style.left=left+"px";
el.style.display="block";
document.onmouseout=function() {
el.style.display="none";
}
}
//]]>
</script>

</head>
<body>

<div id="container">
<div class="links" onmouseover="toolTip(0,40,150)"/>Donators</div>
<div class="links" onmouseover="toolTip(1,90,150)"/>How to Help</div>
<div class="links" onmouseover="toolTip(2,140,150)"/>Projects</div>
<div class="links" onmouseover="toolTip(3,190,150)"/>Alumni</div>
</div>

<div id="foo"></div>

</body>
</html>
Thamior
07-13-2004, 04:08 PM
thanks ,you've been a great help, i guess 'll add that in when i have time since i have to make some conversions.
coothead
07-13-2004, 04:46 PM
Hi Thamior,

you are welcome...the pleasure was mine :D
Thamior
07-14-2004, 08:08 AM
coothead i have run into an akward situation. here is the code.


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css"
href="sitetemplate.css">
<script type="text/javascript">
//<![CDATA[
function toolTip(txt,top,left) {
var el=document.getElementById('tooltips');

var text=new Array();
text[0]="The Donators' Page shows info such as who donated, how much the donated and what kind of donation they have made to Gaian Charities.";
text[1]="The How to Help Page shows info to help you submit donations, and will eventually feature a sign-up form.";
text[2]="The Projects Page shows whom Gais Charities is currently helping, who is in line, and how far they on their quest.";
text[3]="The Alumni Page shows whom Gais Charities have helped, for what they were questing, and how much Gais Charities helped.";

el.innerHTML=text[txt];
el.style.top=top+"px";
el.style.left=left+"px";
el.style.display="block";
document.onmouseout=function() {
el.style.display="none";
}
}
//]]>
</script>
<title>Gaia Charities alumni</title>
</head>
<body>

<div align="center">
<a id="none" class="none" href="index.html"><img src="gaiancharitieslogo.png" /></a>
</div>


<p align="center" class="comment" id="comment">
<i>"Help Fellow Gaians Get New Clothes and Accessories"</i>
</p>

<div align="left">
<table>

<td></td>
<td> <table id="linktable" class="linktable"
height=200
width=118>
<tr>
<td>
<tr><td><div class="links" >
<a href="donators.html" id="button" class="button">
&nbsp;&nbsp;&nbsp;
<img src="donators.gif" onmouseover="toolTip(0,40,150)" />
</a>
</div>
</td></tr>


<tr><td><div id="tooltips" class="links" onmouseover="toolTip(1,90,150)"/>
<a href="howtohelp.html" id="button" class="button">
&nbsp;&nbsp;&nbsp;
<img src="howtohelp.gif" />
</a>
</div>
</td></tr>

<tr><td><div class="links" onmouseover="toolTip(2,140,150)"/>
<a href="projects.html" id="button" class="button">
&nbsp;&nbsp;&nbsp;
<img src="projects.gif" />
</a>
</div>
</td></tr>

<tr><td><div class="links" onmouseover="toolTip(3,190,150)"/>
<a href="alumni.html" id="button" class="button">
&nbsp;&nbsp;&nbsp;
<img src="alumni.gif" />
</a>
</div>
</td></tr>

</td>
</tr>
</table></td>
<td valign="top"></td>
<td valign="top"><table align="center">
<tr>
<td><table>
<tr>
<td><img src="randompic.png" /> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>


</body>
</html>


the page doesnt show the button that has the id="tooltips" in it but will show the others and their tool tips. if none have the id then it doesnt show the tool tips.
Thamior
07-14-2004, 08:09 AM
heres my .css file too.


p.comment
{
color: rgb(192,192,255)
}
table.linktable
{
background-image: url(tbl1.png);
}
body
{
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #C8DFF9;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}
a:link { text-decoration: none; color : rgb(48,47,144); }
a:visited { text-decoration: none; color : #5493B4; }
a:hover { text-decoration: none; color : #DD6900}

a.name:link { text-decoration: none; color : rgb(48,47,144); }
a.name:visited { text-decoration: none; color : rgb(48,47,144); }
a.name:hover { text-decoration: none; color : #DD6900}

a.none:link { text-decoration: none; color : rgb(255,255,255); }
a.none:visited { text-decoration: none; color : rgb(255,255,255); }
a.none:hover { text-decoration: none; color : rgb(255,255,255);}

a.button:link { text-decoration: none; color : rgb(255,255,255); }
a.button:visited { text-decoration: none; color : rgb(255,255,255); }
a.button:hover { text-decoration: none; color : #DD6900}

td.top
{
background-color: rgb(48,47,144);
color: rgb(255,255,255);
}

td.name
{
background-color: rgb(159,151,239);
color: rgb(48,47,144);
}

td.item
{
background-color: rgb(192,192,255);
color: rgb(255,255,255);
}
#text, #password, #button
{
font-family:arial;
color:#ffffff
}
/*<![CDATA[*/

#tooltips {
position:absolute;
width:130px;
border:solid 1px #000000;
background:#c0c0ff;
padding:5px;
font-family:times new roman;
font-size:10px;
text-align:justify;
display:none;
}

.links {
margin:0px;
}
/*//]]>*/
Thamior
07-14-2004, 08:11 AM
never mind i put a div tag around the whole thing and gave it id="tootips" amd that made it work :) .
coothead
07-14-2004, 09:11 AM
Hi there Thamior,

you are not doing it quite right :D
the body code should look like this...
<body>

<div id="tooltips"></div>

<div align="center">
<a id="none" class="none" href="index.html"><img src="gaiancharitieslogo.png" /></a>
</div>

<p align="center" class="comment" id="comment">
<i>"Help Fellow Gaians Get New Clothes and Accessories"</i>
</p>

<div align="left">
<table><tr>
<td>
<table id="linktable" class="linktable"height="200" width="118"><tr>

<td><div class="links" >
<a href="donators.html" id="button" class="button">
<img src="donators.gif" onmouseover="toolTip(0,210,150)" />
</a>
</div></td>
</tr><tr>

<td><div class="links"/>
<a href="howtohelp.html" id="button" class="button">
<img src="howtohelp.gif" onmouseover="toolTip(1,260,150)"/>
</a>
</div></td>
</tr><tr>

<td><div class="links" />
<a href="projects.html" id="button" class="button">
<img src="projects.gif" onmouseover="toolTip(2,310,150)"/>
</a>
</div></td>
</tr><tr>

<td><div class="links" />
<a href="alumni.html" id="button" class="button">
<img src="alumni.gif" onmouseover="toolTip(3,360,150)" />
</a>
</div></td>
</tr></table>
</td><td><img src="randompic.png" /> </td>
</tr></table>
</div>


</body>

and a minor alteration to the css
.links {
margin:15px 0 0 20px;
}

I hope that this helps the cause :D
coothead
07-14-2004, 09:18 AM
p.s.

just noticed a 'typo', missing a'y' here...
text[0]="The Donators' Page shows info such as who donated, how much they donated.....";
Thamior
07-14-2004, 09:40 AM
Thanks again coot, i was wonering if i should experiment with time delay but my javascript is horrible and it didnt work :) .