Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 485
  • Last Modified:

OnmouseOver & Imagemap

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?
0
gossee
Asked:
gossee
  • 4
  • 4
1 Solution
 
gosseeAuthor Commented:
Edited text of question
0
 
jbirkCommented:
Yes I have made code to things like this for others on EE.  I will repost the code from someone else's solution, but since this kind of thing is very depenedant on exactly you want to do, it probably won't be exactly what you are looking for.  If you could clarify what you want and supply the HTML, then I could give you the JavaScript code which work.  Here's some sampl image map mouse over code:

<HTML>
<TITLE>Ministry Opportunities</TITLE>
<HEAD>
<script language="JavaScript">  
<!--
if(document.images)
 {var OffGif = new Image(500,400);
  OffGif.src = "Image2.jpg";
  var OnGif1 = new Image(500,400);
  OnGif1.src = "Image3.jpg";
  var OnGif2 = new Image(500,400);
  OnGif2.src = "Mexico.jpg";
  var OnGif3 = new Image(500,400);
  OnGif3.src = "Prison.jpg";
 }
function areaOn(num)
 {if (document.images) document.swapper.src = eval("OnGif"+num+".src");}
function areaOff()
 {if (document.images) document.swapper.src = OffGif.src;}
// -->
</SCRIPT>  
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER><B>
<FONT SIZE="5" COLOR="#800000" FACE="Arial">Urban Harvest Ministry Opportunities</FONT>
</B>
<BR>
<IMG SRC="Image2.jpg" WIDTH="500" HEIGHT="400" BORDER="0" usemap="#Image2" name="swapper">
<BR><FONT SIZE="2" COLOR="#000000" FACE="Arial">
Click an image for more information about that particular ministry.
</FONT></CENTER>
<map name="Image2">
 <area shape="polygon" coords="156,77,363,62,407,108,415,169,277,198,157,170,157,72,156,74,156,74,156,74"
  href="block_party.htm" target="display_area"
  onMouseOver="areaOn('1')" onMouseOut="areaOff()">
 <area shape="rect" coords="39,185,278,295"
  href="mexico.htm" target="display_area"
  onMouseOver="areaOn('2')" onMouseOut="areaOff()">
 <area shape="rect" coords="284,195,459,321"
  href="prison.htm" target="display_area"
  onMouseOver="areaOn('3')" onMouseOut="areaOff()">
</map>
</BODY>
</HTML>

0
 
gosseeAuthor 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.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
jbirkCommented:
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
0
 
jbirkCommented:
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
0
 
gosseeAuthor Commented:
Thanks a lot, I will try to get it work. You will probably hear from me if I have problems.
0
 
gosseeAuthor 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
0
 
jbirkCommented:
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
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now