Can I swap image maps along with images in a roll-over?

Forum Moderators: open

Message Too Old, No Replies

Can I swap image maps along with images in a roll-over?

webboy1

5:22 pm on Mar 26, 2002 (gmt 0)

I know it is possible to swap images within the HTML page by using the swap image behaviour and/or rollovers.

my question is this:

Is it possible to also swap image maps?

e.g. if i had a list of menu items that, when rolled over, swaped an image somewhere else on the page. Imagine that image also had image maps on it. Is it possible that when the new image is loaded that it will also load a new set of image maps?

Regards
Webboy

txbakers

6:13 pm on Mar 26, 2002 (gmt 0)

Welcome to the WW forums - this is one of the best.

I never thought about that one, but why not give it a try and let us know if it works!

That would be a nice trick.

I've seem something similar, but I'm not sure if was an image map or just a table with sliced images.

tedster

6:21 pm on Mar 26, 2002 (gmt 0)

I found this paragraph on a support page for MacroMedia Fireworks. It seems to say you can do it. More power to you! Let us know.

Since hotspot information is embedded in the HTML page itself, the swap image behavior cannot load a new image map. If it is desired to have JavaScript rollovers with hyperlinks, use a DHTML Show/Hide Layers function so that the image source tag can include the link information in a DHTML layer.

Macromedia reference [macromedia.com]

MaliciousDan

6:37 pm on Mar 26, 2002 (gmt 0)

The old dilbert.com site used to have a good example of how this can be done, course they changed to a nicer looking layout and removed the mouse-over deal (I never looked closely enough at it to see if it used anything besides javascript though). I checked googles cache and the old page isn't there, you'll have to hit the archive to look at it.

Rhys

2:26 am on Apr 1, 2002 (gmt 0)

This little Dreamweaver Script allied with a couple of layers will do the trick.
The onMouseover call in the <a> tag initiates the blank gif to erase the previous pic, and the onClick function paints in a new image map. Add layers with new layer numbers and show/hide/ calls as required.


<HTML> 
<HEAD> 
<TITLE>A Rollover Imagemap</TITLE> 
<META name="description" content=""> 
<META name="keywords" content=""> 
<META name="generator" content="CuteHTML"> <script language="JavaScript"> 
<!--  
//*****************OnClick Function Code  
function MM_findObj(n, d) { //v3.0 
 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x; 
} 
function MM_showHideLayers() { //v3.0 
 var i,p,v,obj,args=MM_showHideLayers.arguments; 
 for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2]; 
 if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; } 
 obj.visibility=v; } 
} 
//--> 
</script> 
</HEAD> 
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"> 
<a href="#" OnMouseover="MM_showHideLayers('Layer1','','hide','Layer0','','show')" OnClick="MM_showHideLayers('Layer0','','hide','Layer1','','show')" >Press Here</a> 
<div id="Layer0" style="position:absolute; left:300px; top:100px; width:271px; height:301px; z-index:1; visibility: visible "><img src="http://example.com/sp.gif" width="270" height="302" usemap="#Map" border="0" alt="Visit Example" ></div> 
<div id="Layer1" style="position:absolute; left:300px; top:100px; width:271px; height:301px; z-index:1; visibility: visible "><img src="http://opotiki.com/nz.gif" width="270" height="302" usemap="#Map" border="0"><map name="Map"><area shape="rect" coords="98,170,243,234" href="http://example.com" target="_blank" alt="Visit Example" title="Visit Example"></map></div> 
</BODY> 
</HTML>