Solved

Swap Image - use different image map

Posted on 2008-10-08
3
559 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
[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
  • 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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
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 this video, viewers will be given step by step instructions on adjusting mouse, pointer and cursor visibility in Microsoft Windows 10. The video seeks to educate those who are struggling with the new Windows 10 Graphical User Interface. Change Cu…
In this video you will find out how to export Office 365 mailboxes using the built in eDiscovery tool. Bear in mind that although this method might be useful in some cases, using PST files as Office 365 backup is troublesome in a long run (more on t…
Suggested Courses

622 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