onmouseover anteprima immagine come in google

knele76

Nuovo Utente
6 Dic 2012
7
0
0
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 )
Codice:
#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:
Codice:
<SCRIPT Language=”Javascript”>
<!–-
document.images[num].onload=carica();
//–->
</SCRIPT>
Nel body:
HTML:
<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?... :confused:
- devo x forza creare un link fittizzio? (a href="#")...altrimenti onmouseover come lo si attiva?

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

Ringrazio in anticipo l'anima pia :angel: che riuscirà a rispondere a questo mio quesito!
:byebye:
 
Ultima modifica di un moderatore:

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Ciao,

esempio peprsonalizzabile


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

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

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

Valeria
 

knele76

Nuovo Utente
6 Dic 2012
7
0
0
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 ! .:rolleyes:
Knele76 :byebye:
 
Discussioni simili
Autore Titolo Forum Risposte Data
T [PHP] [HTML] Action direttamente associate a onmouseover PHP 11
L onmouseover su div parenti indesiderato HTML e CSS 3
F onmouseover Javascript 3
K onMouseOver su immagine Javascript 2
P onmouseover e onmouseout su hotspot Javascript 15
G Onmouseout e onmouseover funziona solo lato backend Joomla 0
LolliPoppingu Problema "onmouseover". HTML e CSS 24
H Funzione onmouseover per mostrare un box con un link da cliccare? Javascript 3
B onmouseover, immagini multiple su hotspot map Javascript 3
S Codice OnMouseOver Javascript 6
I onclick non cambia l'immagine invece onmouseOver e Out si Javascript 9
K Script - onmouseover compaiono immagine e testo Javascript 15
elilabruja onmouseover in php PHP 9
E [JAVA] modificare Script per evento onmouseover Javascript 0
T Aiuto effetto onmouseover immagine si allunga e compare testo Javascript 0
I onMouseOver su immagini Javascript 23
K testo ed img alternati con onmouseover Javascript 5
K onmouseover HTML e CSS 8
J OnMouseover Slideshow Javascript 0
T Onmouseover slideshow Javascript 3
K onmouseover in altro frame Javascript 2
D Problema onmouseover Javascript 0
Z png: OnMouseOver e UseMap Javascript 5
A onMouseOver Javascript 6
S Usare onmouseover con 'campo immagine' e non al tag <img> Javascript 3
D evento onmouseover Javascript 9
sbobby OnMouseOver HTML e CSS 3
H problemi con onmouseover e GetElementById Javascript 1
M OnMouseOver non funziona Javascript 1
purno Cambio immagine con onMouseOver: HTML e CSS 7
§ onmouseover finestrella Javascript 2
C Marquee verticale che si ferma onmouseover HTML e CSS 8
W OnMouseOver su una map area HTML e CSS 5
N Non Autorizzato. Dovresti rimuovere il parametro customize_messenger_channel per visualizzare l'anteprima in frontend. WordPress 1
Alex_70 Visualizzare anteprima foto in dropdown PHP 2
trattorino [Javascript] Spoiler con anteprima Javascript 3
silvia88 ***Help*** - Anteprima immagine photoshop diversa da file Photoshop 3
K [Joomla] Visualizzazione anteprima diversa dalla demo del template Joomla 0
Mer556 [Javascript] IMMAGINI A SCORRIMENTO, ANTEPRIMA 3 Javascript 1
momeraths [HTML] Anteprima sito versione mobile HTML e CSS 2
L php/mysql - anteprima notizia con pulsante PHP 2
H Anteprima immagine video youtube HTML e CSS 1
B Anteprima Facebook HTML e CSS 4
S Condividere correttamente link su Facebook (immagine anteprima errata) HTML e CSS 1
F Anteprima descrizione WordPress 1
J Problema per creare anteprima dei post da un db PHP 2
F [RISOLTO] Creazione slider con anteprima con jquery jQuery 8
M Dreamweaver non visualizza file swf nell'anteprima browser Webdesign e Grafica 0
L jquery slideshow con anteprima jQuery 10
una mamma snob Modificare impostazioni di visualizzazione dell'anteprima articoli con immagini. WordPress 5

Discussioni simili