Mostrar productos como amazon
Quiero hacer esto como amazon
http://www.amazon.com/gp/product/B003M5GVJY/ref=s9_simh_gw_p147_d0_i1?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=center-2&pf_rd_r=0JDZ2J6QZPACCTV6F84H&pf_rd_t=101&pf_rd_p=470938631&pf_rd_i=507846
Necesito el código
http://www.amazon.com/gp/product/B003M5GVJY/ref=s9_simh_gw_p147_d0_i1?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=center-2&pf_rd_r=0JDZ2J6QZPACCTV6F84H&pf_rd_t=101&pf_rd_p=470938631&pf_rd_i=507846
Necesito el código
1 respuesta
Respuesta de neicos
1
Para poderte ayudar, ¿concretamente podrías indicarme el efecto o lo que deseas de la web de Amazon? Hay muchas cosas y consultas SQL, AJAX y demás.
Es la forma como muestra los productos que cuando pasa el mouse cambia la imagen
Primero para ello necesitas el espacio de la imagen en grande para mostrar, puedes empezar con una imagen vacía en blanco o una de las que deseas mostrar, para luego proceder al cambio cuando pase por las imágenes pequeñas.
Te pongo un poco el código y te voy explicando.
Código de la imagen grande:
<img id="imagen_cambio" src="imagen_muestra.jpg">
codigo de las imagenes pequeñas:
<img src="imagen1.jpg" onmouseover=cambia_img(this.src)>
<img src="imagen2.jpg" onmouseover=cambia_img(this.src)>
<img src="imagen3.jpg" onmouseover=cambia_img(this.src)>
<img src="imagen4.jpg" onmouseover=cambia_img(this.src)>
aqui puedes poner tantas imagenes como quieras.
La imagen tiene una llamada a una función que se ejecuta cuando pasas el ratón por encima.
Ahora hay que proceder a incorporar la función JavaScript que lo tienes que poner entre los
<head>
</head>
<script languaje="text/javascript">
function cambia_img(imagen){
document.getElementById("imagen_cambio").src=imagen;
}
</script>
Y con esto el cambio de la imagen te funcionará.
Te pongo un poco el código y te voy explicando.
Código de la imagen grande:
<img id="imagen_cambio" src="imagen_muestra.jpg">
codigo de las imagenes pequeñas:
<img src="imagen1.jpg" onmouseover=cambia_img(this.src)>
<img src="imagen2.jpg" onmouseover=cambia_img(this.src)>
<img src="imagen3.jpg" onmouseover=cambia_img(this.src)>
<img src="imagen4.jpg" onmouseover=cambia_img(this.src)>
aqui puedes poner tantas imagenes como quieras.
La imagen tiene una llamada a una función que se ejecuta cuando pasas el ratón por encima.
Ahora hay que proceder a incorporar la función JavaScript que lo tienes que poner entre los
<head>
</head>
<script languaje="text/javascript">
function cambia_img(imagen){
document.getElementById("imagen_cambio").src=imagen;
}
</script>
Y con esto el cambio de la imagen te funcionará.
