Dreamweaver - Intercambio de imagenes

 
Vista:

Intercambio de imagenes

Publicado por PAUSIMS (7 intervenciones) el 21/06/2007 19:36:57
¡Hola!

Quiero hacer unos efectos de intercambio de imágenes que no sé cómo se hacen.

Me gustaría tener una imagen grande, de unos 400x200 píxeles y debajo unos botones: "1" , "2", "3" y "4".

Después, que al pasar por encima de cada uno de los botones 1, 2, 3, 4 se intercambie la imagen grande por una diferente, y que al salir de encima siga igual (que no se restaure)

Sé hacer eso en una misma imagen, que al pasar encima se intercambie, pero no lo sé hacer de esa forma.

Espero haberme explicado bien.

Saludos,

PAUSIMS
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

RE:Intercambio de imagenes

Publicado por basnek (47 intervenciones) el 21/06/2007 20:58:47
Estimado Pausims,
Recuerdo que el nombre de esto es "Creación de sustituciones sin conexión" y para hacerlo puedes hacerlo directamente con DW

Te deje una demo en:
http://www.maug.es/tutoriales/creacion-de-sustituciones-sin-conexion.htm

Nota: Para la demo y el ejemplo te lo he realizado con la opcion de que restaure pues puede servirle a otros. Igualmente tu veras en la demo que es solo sacar un tilde.

Y El código es el siguiente:
<!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>Creación de Sustituciones sin conexión | Basnek.com | La Web Del Programador</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('assets/fotos/gr/foto_1.jpg','assets/fotos/gr/foto_2.jpg')">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="assets/fotos/ch/foto_1.jpg" name="img1" width="120" height="90" id="img1" onmouseover="MM_swapImage('grande','','assets/fotos/gr/foto_1.jpg',1)" onmouseout="MM_swapImgRestore()" /></td>
<td><img src="assets/fotos/ch/foto_2.jpg" name="img2" width="120" height="90" id="img2" onmouseover="MM_swapImage('grande','','assets/fotos/gr/foto_2.jpg',1)" onmouseout="MM_swapImgRestore()" /></td>
<td><img src="assets/fotos/ch/foto_3.jpg" name="img3" width="120" height="90" id="img3" /></td>
<td><img src="assets/fotos/ch/foto_4.jpg" name="img4" width="120" height="90" id="img4" /></td>
<td><img src="assets/fotos/ch/foto_5.jpg" name="img5" width="120" height="90" id="img5" /></td>
</tr>
</table>
<p><img src="assets/imgs/spacer.gif" name="grande" width="400" height="300" id="grande" /></p>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Intercambio de imagenes

Publicado por PAUSIMS (7 intervenciones) el 21/06/2007 21:36:27
Muchísimas gracias, me ha sido de mucha utilidad ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Intercambio de imagenes

Publicado por Ray (1 intervención) el 14/12/2007 20:20:32
Hola basnek,

No sabes la de tiempo que he estado intentado hacer este intercambio de imagenes, ya imaginaba que iba por hay la cosa pero el tutorial de esta pagina,

http://www.maug.es/tutoriales/creacion-de-sustituciones-sin-conexion.htm

me ha ido de maravilla

muchas gracias

Ray
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar