immagine con descrizione

**maysha** · 18-08-2003, 10:37

Ciao a tutti!!!
Mi piacerebbe che al passaggio del mouse su un' immagine comparisse qualcosa si scritto
per esempio ci sono dei menu' dove se passi col mouse ti dice cosa sono.
A me serve x scrivere delle descrizioni ma non ci deve essere nessun collegamento ipertestuale.
Sapete dirmi qual'è il javascript da usare x favore?
Grazie

**OcchioCrepato** · 18-08-2003, 12:03

prova l'attributo 'alt'

[img]immagine.gif[/img]

ciao

**maysha** · 18-08-2003, 12:57

grazie questo comando gia' lo conosco ma ho bisogno di qualcosa ke resti finke' il mouse è posato sulla foto

**Robycz** · 18-08-2003, 13:56

Ti riporto questo esempio: imperfetto ma -spero- funzionante...
e ti suggerisco di basarti sulla libreria di WeDev! ( WDL )

codice:

<HTML>
<HEAD>
<script type="text/javascript" language="JavaScript">
//----------------------------------------------
//-- alternate test nei links (e non solo...) --
//----------------------------------------------

// In che browser ci hanno caricato?
if (document.layers) {navigator.family = "nn4";}
if (document.all) {navigator.family = "ie4";}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {navigator.family = "gecko";}
// Inserire in questo array le descrizioni
descarray = new Array();
descarray[0]="Commento 1";
descarray[1]="Commento 2";
descarray[2]="Commento 3";

overdiv="0";
// Crea i pop-up
function popLayer(a){
if(!descarray[a]){descarray[a]="<font color=red>This popup (#"+a+") isn't setup correctly - needs description</font>";}
if (navigator.family == "gecko") {pad="0"; bord="1 bordercolor=black";}
else {pad="1"; bord="0";}
desc = 	  "<table cellspacing=0 cellpadding="+pad+" border="+bord+"  bgcolor=000000><tr><td>\n"
	+"<table cellspacing=0 cellpadding=3 border=0 width=100%><tr><td bgcolor=ffffdd><center><font size=-1>\n"
	+descarray[a]
	+"\n</td></tr></table>\n"
	+"</td></tr></table>";
if(navigator.family =="nn4") {
	document.object1.document.write(desc);
	document.object1.document.close();
	document.object1.left=x+15;
	document.object1.top=y-5;
	}
else if(navigator.family =="ie4"){
	object1.innerHTML=desc;
	object1.style.pixelLeft=x+15;
	object1.style.pixelTop=y-5;
	}
else if(navigator.family =="gecko"){
	document.getElementById("object1").innerHTML=desc;
	document.getElementById("object1").style.left=x+15;
	document.getElementById("object1").style.top=y-5;
	}
}
function hideLayer(){
if (overdiv == "0") {
	if(navigator.family =="nn4") {eval(document.object1.top="-500");}
	else if(navigator.family =="ie4"){object1.style.pixelTop="-500";}
	// REM else if(navigator.family =="ie4"){object1.innerHTML="";}
	else if(navigator.family =="gecko") {document.getElementById("object1").style.top="-500";}
	}
}

// Controlla la posizione del mouse per capire in che posizione creare il pop-up
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
function handlerMM(e){
x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;
}
if (isNav){document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM;
</script>
</head>
<BODY>

<div id="object1" style="position:absolute; width:200; font-family:verdana,arial,helvetica; font-size:9px; background-color:cccccc; padding:2px; border: 3px; color:black; border-color:black; border-width:3; visibility:show; left:25px; top:-100px; z-index:+1" onmouseover="overdiv=1;" onmouseout="overdiv=0; setTimeout('hideLayer()',1000)">
</div>
pippo1


pippo2


pippo3


</BODY></HTML>

Discussione: immagine con descrizione

Strumenti discussione

Ricerca discussione

Visualizza

immagine con descrizione

Permessi di invio