Log in

View Full Version : Problem with dreamweaver and image swap..


crash41
03-12-2009, 01:00 AM
It's not so much a problem - i just can't figure out how to accomplish what we need.

I can't seem to explain this well - so i created an example of what i'm trying to do.

http://www.myvoicemusic.org/test/

If you rollover the 1, 2, or 3 - the image will change - as well as the main image. What i need to do is create links for the main image - but each 'version' of it needs to have a different link.

any ideas? This is the code:


<!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)&&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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body bgcolor="#999999" onload="MM_preloadImages('images/small1_o.jpg','images/small2_o.jpg','images/small3_o.jpg','images/large2.jpg','images/large3.jpg')">
<table width="548" height="497" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="400" rowspan="3"><img src="images/large1.jpg" name="main" width="400" height="400" id="main" /></td>
<td width="148" height="181"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/small1_o.jpg',1)"><img src="images/small1.jpg" name="Image1" width="100" height="100" border="0" id="Image1" onmouseover="MM_swapImage('main','','images/large1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
</tr>
<tr>
<td height="172"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/small2_o.jpg',1)"><img src="images/small2.jpg" name="Image2" width="100" height="100" border="0" id="Image2" onmouseover="MM_swapImage('main','','images/large2.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
</tr>
<tr>
<td height="144"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/small3_o.jpg',1)"><img src="images/small3.jpg" name="Image3" width="100" height="100" border="0" id="Image3" onmouseover="MM_swapImage('main','','images/large3.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
</tr>
</table>
</body>
</html>
jscheuer1
03-12-2009, 01:53 PM
Make this:


<img src="images/large1.jpg" name="main" width="400" height="400" id="main" />

Like:


<a id="mainlink" href="whatever1.htm"><img src="images/large1.jpg" name="main" width="400" height="400" id="main" /></a>

Then just add to your rollover(s), ex:


onmouseover="document.getElementById('mainlink').href='whatever2.htm';MM_swapImage('Image2','','images/small2_o.jpg',1)"
crash41
03-12-2009, 03:20 PM
Thank you!!!!! that helps so much..
crash41
03-13-2009, 03:39 PM
Wait. Now for the $1,000,000 question.

Can i have a rollover on top of that main image - which is shown depending on what image is rolled over on the right?
jscheuer1
03-13-2009, 06:38 PM
Sure, but MM_swapImage() may or may not be up to the task. It isn't the most versatile or up to date image swapping routine I can think of, though fairly good at what it does.

Just to be on the safe side, I'd write something from scratch for the main image:


<img src="images/large1.jpg" name="main" width="400" height="400" id="main"
onmouseover="var p = this.parentNode.href; this.currsrc = this.src;
this.src =
/whatever.htm/.test(p)? 'whatever.jpg' :
/someother.htm/.test(p)? 'someother.jpg' :
/another.htm/.test(p)? 'another.jpg :
this.currsrc;"
onmouseout="this.src = this.currsrc;" />

It would still be good to include its rollover images in your preload routine though. The main image will then rollover depending upon what href you've assigned to its link.

And this may or may not conflict with your other src changes to that image, but I tend to think it will be OK.
crash41
03-13-2009, 08:27 PM
thanks - but now i'm lost.

Maybe this would be easier.

On the main image - i'd like to break it up using an image map for links.

so - for example - you rollover the '2' square - that changes the main image - that all works so far.

But instead of making that main image have only one link - how can i break it into sections (maybe top right, top left, bottom right, bottom left) with a different link for each?
crash41
03-13-2009, 11:39 PM
I found another one of your replies to another posting and am trying this:

<body>
<a id="mainlink"><img src="images/main_01.jpg" name="main" width="571" height="511" border="0" usemap="#Map1"/></a>

<map name="Map1">
<area shape="rect" coords="0,1,238,509" href="http://www.link1.com" />
<area shape="rect" coords="262,3,486,510" href="http://www.link2.com" />

</map>


<map name="Map2">
<area shape="rect" coords="0,1,238,509" href="http://www.link3.com" />
<area shape="rect" coords="262,3,486,510" href="http://www.link4.com" />

</map>

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav','','images/crops_R.jpg',1)"><img src="images/crops.jpg" name="nav" width="199" height="150" border="0" onMouseOver="document.images['mainlink'].setAttribute('usemap','#Map2',0);MM_swapImage('main','','images/main_03.jpg',1)" onMouseOut="MM_swapImgRestore()"></a>

</body>

But it's not working :(

Any ideas?
crash41
03-17-2009, 10:55 PM
bumpity bump bump