Jump to content
emanuelx

[Resolvido] multiplos objectos background- jquery

Recommended Posts

emanuelx

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

Share this post


Link to post
Share on other sites
emanuelx

podes também meter o url da imagem mesmo no html como data-atribute e depois ir buscar com o jquery.

http://jsfiddle.net/Devesh/5HYpc/4/

O exemplo que tu deste é mais ou menos o que eu quero, só tenho uma duvida no atributo dava-me, posso inserir lá um array

?


com calma e sem stresses

Share this post


Link to post
Share on other sites
emanuelx

qual é a finalidade queres que aparece uma imagem aleatória sempre que o rato passe por cima?

Ya tipo slideshow


com calma e sem stresses

Share this post


Link to post
Share on other sites
emanuelx

Sim, o que eu nao sei é forma de aplicar o evento mousehover as divs sem eu complicar muito utilizando if's deve de haver uma forma mais facil de identificar qual é a div em que o rato passa.


com calma e sem stresses

Share this post


Link to post
Share on other sites
Devexz

bem essa parte é a mais simples.

Primeiro dás a mesma class a todas as divs, depois tens que criar um evento em jquery com essa class.

Depois dentro da função tens de utilizar o $this, através do código acima que partilhei percebes facilmente isso.

  • Vote 1

Contador de calorias: caloriaspordia.com

Share this post


Link to post
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

×
×
  • 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.