Comparsa div al click del mouse in php

alessiof86 · 12 Giu 2012

ciao a tutti spero che mi potete aiutare.
Ho una pagina creata in php formata da foto dei prodotti e dei relativi nomi estratti da un db mysql, ora vorrei che al click del mouse sull'immagine compaia un div con la descrizione del prodotto cliccato sempre estratta dallo stesso db, cosa mi consigliate?
Il codice per recuperare i prodotti è il seguente:

PHP:

// Mi connetto al database  
      $conn = mysql_connect("localhost","xxxxx","xxxxx");  
      mysql_select_db("xyz", $conn);  
      $query=mysql_query("SELECT * FROM zzz");   
      $num_rec=mysql_num_rows($query);//calcolo quanti record ci sono   
      $num_col=3; //definisco di quante colonne deve essere fatta la tabella   
      $conta=0;//azzero un contatore   
      $apro_riga="<tr>";//due variabili per <tr>....</tr>   
      $chiudo_riga="</tr>";   
             //apro la tabella   
            echo "<table class=\"prodotti_table\" align=\"center\">";   
                  while( $riga=mysql_fetch_array($query)){    
                            if($conta==0){echo $apro_riga;}//apro la riga se conta è zero   
                   //leggi i valori dal db    
            $nome_immagine=$riga['immagine'];//verificare se ti serva anche la path. es immagini/imm_1.jpg   
            $nome_prodotto=$riga['prodotto'];    
            $descr_prodotto=$riga['descrizione'];    
       //creo le celle aggiungendo <td>....</td> (ho tolto il <br> )  
          echo "<td title=\"$descr_prodotto\">$nome_prodotto<img src=\"$nome_immagine\" alt=\"$nome_prodotto\" width=\"300\" height=\"300\" border=\"0\" ></td>";  
    $conta++;//incremento il contatatore di 1   
     if($conta >($num_col-1)){//il contatore ha segnato 0, 1 , 2   
     $conta=0;//riporto il contatore a zero   
     echo $chiudo_riga;//chiudo la riga   
      }   
    }    
  echo "</table></br>" ; //chiudo la tabella

Come posso fare ho letto forum tutorial ma non riesco proprio? spero in un vostro aiuto

criric · 12 Giu 2012

Ciao,
potresti usare un po di javascript, ti faccio un esempio:

HTML:

<html>
    <head>
        <title>Senza nome</title>
        <script type="text/javascript">
            function tooltip(visibile) {
                document.getElementById('descrizione').style.display="none";
                if(visibile)
                    document.getElementById('descrizione').style.display="inline";
            }
        </script>
    </head>
    <body>
        
            <img src="immagine.jpg" onmouseover="tooltip(true)" onmouseout="tooltip(false)"/>
            <span style="display:none" id="descrizione">Descrizione dell'immagine</span>
        
    </body>
</html>

io ho messo onmouseover ma nessuno ti vieta di usare l'evento onclick

alessiof86 · 12 Giu 2012

Si ma la mia pagina la creo tramite il codice php come posso inserire questo script nel codice postato prima? E' questo che non riesco a fare.... ho fatto diverse prove ma senza successo. Mi puoi dare qualche suggerimento?

alessiof86 · 13 Giu 2012

Dopo diverse prove ci sono riuscito ma il problema è che la descrizione viene mostrata o all'inizio o alla fine mentre io vorrei che si aprisse un div vicino all immagine cliccata. Ho usato il seguente codice

PHP:

// Mi connetto al database   
      $conn = mysql_connect("localhost","xxxxx","xxxxx");   
      mysql_select_db("xyz", $conn);   
      $query=mysql_query("SELECT * FROM zzz");    
      $num_rec=mysql_num_rows($query);//calcolo quanti record ci sono    
      $num_col=3; //definisco di quante colonne deve essere fatta la tabella    
      $conta=0;//azzero un contatore    
      $apro_riga="<tr>";//due variabili per <tr>....</tr>    
      $chiudo_riga="</tr>";    
             //apro la tabella    
            echo "<table class=\"prodotti_table\" align=\"center\">";    
                  while( $riga=mysql_fetch_array($query)){     
                            if($conta==0){echo $apro_riga;}//apro la riga se conta è zero   
                    //leggi i valori dal db     
            $nome_immagine=$riga['immagine'];//verificare se ti serva anche la path. es immagini/imm_1.jpg   
             $nome_prodotto=$riga['prodotto'];     
            $descr_prodotto=$riga['descrizione'];     
       //creo le celle aggiungendo <td>....</td> (ho tolto il <br> )   
echo "<td class=\"\" title=\"$descr_prodotto\">$nome_prodotto<img src=\"$nome_immagine\" alt=\"$nome_prodotto\" width=\"300\" height=\"300\" border=\"0\" onmouseover=\"tooltip(true)\" onmouseout=\"tooltip(false)\"/> </td>;
              $conta++;//incremento il contatatore di 1    
     if($conta >($num_col-1)){//il contatore ha segnato 0, 1 , 2    
     $conta=0;//riporto il contatore a zero    
     echo $chiudo_riga;//chiudo la riga    
      }    
    }     
  echo "</table></br>" ; //chiudo la tabella

ma come detto la descrizone si posiziona o allinizo o alla fien della tabella come posso risolvbere questo?

criric · 13 Giu 2012

Puoi provare cosi:

prima dell'apertura di php inserisci la funzione javascript:

PHP:

script type="text/javascript">
    function descrizione(descrizione) {
        document.getElementById('descrizione').innerHTML=descrizione;                
    }
</script>
<?php

.........

aggiungi l'evento onclick che richiama la funzione e gli passa la descrizione

PHP:

echo "<td onclick=\"descrizione('$descr_prodotto')\"> . ... . ..

crei il div in fondo alla tabella

PHP:

echo "</table></br>"; //chiudo la tabella  
echo "<div id='descrizione'></div>";
?>

EDIT non avevo visto il uto messaggio

alessiof86 · 13 Giu 2012

stesso problema il div si posiziona alla fine della tabella. Non accanto alla foto del prodotto... suggerimenti?

Cerca

Cerca

Comparsa div al click del mouse in php

alessiof86

Utente Attivo

criric

Super Moderatore

alessiof86

Utente Attivo

alessiof86

Utente Attivo

criric

Super Moderatore

alessiof86

Utente Attivo

Discussioni simili