Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Swap Image - use different image map

Posted on 2008-10-08
3
Medium Priority
?
561 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 2000 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

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 this video, Percona Solution Engineer Dimitri Vanoverbeke discusses why you want to use at least three nodes in a database cluster. To discuss how Percona Consulting can help with your design and architecture needs for your database and infras…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
Suggested Courses

721 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