area ripetuta e cambiamento background in foto

[ver007]

Buonasera a tutti, questo è il mio problema, cercherò di essere piu chiara possibile.

Ho la pagina di un team e un area ripetuta che si prende da database la foto di ogni membro del team.

Sulla foto ho progettato un effetto hover ( foto bianco e nero/foto a colori).

La foto è un div con background image e con css ovviamente non ho avuto alcun problema con la pseudoclasse hover sul div.

Il tutto si complica rendendo il box dinamico, per fare in modo che la mia area ripetuta funzionasse, ho inserito la regola per lo sfondo del div in un attributo style quindi ho scorporato la proprietà da tutta la regola esterna e l'ho fatta diventare inline, e fin qui tutto ok..ma con la pseudoclasse?? come faccio a inserirla nell'area ripetuta in modo che anche lei sia dinamica?


difficile da descrivere come esigenza ma spero di essere stata più chiara possibile.

grazie mille, veronica

[clasku]

posta un po' di codice, se no viene male aiutarti

[ver007]

la mia area ripetuta è un tag <li> con all'interrno il div che ha come sfondo un'immagine
che è nel db.
Quando faccio hover sul div, il background image deve caricare un'altra foto che sta nel db

e tutto questo ovviemente deve ripetersi per circa 20 volte: la questione è che il background imag sono riuscita a renderlo dinamico ma la pseudo classe hover non riesco a capire come dinamicizzarla in modo che per ogni foto che si ripete , si carica una foto diversa


Quello che servirebbe a me, sarebbe poter inglobare all'interno dell'area ripetuta questo tag style:

<style>
#photo:hover{background-image: url(img/<?php echo $row_RS_team['foto1']; ?>}
</style>

ma purtroppo il tag style può stare solo in head e quindi mi attacco!





questo è il codice dell'area ripetuta ovviamente senza hover.



<?php do { ?>



<li class="teamMember">
<div id="photo" style="background-image: url(img/<?php echo $row_RS_team['foto2']; ?>);" ></div>
<h3><?php echo $row_RS_team['nominativo']; ?> </h3>
<span class="infoMembro">
<span class="bloccoUser"><?php echo $row_RS_team['ruolo']; ?> </span>
<span class="bloccoUser mailTesto" style="font-size:0.8em;margin:3px 0"><?php echo $row_RS_team['email']; ?> </span>
<span class="bloccoUser">
<a href="skype:<?php echo $row_RS_team['skype']; ?>?chat" class="socialIcon skype"><img src="img/social1.png" width="17" height="17" alt=""/></a>
<a href="<?php echo $row_RS_team['linkedin']; ?>" class="socialIcon linkedin"><img src="img/social2.png" width="16" height="16" alt=""/></a>
<a href="<?php echo $row_RS_team['email']; ?>" class="socialIcon email" id="linkino<?php echo $row_RS_team['id']; ?>">
<img src="img/social3.png" width="21" height="16" alt=""/>
</a>
</span>
</span>
</li>


<?php } while ($row_RS_team = mysql_fetch_assoc($RS_team)); ?>



GRAZIE MILLE

[clasku]

ora ho capito e ci vedo due soluzioni:
- genera un css a runtime con PHP e lo inserisci nella head della pagina, dovresti ottenere una serie di #photo_* tanti quante sono le foto che devi mostrare;
- modifica il css a runtime con una funzione javascript che aggiunga l'hover a #photo generico.

valuta tu quale percorrere

[ver007]

non sono una programmatrice esperta! mi vado a studiare la pria soluzione se riesco!
che paura

[ver007]

Nell'area ripetuta ho provato ad inserire questo ma nn funge!


<script>
$('#photo').mouseover(function()
{
$(this).css('background-image','url(img/<?php echo $row_RS_team['foto']; ?>)');
});
$('#photo').mouseout(function()
{
$(this).css('background-image','url(img/<?php echo $row_RS_team['foto2']; ?>)');
});

</script>

[lucavizzi]

Ti conviene fare tutto inline anche se è poco elegante:

<img src="foto-bianco-e-nero-1.jpg" alt="Mario Rossi" 
   onmouseover="this.src='foto-a-colori-1.jpg'" 
   onmouseout="this.src='foto-bianco-e-nero-1.jpg'">

Questa soluzione non richiede jQuery.

Edit:
Questo plug-in, italiano, per jQuery sembra fare al caso tuo.
https://gianlucaguarini.github.io/jQuery.BlackAndWhite/

[ver007]

HO RISOLTO!! tanto per conoscenza, ho aggiunto questo script sotto al <li>:

<script>
$('#foto<?php echo $row_RS_team['id']; ?>').mouseover(function()
{
$(this).css('background-image','url(img/<?php echo $row_RS_team['foto']; ?>)');
});


$('#foto<?php echo $row_RS_team['id']; ?>').mouseout(function()
{
$(this).css('background-image','url(img/<?php echo $row_RS_team['foto2']; ?>)');
});

</script>


GRAZIE!!!

[ver007]

sicuramente meno codice della mia soluzione!ma perchè mi conviene? perchè meno codice o avrei altri vantaggi?? thanx!!

[lucavizzi]

Ti pare poco avere meno codice? La pagina si carica più velocemente ed il codice è più manutenibile.
Quest'altra soluzione, con jQuery, ti eviterà di ripetere gli script per ogni div, i dati relativi alle immagini vengono immagazzinati nei data-attribute.

<head>
$(function(){
   $('.bw_img').hover(
      function(){
         $(this).css('background-image',$(this).data('hover_image'));
      },function(){
         $(this).css('background-image',$(this).data('normal_image'));
      }
   );
});
</head>


<body>
...
<div class="bw_img tue altre classi" 
   style="background:img/<?php echo $row_RS_team['foto2']; ?>;"
   data-hover_image="img/<?php echo $row_RS_team['foto']; ?>"
   data-normal_image="img/<?php echo $row_RS_team['foto2']; ?>">
</div>
...
</body>