navegacion de imagenes

alan · #1 (**permalink**) 29/04/2003, 14:31

Hola a todos.

estoy buscando un Javascript que me haga esto:

Tengo 4 imagenes debajo de una que esta mas grande que las otras, cuando se clikea sobre una de las de abajo se coloca arriba de estas mas grande reemplazando a la que estaba mas grande anteriormente.

Me explico mejor, es una especie de navegacion de imagenes en la misma pagina haciendolo con javascript, pero no he conseguido un script que me lo haga, he visto que ponen siguiente imagen o anterior pero asi no me interesa, me interesa que se vea la imagen pequena y luego se muestre grande.

Ojala me hayan entendido.

KarlanKas · #2 (**permalink**) 29/04/2003, 16:31

Hola alan!!

Mira, te he hecho un ejemplito. Tienes que preparar 4 imágenes pequeñas y 4 grandes y lo colocas así:

Código PHP:

  <html>

<head>

    <title>Untitled</title>

    <script>

    function cambio(porEsto){

    document.getElementsByTagName("img")[0].src=porEsto;

    }

    </script>

</head>

 
<body>

<table align="center" width="300" height="300" cellspacing="0" cellpadding="0" border="1" frame="box" rules="all">

<tr>

    <td colspan="4" align="center"><img src="abducidagrande.jpg" width="305" height="225" alt="" border="0"></td>

</tr>

<tr>

    <td onclick="cambio('abducidagrande.jpg')"><img src="abducidapeque.jpg"  alt="" border="0"></td>

    <td onclick="cambio('chufa3.jpg')"><img src="chufa3peque.jpg" alt="" border="0"></td>

    <td onclick="cambio('chufagrande.jpg')"><img src="chufapeque.jpg"  alt="" border="0"></td>

    <td onclick="cambio('elefante.jpg')"><img src="elefantepeque.jpg"  alt="" border="0"></td>

</tr>

</table>

 
 
 
</body>

</html>

un ejemplo

alan · #3 (**permalink**) 29/04/2003, 16:41

Gracias KarlanKas, ya lo he conseguido, pues vi un codigo y lo modifique a mi gusto, tambien lo hice con base de datos como lo queria, aqui va el codigo:

Código:

<head>
<script>

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}

</script>

<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
</script>
</head>

Esto dentro del body para la precarga de las imagenes:


<script>
    preloadimages("<%=rs("foto1")%>","<%=rs("foto2")%>","<%=rs("foto3")%>","<%=rs("foto4")%>")
</script>


Aqui va la imagen mas grande que sera reemplazada por las de abajo cuando se haga el mouseover:
ponerla donde quiera 

<a href="javascript:warp()"><img src="<%= rs("foto1") %>" name="targetimage" border=0 width=175 height=200></a>

Y esto donde van las imagenes para hacer el mouse over:

<td><a href="verfoto.asp?id=<%=rs("id")%>" onMouseover="changeimage(myimages[0],this.href)">
  <img src="<%=rs("foto1") %>" border=0 width="36" height="41"></a></td>

<td><a href="verfoto.asp?id=<%=rs("id")%>" onMouseover="changeimage(myimages[1],this.href)"> 
  <img src="<%= rs("foto1") %>" border=0 width="36" height="41"></a></td>

<td><a href="verfoto.asp?id=<%=rs("id")%>" onMouseover="changeimage(myimages[2],this.href)"> 
  <img src="<%= rs("foto1") %>" border=0 width="36" height="41"></a></td>

<td><a href="verfoto.asp?id=<%=rs("id")%>" onMouseover="changeimage(myimages[3],this.href)"> 
  <img src="<%= rs("foto1") %>" border=0 width="36" height="41"></a></td>

hasta luego.

KarlanKas · #4 (**permalink**) 29/04/2003, 16:50

Y claro... lo acabas de conseguir. O lo tenías ya cuando empecé a contestar?

alan · #5 (**permalink**) 30/04/2003, 09:33

Al ver que no tenia respuesta, decidi seguir navegando y "perder mas tiempo" buscandolo, hasta que por suerte consegui este website www.javascriptkit.com, nunca lo habia visto, y ahi fue que lo consegui, entonces, lo modifique para adaptarlo a mi web y a la BDs y eso me tomo un tiempecito, seguro en ese tiempo fue que me respondiste.

Pero, ahi tengo tu codigo, para cualquier cosa, gracias.