Improve company productivity with a Business Account.Sign Up

x
?
Solved

Swap Image - use different image map

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

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

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 …
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
Watch the video of Kernel Migrator for SharePoint, which demonstrate the process easily of migration from SharePoint to SharePoint, OneDrive for Business & Google Drive servers, Public Folder to SharePoint, File Server to SharePoint. The tool has va…
If you are looking for an automated tool which can generate reports for Outlook emails and other items from PST file, then you can go for Kernel PST Reporter tool. The reports which are created by this tool are helpful to analyze and understand PST …

602 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