Layer di "anteprima" con sia testo che immagini

**dani77** · 06-12-2006, 15:18

Ciao a tutti,
volevo chiedere come si fa per avere quell'effetto carino che si ottiene quando passando con il mouse sopra una parola, un link o un immagine si carica (penso) un layer che contiene sia testo che immagini. Questi layer fanno diciamo l'anteprima (una preview) del contenuto della scheda prodotto ad esempio, e si trovano spesso su siti tipo quelli di e-commerce che vendono dvd.
Cioè passando ad esempio con il mouse sul nome del prodotto mi fanno vedere una piccola anteprima della scheda prodotto con un layer che contiene testo e immagine.

Come si può ottenere questo effetto?
Ha controindicazioni su particolari browser?

Grazie a tutti.
Ciao

**zoom** · 06-12-2006, 16:11

javascript per mostrare un div già creato in precedenza.
Praticamente al caricamento della pagina di fianco alla foto inserisci un div posizionato in maniera assoluta con i dettagli e lo imposterai a visibility:hidden.
Poi all'onmousehover sull'immagine setterai questo div a visibility:visible
Ovviamente sarà necessario che ogni div abbia un id univoco.

Altro metodo è ajax.
Qui i div li inserisci vuoti e li riempi solo all'onmousehover.
Cambia poco.
Col primo metodo carichi tutti i prodotti di colpo, con il secondo carichi solo il prodotto che ti serve.

a livello browser serve un browser che supporti javascript ovviamente.

**dani77** · 06-12-2006, 16:39

ok grazie.

C'è per caso in giro qualche esempio da poter personalizzare?
non sono tanto in grado di riuscirci.

Grazie.

**zoom** · 06-12-2006, 17:02

mmmm non so...

comunque con js è una stupidata...
devi fare una cosa di questo tipo

il div lo imposti così

<div id="dettagliNN" style="visibility:hidden">prezzo:2 immagine...</div>

dove NN sarà un codice univoco del prodotto

sull'immagine metti

onmouseover="document.getElementById('dettagliNN') .style.visibility=visible"

**dani77** · 06-12-2006, 18:03

sfruttando il tuo consiglio ho messo giù questo codice ma non mi visualizza il layer quando vado sull'immagine.
Questo è il codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
</script>
</head>

<body>
[img]img_layout/avanti.jpg[/img]
<div id="Dettagli01" style="position:absolute; width:200px; height:115px; z-index:0; left: 253px; top: 48px; visibility: hidden;">[img]img_layout/avanti.jpg[/img]

Testo</div>
</body>
</html>

Mi dice cosa secondo te è sbagliato?
Grazie dell'aiuto.

Ciao ciao

**salasir** · 06-12-2006, 18:17

Potresti sfruttare l'idea del tooltip nel quale puoi inserire quello che vuoi.

Tooltip con Javascript e CSS

**dani77** · 06-12-2006, 18:19

ok ho risolto.
adesso funziona.

l'unico mio dubbio è che magari alcuni browser non visualizzano correttamente i layer

**zoom** · 06-12-2006, 18:42

fai una prova con qualcuno per vedere se si posiziona bene...
per il resto se il browser ha attivo js e non è vecchissimo non da problemi.

**matadero** · 07-12-2006, 05:39

ciao....questo metodo funziona solo con i layer vero?
perchè io conosco javascript che rendono visibili layer nascosti ma non tag div normali.
I layer sono div posizionati in maniera assoluta, ma non rieco a capire questa grande differenza....
Cioè...posso creare un layer anche con le impostazioni dei css?
Uso dreamweaver...forse questo mi crea ancora + confusione...

Discussione: Layer di "anteprima" con sia testo che immagini

Strumenti discussione

Ricerca discussione

Visualizza

Layer di "anteprima" con sia testo che immagini

Permessi di invio