Comparsa div al click del mouse in php

alessiof86

Utente Attivo
6 Lug 2009
134
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Utente Attivo
6 Lug 2009
134
0
0
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

Utente Attivo
6 Lug 2009
134
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Utente Attivo
6 Lug 2009
134
0
0
stesso problema il div si posiziona alla fine della tabella. Non accanto alla foto del prodotto... suggerimenti?
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Comparsa div vicino al puntatore del mouse Javascript 6
L 2 div a comparsa Javascript 2
L Comparsa e Scomparsa DIV Javascript 0
A Div a comparsa Javascript 2
Barierta Testo a comparsa con passaggio del mouse Javascript 17
G [Javascript] Campo a comparsa di select Javascript 0
S [HTML] Problema menu a comparsa HTML e CSS 5
F Righe di una tabella a comparsa con click Javascript 11
Carlito's Menu con tendina a comparsa al mouseover HTML e CSS 1
S Come realizzare una didascalia a comparsa su un'immagine? HTML e CSS 1
F Effetto comparsa header Javascript 2
braccobaldo Google e testi a comparsa: penalizzazione per testo nascosto? SEO e Posizionamento 1
K Transition CSS3 menu a comparsa HTML e CSS 1
andre9004 Jquery background-image fade (Effetto comparsa background-image) jQuery 8
G Droplist con oggetto a comparsa Javascript 26
C Campi del FORM a Scomparsa/Comparsa Automatica Javascript 1
J Comparsa di testo al passaggio del mouse sopra un'immagine Javascript 0
B comparsa quadratini all'interno del testo HTML e CSS 2
S Comparsa box al passaggio del mouse Javascript 2
B Ora però devo chiudere la tabella comparsa, come faccio? HTML e CSS 3
P comparsa di un quadrato Flash 1
Eugene Finestrelle a comparsa Javascript 1
S Popup a discesa o a comparsa Javascript 1
M Menu a comparsa [era: Ma cos'è sta roba?] Javascript 1
K css VS menu a comparsa HTML e CSS 1
Eugene Menu a comparsa con js esterno. Javascript 0
E Creare un testo trasparente dietro un div HTML e CSS 5
F Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni? Javascript 0
M Accordion menu e posizione div HTML e CSS 0
P jquery refresh div non funziona Javascript 0
P refresh div + scrittura/lettura dal db Javascript 1
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4

Discussioni simili