Solved

Swap Image - use different image map

Posted on 2008-10-08
3
552 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
Comment Utility
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
Comment Utility
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
Comment Utility
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

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…
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…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

744 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now