Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 28
  1. #1
    Utente di HTML.it
    Registrato dal
    Nov 2014
    Messaggi
    18

    area ripetuta e cambiamento background in foto

    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

  2. #2
    Utente di HTML.it L'avatar di clasku
    Registrato dal
    Aug 2006
    Messaggi
    3,194
    posta un po' di codice, se no viene male aiutarti

  3. #3
    Utente di HTML.it
    Registrato dal
    Nov 2014
    Messaggi
    18
    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

  4. #4
    Utente di HTML.it L'avatar di clasku
    Registrato dal
    Aug 2006
    Messaggi
    3,194
    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

  5. #5
    Utente di HTML.it
    Registrato dal
    Nov 2014
    Messaggi
    18
    non sono una programmatrice esperta! mi vado a studiare la pria soluzione se riesco!
    che paura

  6. #6
    Utente di HTML.it
    Registrato dal
    Nov 2014
    Messaggi
    18
    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>

  7. #7
    Ti conviene fare tutto inline anche se è poco elegante:
    codice:
    <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/
    Ultima modifica di lucavizzi; 12-07-2015 a 14:05

  8. #8
    Utente di HTML.it
    Registrato dal
    Nov 2014
    Messaggi
    18
    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!!!

  9. #9
    Utente di HTML.it
    Registrato dal
    Nov 2014
    Messaggi
    18
    sicuramente meno codice della mia soluzione!ma perchè mi conviene? perchè meno codice o avrei altri vantaggi?? thanx!!

  10. #10
    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.
    codice:
    <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>

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.