PDA

View Full Version : Laying Images on top of each other


Ricky55
10-05-2005, 10:29 AM
Hi, quite new to web design, I'm on my 3rd site. The site that I'm currently working requires that I overlay images, let me explain.

I'm wanting to show images of a bed in six different colours, I want to have the six colours displayed as square swatches, I want these to be links, as these are clicked I want the image in the centre of the screen to change to show the colour in question.

An example of this can be seen here:-

http://www.honda.co.uk/motorcycles/Dispatc...e.jsp#focusHere ('http://www.honda.co.uk/motorcycles/DispatcherServlet?hidActionDetail=viewproductdetai l&hidAction=Lookup&hidProductID=69&hidSelectedProductCode=CBF600&hidProductName=CBF600&hidMSGID=10&hidMSGCode=TRADITIONAL&hidMSGName=Traditional&hidBannerPath=%2Fstatic%2Fmotorcycles%2Fen%2Fpictu re%2Fproduct%2FCBF600%2Fprd_main_Banner.jpg&hidHomePath=%2Fjsp%2FmsgTRADITIONALHome.jsp#focusH ere')

I think this site uses javascript, any ideas would be welcome, is there perhaps a behavour that does this?

Thanks in advance,

Ricky55

davidj
10-05-2005, 01:28 PM
this is just a simple swap image behaviour

run this 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=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/JavaScript">
<!--
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_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_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/04-cupra-badge.jpg','images/04-cupra-badge2.jpg','images/04-cupra-badge3.jpg')">
<p>

<!-- ********** set first image below ***********-->
<img src="images/04-cupra-badge.jpg" name="car1" width="200" height="282" id="car1" />
</p>


<table width="200" border="1">
<tr>
<td width="57"><div align="center"><a href="#" onclick="MM_swapImage('car1','','images/04-cupra-badge.jpg',1)">no1</a></div></td>
<td width="55"><div align="center"><a href="#" onclick="MM_swapImage('car1','','images/04-cupra-badge2.jpg',1)">no2</a></div></td>
<td width="66"><div align="center"><a href="#" onclick="MM_swapImage('car1','','images/04-cupra-badge3.jpg',1)">no3</a></div></td>
</tr>
</table>
<p></p>
</body>
</html>


you need to have 3 images in this example (which has been taken straight from DW behaviours)

look for the line ...

('car1','','images/04-cupra-badge.jpg',1)">
('car1','','images/04-cupra-badge2.jpg',1)">
('car1','','images/04-cupra-badge3.jpg',1)">

and change 04-cupra-badge.jpg to the jpg's of your choice

Ricky55
10-05-2005, 04:07 PM
thanks mate, I should have known this. Anyway I've got this working now.

I really appreciate your help!