boas estou aqui com algumas duvidas, sobre a programação web
tenho por exemplo 4 divs e tenho 4 arrays com links de imagens, o que eu estou a tentar fazer é mudar de imagem ao passar com o rato, mas sem que a parte do script seja muito grande.
porque se eu tiver 10 box não vou fazer uma página de select case nem de if's, penso que deve de existir uma forma mais fácil de dar a volta.
Código (Javascript):
tenho por exemplo 4 divs e tenho 4 arrays com links de imagens, o que eu estou a tentar fazer é mudar de imagem ao passar com o rato, mas sem que a parte do script seja muito grande.
porque se eu tiver 10 box não vou fazer uma página de select case nem de if's, penso que deve de existir uma forma mais fácil de dar a volta.
Código (Javascript):
<div id="caixa1" style="background-image:url('http://c10.quickcachr.fotos.sapo.pt/i/Nf815a22e/16407282_WtAqZ.jpeg'); background-size:350px 103px;" class="large-30 box">
<h2>caixa1</h2>
</div>
<div id="caixa2" style="background-image:url('http://c10.quickcachr.fotos.sapo.pt/i/Nf815a22e/16407282_WtAqZ.jpeg'); background-size:350px 103px;" class="large-30 box">
<h2>caixa2</h2>
</div>
<div id="caixa3" style="background-image:url('http://c10.quickcachr.fotos.sapo.pt/i/Nf815a22e/16407282_WtAqZ.jpeg'); background-size:350px 103px;" class="large-30 box">
<h2>caixa3</h2>
</div>
<div id="caixa4" style="background-image:url('http://c10.quickcachr.fotos.sapo.pt/i/Nf815a22e/16407282_WtAqZ.jpeg'); background-size:350px 103px;" class="large-30 box">
<h2>caixa4</h2>
</div>
<div id="caixa5" style="background-image:url('http://c10.quickcachr.fotos.sapo.pt/i/Nf815a22e/16407282_WtAqZ.jpeg'); background-size:350px 103px;" class="large-30 box">
<h2>caixa5</h2>
</div>
<script>
var caixa1 = new Array("http://c10.quickcachr.fotos.sapo.pt/i/Nf815a22e/16407282_WtAqZ.jpeg","http://img.wallpapergang.com/157processed/yellow%20party%20wallpaper.jpg","http://www.mrstyleking.com/wp-content/uploads/2013/07/partygay.jpg","http://www.sixstringtheories.com/wp-content/uploads/2012/04/mocha-dad-friday-night-party-on-twitter.jpg");
var caixa2 = new Array("http://i191.photobucket.com/albums/z202/tequilamxpx/kayak/005.jpg","http://img.wallpapergang.com/157processed/yellow%20party%20wallpaper.jpg","http://www.mrstyleking.com/wp-content/uploads/2013/07/partygay.jpg","http://www.sixstringtheories.com/wp-content/uploads/2012/04/mocha-dad-friday-night-party-on-twitter.jpg");
var pos = 0;
var caixas_id = new Array();
var caixas_img = new Array();
caixas_img.push(caixa1);
caixas_img.push(caixa2);
/*array com o numero de caixas */
$("#main").children().each(function(n, i) {
var id = this.id;
if(this.id.startsWith("caixa"))
{
caixas_id.push(id);
}
});
for (var i=0; i<caixas_id.length; i++)
{
var caixa = "#" + caixas_id[i];
alert(caixa);
$(caixa).mouseover(function() {
alert(caixa);
alert(caixas_img[i][pos]);
pos+=1;
if ( pos>caixas_img[i][pos].length-1) pos=0;
alert(caixas_img[i][pos]);
$(caixa).css('background-image', 'url('+caixas_img[i][pos]+')');
});
}
</script>
<h2>caixa1</h2>
</div>
<div id="caixa2" style="background-image:url('http://c10.quickcachr.fotos.sapo.pt/i/Nf815a22e/16407282_WtAqZ.jpeg'); background-size:350px 103px;" class="large-30 box">
<h2>caixa2</h2>
</div>
<div id="caixa3" style="background-image:url('http://c10.quickcachr.fotos.sapo.pt/i/Nf815a22e/16407282_WtAqZ.jpeg'); background-size:350px 103px;" class="large-30 box">
<h2>caixa3</h2>
</div>
<div id="caixa4" style="background-image:url('http://c10.quickcachr.fotos.sapo.pt/i/Nf815a22e/16407282_WtAqZ.jpeg'); background-size:350px 103px;" class="large-30 box">
<h2>caixa4</h2>
</div>
<div id="caixa5" style="background-image:url('http://c10.quickcachr.fotos.sapo.pt/i/Nf815a22e/16407282_WtAqZ.jpeg'); background-size:350px 103px;" class="large-30 box">
<h2>caixa5</h2>
</div>
<script>
var caixa1 = new Array("http://c10.quickcachr.fotos.sapo.pt/i/Nf815a22e/16407282_WtAqZ.jpeg","http://img.wallpapergang.com/157processed/yellow%20party%20wallpaper.jpg","http://www.mrstyleking.com/wp-content/uploads/2013/07/partygay.jpg","http://www.sixstringtheories.com/wp-content/uploads/2012/04/mocha-dad-friday-night-party-on-twitter.jpg");
var caixa2 = new Array("http://i191.photobucket.com/albums/z202/tequilamxpx/kayak/005.jpg","http://img.wallpapergang.com/157processed/yellow%20party%20wallpaper.jpg","http://www.mrstyleking.com/wp-content/uploads/2013/07/partygay.jpg","http://www.sixstringtheories.com/wp-content/uploads/2012/04/mocha-dad-friday-night-party-on-twitter.jpg");
var pos = 0;
var caixas_id = new Array();
var caixas_img = new Array();
caixas_img.push(caixa1);
caixas_img.push(caixa2);
/*array com o numero de caixas */
$("#main").children().each(function(n, i) {
var id = this.id;
if(this.id.startsWith("caixa"))
{
caixas_id.push(id);
}
});
for (var i=0; i<caixas_id.length; i++)
{
var caixa = "#" + caixas_id[i];
alert(caixa);
$(caixa).mouseover(function() {
alert(caixa);
alert(caixas_img[i][pos]);
pos+=1;
if ( pos>caixas_img[i][pos].length-1) pos=0;
alert(caixas_img[i][pos]);
$(caixa).css('background-image', 'url('+caixas_img[i][pos]+')');
});
}
</script>