Solved

OnmouseOver & Imagemap

Posted on 1998-08-20
8
473 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?
0
Comment
Question by:gossee
  • 4
  • 4
8 Comments
 

Author Comment

by:gossee
ID: 1269497
Edited text of question
0
 
LVL 8

Accepted Solution

by:
jbirk earned 200 total points
ID: 1269498
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
 

Author Comment

by:gossee
ID: 1269499
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
 
LVL 8

Expert Comment

by:jbirk
ID: 1269500
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 8

Expert Comment

by:jbirk
ID: 1269501
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
 

Author Comment

by:gossee
ID: 1269502
Thanks a lot, I will try to get it work. You will probably hear from me if I have problems.
0
 

Author Comment

by:gossee
ID: 1269503
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
 
LVL 8

Expert Comment

by:jbirk
ID: 1269504
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now