View Full Version : Remote background image swap from map

12-30-2007, 02:42 PM
Hi all!

The page in progress referenced by my question is here (http://knightstream.com/canoe/index1.html). I'm working with Dreamweaver CS3.

What I'm trying to do is have each of the coords in the left panel change a specific cell background image on the right (5 cells) on mouseover, then "on click" their choice will stay on the right so the viewer can move on to the other categories and do the same.

Using a simple MM_swapimage" works ok with literal img's, but does not work with background images (layer problem, I'm assuming). This is the first step. The second step would be clicking on the choice once mousing over the map coords to select, and have it remain on the right - then move on to the other categories.

The MM_swapimage. Some javascript that changes backgrounds (but not remotely). DIV's (ugh!)

Hopefully, once you gurus bless me with the solution, I can move on to have the visitor submit the final product and have the information passed on to the eCommerce side.


<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];}

HTML of one cell "Background":

<td height="353" align="center" valign="top" background="images/Background.gif" name="Background" alt="1" border="0" id="Background">

Map coord this example pertains to:

<area shape="rect" coords="8,28,42,64" href="#" onmouseover="MM_swapImage('Background','','images/B_Parchment.gif',1)" onmouseout="MM_swapImgRestore()"/>

12-30-2007, 02:52 PM
--->needed to add code to original post.