Necesito que al cargar la pagina cambie las imágenes del HTML por las del array declarado.
Código Javascript:
var productos = new Array(
"img/minis/afrodita.png",
"img/minis/arpia.jpg",
"img/minis/basilisco.jpg",
"img/minis/caballo.jpg",
"img/minis/centauro.jpg",
"img/minis/fenix.jpg",
"img/minis/gea.jpg",
"img/minis/grifo.png",
"img/minis/hidra.gif",
"img/minis/kraken.jpg",
"img/minis/medusa.png",
"img/minis/minotauro.jpg",
"img/minis/pegaso.jpg",
"img/minis/poseidon.jpg",
"img/minis/quimera.jpg",
"img/minis/satiro.jpg",
"img/minis/unicornio.jpg"
);
window.onload=function(){
//Cargar las imágenes en las divisiones
$.each(productos,function(i,elemento){
console.log("elemento", elemento);
//$("#foo0").append("<img src="+ elemento+">" );
$(".Brand").children().replaceWith("<img src="+ elemento+">" );
//var htmlString = $(this).html();
$(".Brand").width(60).height(25);
console.log("elemento", elemento);
});
//Crear un efecto hover
$(".Brand").hover(function(){
$(this).css("opacity", 0.5);
},
function(){
$(this).css("opacity", 1);
});
//Cambiar la imagen en el banner
$(".Brand").on('click', function(){
t = $(this).find("img").attr("src");
t = t.replace("img/minis/","");
p = t.indexOf(".");
t = t.substring(0,p);
t = "img/banner/"+t+".jpg";
console.log("T", t);
//Desvanece la foto del banner y manda a cambiaFoto
});
}
Código HTML:
<ul id="foo0">
<li><div class="Brand"><img src="img/brand01.png" width="60" height="60" alt="Brand" /></div></li>
<li><div class="Brand"><img src="img/brand02.png" width="60" height="60" alt="Brand" /></div></li>
<li><div class="Brand"><img src="img/brand03.png" width="60" height="60" alt="Brand" /></div></li>
<li><div class="Brand"><img src="img/brand04.png" width="60" height="60" alt="Brand" /></div></li>
<li><div class="Brand"><img src="img/brand05.png" width="60" height="60" alt="Brand" /></div></li>
<li><div class="Brand"><img src="img/brand06.png" width="60" height="60" alt="Brand" /></div></li>
<li><div class="Brand"><img src="img/brand07.png" width="60" height="60" alt="Brand" /></div></li>
<li><div class="Brand"><img src="img/brand08.png" width="60" height="60" alt="Brand" /></div></li>
<li><div class="Brand"><img src="img/brand09.png" width="60" height="60" alt="Brand" /></div></li>
<li><div class="Brand"><img src="img/brand10.png" width="60" height="60" alt="Brand" /></div></li>
<li><div class="Brand"><img src="img/brand11.png" width="60" height="60" alt="Brand" /></div></li>
<li><div class="Brand"><img src="img/brand12.png" width="60" height="60" alt="Brand" /></div></li>
<li><div class="Brand"><img src="img/brand13.png" width="60" height="60" alt="Brand" /></div></li>
<li><div class="Brand"><img src="img/brand14.png" width="60" height="60" alt="Brand" /></div></li>
<li><div class="Brand"><img src="img/brand15.png" width="60" height="60" alt="Brand" /></div></li>
<li><div class="Brand"><img src="img/brand16.png" width="60" height="60" alt="Brand" /></div></li>
</ul>
$(function() {})
, en lugar dewindow.onload=function(){}
, ya que este último puede ser pisado y por ende nunca se ejecutaría tu código.