Solved

OnmouseOver & Imagemap

Posted on 1998-08-20
8
476 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
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
 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Problem in javascript 17 58
Google Chrome: Debugging AJAX call 6 39
Javascript Error 10 24
Add Promise to Existing Code 6 31
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

739 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