Mouse over question

[Judy Doherty]

Hi

I know how to do basic mouseovers in Dreamweaver ie where upon "mouseover" a button changes.

But I would like to be able to do a mouse over where a message pops up somewhere else on the screen when the mouseover goes over a graphic or link.

Do any of you know the answer to this or where I can find it?

Thanks
------------------
foodandhealth.com

[Duff]

Try this page:

http://www.greengrouper.com/examples/onmouseover.htm

There are some variables in the source code - easy to configure. I think I got this a couple years ago from gamelan.com

[Dan Kaplan]

Here's something that I think does what you want.[nbsp][nbsp]I orginally picked it up from an example at HTMLGoodies.com (free to use) and subsequently trimmed it down in size and looped a few things.[nbsp][nbsp]I think I've generalized this example down from the page it was being used on...[nbsp][nbsp]It will flip six images (more can be added easily), as well as a "main" image that you can place anywhere.

In the head section, place the javascript:

<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--

{
var alt=new Array();
for(h=1;h<3;h++) {
[nbsp]alt[h]=new Image();
[nbsp]alt[h].src=&quot;/images/main&quot;+h+&quot;.gif&quot;;
}

var graphic=new Array();
for(i=1;i<7;i++) {
[nbsp]graphic[i]=new Image();
[nbsp]graphic[i].src=/images/but_&quot;+i+&quot;.gif&quot;;
}

var graphicon=new Array();
for(j=1;j<7;j++) {
[nbsp]graphicon[j] = new Image();
[nbsp]graphicon[j].src = &quot;/images/but_b&quot;+j+&quot;.gif&quot;;
}

}
function imageChange(imageID,imageName,imageID2,imageName2) {

{
document.images[imageID].src = eval(imageName + &quot;.src&quot;);
document.images[imageID2].src = eval(imageName2 + &quot;.src&quot;);
}

}

// -->
</SCRIPT>


and then place something like this where ever you want in the body:

<table>
<tr><td width=&quot;122&quot; valign=&quot;top&quot; align=&quot;center&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp]<img src=&quot;/images/main1.gif&quot; name=&quot;global&quot; width=&quot;100&quot; height=&quot;50&quot; border=&quot;0&quot;>
</td></tr>
<tr><td width=&quot;122&quot; valign=&quot;top&quot; align=&quot;center&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp]<a href=&quot;page1.html&quot; onMouseOver=&quot;imageChange('global','alt[2]','one','graphicon[1]')&quot; onMouseOut=&quot;imageChange('global','alt[1]','one','graphic[1]')&quot;><img src=&quot;/images/but_1.gif&quot; width=&quot;98&quot; height=&quot;23&quot; name=&quot;one&quot; border=&quot;0&quot; alt=&quot;&quot;></a>
</td></tr>
<tr><td valign=&quot;top&quot; align=&quot;center&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp]<a href=&quot;page2.html&quot; onMouseOver=&quot;imageChange('global','alt[2]','two','graphicon[2]')&quot; onMouseOut=&quot;imageChange('global','alt[1]','two','graphic[2]')&quot;><img src=&quot;/images/but_2.gif&quot; width=&quot;98&quot; height=&quot;23&quot; name=&quot;two&quot; border=&quot;0&quot; alt=&quot;&quot;></a>
</td></tr>
<tr><td valign=&quot;top&quot; align=&quot;center&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp]<a href=&quot;page3.html&quot; onMouseOver=&quot;imageChange('global','alt[2]','three','graphicon[3]')&quot; onMouseOut=&quot;imageChange('global','alt[1]','three','graphic[3]')&quot;><img src=&quot;/images/but_3.gif&quot; width=&quot;98&quot; height=&quot;23&quot; name=&quot;three&quot; border=&quot;0&quot; alt=&quot;&quot;></a>
</td></tr>
<tr><td valign=&quot;top&quot; align=&quot;center&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp]<a href=&quot;page4.html&quot; onMouseOver=&quot;imageChange('global','alt[2]','four','graphicon[4]')&quot; onMouseOut=&quot;imageChange('global','alt[1]','four','graphic[4]')&quot;><img src=&quot;/images/but_4.gif&quot; width=&quot;98&quot; height=&quot;23&quot; name=&quot;four&quot; border=&quot;0&quot; alt=&quot;&quot;></a>
</td></tr>
<tr><td valign=&quot;top&quot; align=&quot;center&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp]<a href=&quot;page5.html&quot; onMouseOver=&quot;imageChange('global','alt[2]','five','graphicon[5]')&quot; onMouseOut=&quot;imageChange('global','alt[1]','five','graphic[5]')&quot;><img src=&quot;/images/but_5.gif&quot; width=&quot;98&quot; height=&quot;23&quot; name=&quot;five&quot; border=&quot;0&quot; alt=&quot;&quot;></a>
</td></tr>
<tr><td valign=&quot;top&quot; align=&quot;center&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp]<a href=&quot;page6.html&quot; onMouseOver=&quot;imageChange('global','alt[2]','six','graphicon[6]')&quot; onMouseOut=&quot;imageChange('global','alt[1]','six','graphic[6]')&quot;><img src=&quot;/images/but_6.gif&quot; width=&quot;98&quot; height=&quot;23&quot; name=&quot;six&quot; border=&quot;0&quot; alt=&quot;&quot;></a>
</td></tr>
</table>

If it's not straight forward what everything means or does, let me know and I'd be happy to explain.

Dan

[Mandi]

This is how I create my code for mouseover images:

http://wsabstract.com/mousewhipper/index.htm

They load very fast!