Jump to content

[Resolvido] multiplos objectos background- jquery


emanuelx
 Share

Recommended Posts

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.

<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>

com calma e sem stresses

Link to comment
Share on other sites

Podes por exemplo gravar os dados das imagens num XML ou array / objecto Javascript, e ao correr a página o javascript insere as imagens e algo mais que seja preciso.

Exemplo com array em javascript : http://jsfiddle.net/m6Zxy/3/

Edited by yoda
  • Vote 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.