Solved

Swap Image - use different image map

Posted on 2008-10-08
3
557 Views
Last Modified: 2008-10-10
hi

I'm guessing this can be done, and probably isn't too hard.

I've got a hot spot, then when I mouse over, it swaps an image elsewhere on the page. However, the new image that comes in, needs to have a different image map than the image that was there before it.

I know I can do this with some crazy-complicated Show/Hide layers, using DIV, etc - but is there a way in HTML to tell it that when it swaps and image to also use a different image map?

Maybe this is it...what's that second parameter in swapImage supposed to have? I'm using Dreamweaver, and it generates the code below automatically.

Thanks, Cory


<map name="Map2">
<area shape="rect" coords="22,43,281,61" href="#" onMouseOver="MM_swapImage('Image2','','../images/nav2MO.jpg','sub','','../images/navsub2.jpg',1)">
</map>

Open in new window

0
Comment
Question by:stonerome
  • 2
3 Comments
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22690155
Hey Cory... I've been banging my head against your question for a while and haven't got it working.  I think I'm on to something, but I have to go for the weekend, so thought I'd at least share what I was trying to do:
Found this link, which shows a way to manipulate "usemap" as a variable.

http://www.webxpertz.net/forums/archive/index.php/t-11432.html

It looks to me like they are doing pretty much what you want.
0
 

Author Comment

by:stonerome
ID: 22690478
Hey yessirnosir-

Thanks, that does seem to look like it may work...but I don't really understand where I'd incorporate that into my code. Thanks for your efforts on this, if you have any time next week to tell me how that would fit into my code above, that'd be great. Thanks again, Cory

0
 
LVL 14

Accepted Solution

by:
yessirnosir earned 500 total points
ID: 22690625
now I REALLY have to leave.... but I think I got it.
see below, you'll have to substitute your images, or if you want the ones I used they are here (along with a different way of doing image maps):
http://www.webreference.com/programming/image_map/examples/ten.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  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);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
 
<body onload="MM_preloadImages('images/beatles_hover.jpg')">
<a href="#"  onmouseover="MM_swapImage('Image3','','images/beatles_hover.jpg',1); document.images.Image3.useMap='#Map3'">
<img src="images/beatles_basic.jpg" name="Image2" width="400" height="240" border="0" id="Image2" /></a>
<img src="images/beatles_basic.jpg" usemap="#Map2" name="Image3" width="400" height="240" border="0" id="Image3" />
 
<map name="Map2">
<area shape="rect" coords="0,0,200,120" href="#" >
</map>
<map name="Map3">
<area shape="rect" coords="200,120,400,240" href="#" >
</map>
</body>
 
</html>

Open in new window

0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

Question has a verified solution.

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

I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…

821 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