onmouseover anteprima immagine come in google

[knele76]

Ciao a tutti!
Ho la necessità di creare un'immagine di anteprima delle singole voci di un elenco di testo con il passaggio del mouse.

Per intenderci un esempio quasi perfetto lo si può vedere in Google:
efettuata una ricerca, dai link proposti (elenco di testo) spostandosi sopra col mouse (onmouseover), sulla singola riga di testo, compaiono a destra delle frecce che indicano la presenza di un'immagine d'anteprima (in questo caso del link proposto) visualizzabile a sua volta con il passaggio del mouse (di nuovo onmouseover) sulla destra della finestra del browser.

Le uniche differenze con questo esempio è che nel mio caso vorrei avere:
- un solo un passaggio onmouseover sul testo che apre frecce e immagine contemporaneamente
- non neccessariamente un collegamento url, ma potrebbe aprire un lightbox, cioè l'immagine ingrandita a tutto schermo

Attualmente ho creato questi div identificatori per collocare esattamente gli elementi nella pagina
(forse è per questo che non funziona...:divido l'elenco testo #testocontent2 dall'immagine d'anteprima #anteprimacontent2 )

#content2{
	margin: 0 auto;	padding: 0px;	width: 745px;	height: 440px;	text-align:left;	font-family: Arial, Helvetica, sans-serif;	font-size: 18px;	font-weight: normal;	overflow: auto;
}

#titolocontent2{
	margin: 0px;	width: auto;	height: 30px;	padding: 18px 0px 10px 0px;	font-family: Arial, Helvetica, sans-serif; font-size: 25px;	color: #000;	text-align:left;
}

#imgsxcontent2{
	width: 15px;	height: 376px;	margin: 0px;	padding:0px;	float: left;
}

#testocontent2{
	width: 685px;	height: 376px;	margin: 0px;	padding: 0px 0px 0px 15px;	float: left;
}

#anteprimacontent2{
	width: 310px;	height: 376px;	margin: 0px;	padding: 0px;	float: left;
}

Lo script nel head:

<SCRIPT Language=”Javascript”>
<!–-
document.images[num].onload=carica();
//–->
</SCRIPT>

Nel body:

<div id="content2">
<div id="titolocontent2">Eventi</div>
<div id="imgsxcontent2"></div>
<div id="testocontent2">
<p><a href="#" onmouseover='document.images.src=".../img_evento1.png";' onmouseout='document.images["num"].src="..../img_evento2.png";'>evento1</a><br />
<a href="#" onmouseover='document.images.src=".../img_evento2.png";' onmouseout='document.images["num"].src="..../img_evento2.png";'>evento2</div>
</div>

Le mie domande sono:
- come faccio a indicare che l'immagine del mouseover deve apparire nel div #anteprimacontent2...??? (lo elimino se serve! :ilpirata: )
- lo script nel head è corretto?...
- devo x forza creare un link fittizzio? (a href="#")...altrimenti onmouseover come lo si attiva?

In totale: cosa devo fare??????
Help!!!:crying:

Ringrazio in anticipo l'anima pia :angel: che riuscirà a rispondere a questo mio quesito!
:byebye:

 

[Vale2]

Ciao,

esempio peprsonalizzabile

<script type="text/javascript">
function anteprima(){
document.getElementById("content2").innerHTML ='<img src="tua_immagine.jpg">';
}
function esci(){
document.getElementById("content2").innerHTML ='';
}
</script>

<div id="content2"></div>

<a href="javascript:;" onmouseover="anteprima()" onmouseout="esci()">evento1</a>

Valeria

 

[knele76]

Ciao Vale2!
Grazie intanto per avermi risposto!!!

Però ho il dubbio di nn essermi spiegata bene poiché io ho un elenco di voci alle quali applicare l'anteprima quindi non dovrebbe essere il contrario? ovvero nel head dare la regola generale di anteprima e nel body impostare le varie immagini relative alle singole voci in elenco?
(x intenderci come x lo stile css con il quale si impostano le regole generali di formattazione, i contenitori dei contenuti e non il contrario)

Anche perché io non devo inserire un'immagine soltanto di anteprima x il div content2, bensì più immagini per ogni singola riga di paragrafo che si trovano nel div testocontent2 (div interno al div content2).... che potrebbero essere anche una ventina di anteprime...

Spero questa volta di essere stata più chiara ! .
Knele76 :byebye: