We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

OnmouseOver & Imagemap

gossee
gossee asked
on
Medium Priority
502 Views
Last Modified: 2008-03-10
I'm trying to create an OnMouseOver-event where the picture|(2) that is going to be showed when you move over picture(1) is an imagemap. I know that it is possible; (see www.track.nl) but I can't figure out the code. Is there anyone who knows how this is done?
Comment
Watch Question

Author

Commented:
Edited text of question
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
Your code is not exactly what I wanted. I will try to explane again:
The picture that you will go over with your mouse(image1) will dropdown a menu(image2). It's like a dropdownmenu but then with an imagemap dropping down. This droppingdown image have to be clickable.
You will find a menu like this on www.track.nl, but I can't figure out the code they used.

Commented:
OK, I helped someone else get something like this working a short while ago!  Did you know that that site you referred me to does not work on Netscape 4, only IE 4?  I assume you are using IE 4 then...
Anyway, what this involves is layers.  It can get pretty complex, and is only supported by the 4.0+ browsers.  Also it is difficult to get something like that to work on both netscape and internet explorer (which is probably why it only works on the one browser at that site you referred to).  I think we can get a solution which works for both though.

I will work on this later today.
-Josh

Commented:
OK, this was a lot of work...  but I got it to work in both Netscape and IE.  Not sure if it's worth only 100 points, but I'll be nice and post it anyway. If you feel it is worth more (as I do), please up the points before grading.

I used the graphics from the site that you referred to, so I could have sample graphics to work with.  The places that I position layers which pop up are based on the size of the images, so whatever images you use those starting positions for the layers will have to be changed accordingly for them to show up in the proper place on the page.  Also, I used four layers here naming them one to four.  I assume you will use different layers and names, so that code will need to be customized as well.  If you need help with this please give me the url of the page with the graphics on it after you have made an attempt to get it working and I will see if I can get it working then for you.

For now, you can just copy the code I post and then go and retrieve the images from that site you referred to which are used (just look at the sources of the images in the code I post and get those), and you will be able to see it in action.

here's the code:

<HTML>
<HEAD>
<TITLE>OnMouseover Events</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- begin
function show_layer(name)
 {//first hide all the layers
  hide_layer('one');
  hide_layer('two');
  hide_layer('three');
  hide_layer('four');
  if (document.all) //IE only
   document.all[name].style.visibility="visible";
  else
   document.layers[name].visibility="show";
  return true;
 }

function hide_layer(name)
 {
  if (document.all) //IE only
   document.all[name].style.visibility="hidden";
  else
   document.layers[name].visibility="hide";
  return true;
 }

function move_layer(name,x,y)
{if (document.all) //IE only
  {
   document.all[name].style.pixelTop=document.all[name].style.pixelTop + y;
   document.all[name].style.pixelLeft=document.all[name].style.pixelLeft + x;
  }
 else
  {document.layers[name].top=document.layers[name].top+y;
   document.layers[name].left=document.layers[name].left+x;
  }
 return true;
}

var timerID;
var leftoffset;
var topoffset;
if (document.all) //IE 4 only
 {leftoffset=10;
  topoffset=15;
 }
else //nestacpe
 {leftoffset=8;
  topoffset=7;
 }

function move_all()
{move_layer('one',leftoffset,topoffset);
 move_layer('two',leftoffset,topoffset);
 move_layer('three',leftoffset,topoffset);
 move_layer('four',leftoffset,topoffset);
}
// end -->  
</SCRIPT>
</HEAD>
<BODY onLoad="move_all();">
<TABLE cellpadding=0 cellspacing=0 border=0>
<TR><TD><a href="javascript:void(0);"
onMouseOver="show_layer('one');" onMouseOut="timerID=setTimeout('hide_layer(\'one\')',500);">
<img src="Hdhp.gif" width=116 height=13 border=0 alt=""></a></TD>
<TD><a href="javascript:void(0);"
onMouseOver="show_layer('two');" onMouseOut="timerID=setTimeout('hide_layer(\'two\')',500);">
<img src="Hivis.gif" width=116 height=13 border=0 alt=""></a></TD>
<TD><a href="javascript:void(0);"
onMouseOver="show_layer('three');" onMouseOut="timerID=setTimeout('hide_layer(\'three\')',500);">
<img src="Hvoorw.gif" width=116 height=13 border=0 alt=""></a></TD>
<TD><a href="javascript:void(0);"
onMouseOver="show_layer('four');" onMouseOut="timerID=setTimeout('hide_layer(\'four\')',500);">
<img src="Hzoeken.gif" width=116 height=13 border=0 alt=""></a></TD>
</TR></TABLE>
<DIV ID="one" style="position:absolute;top:13px;left:0px;visibility:hidden;" zIndex="1">
<A HREF="JavaScript:void(0)" onMouseOver="clearTimeout(timerID);" onMouseOut="timerID=setTimeout('hide_layer(\'one\')',300);">
<img src="Mzoeken.gif" width=116 height=66 border=0 alt="">
<BR>first popup layer</A>
</DIV>
<DIV ID="two" style="position:absolute;top:13px;left:116px;visibility:hidden;" zIndex="1">
<A HREF="JavaScript:void(0)" onMouseOver="clearTimeout(timerID);" onMouseOut="timerID=setTimeout('hide_layer(\'two\')',300);">
<img src="Mzoeken.gif" width=116 height=66 border=0 alt="">
<BR>second popup layer</A>
</DIV>
<DIV ID="three" style="position:absolute;top:13px;left:232px;visibility:hidden;" zIndex="1">
<A HREF="JavaScript:void(0)" onMouseOver="clearTimeout(timerID);" onMouseOut="timerID=setTimeout('hide_layer(\'three\')',300);">
<img src="Mzoeken.gif" width=116 height=66 border=0 alt="">
<BR>third popup layer</A>
</DIV>
<DIV ID="four" style="position:absolute;top:13px;left:348px;visibility:hidden;" zIndex="1">
<A HREF="JavaScript:void(0)" onMouseOver="clearTimeout(timerID);" onMouseOut="timerID=setTimeout('hide_layer(\'four\')',300);">
<img src="Mzoeken.gif" width=116 height=66 border=0 alt="">
<BR>fourth popup layer</A>
</DIV>
</BODY>
</HTML>

Enjoy!
Josh

Author

Commented:
Thanks a lot, I will try to get it work. You will probably hear from me if I have problems.

Author

Commented:
I've made an attempt to get it to work. It didn't work with layers, so I tried it on an easier way. I got it to work in IE but it doesn't work in Netscape???
Maybe you can help me out here. You can see my attempt at www.westnet.nl/cl

Commented:
Well, the code I pasted works beautifully in both browsers, so maybe your adaptation introduced a problem.  I warn that these layer things are REALLY picky.  The slightest thing wrong and one of the browsers won't work.  It's pretty annoying.

I went to the page you specified, and first off I have to say I LOVE that background.  It looks really good!  But unfortunately I did not see any layers on this page so I am not experiencing the error you mentioned.  Could you please put up a test page with the atempt at the layer version?  I will then go look at that, and get it working for you.
-Josh
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.