Praticamente ti sei risposto da solo! Ti bastava guardare l'html di canon.it e vedere come era fatto!
Lo script è un javascript creato con dreamweaver da un componente aggiuntivo rilasciato su macromedia.com gratuitamente! Essendo in possesso di tale componente, ho riprodotto lo script!
Il sistema è semplice! Usa livelli (tag div), e li mostra o li nasconde al passaggio del mouse! Praticamente nei collegamenti ipertestuali si può usare il comando OnMouseOver e il comando OnMouseOut, di conseguenza mostra e nasconde il livello contenente il testo descrttivo! Di seguito il codice di tutta la pagina di prova che ho creato...... adattalo e buon lavoro!
Codice:
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function tmt_findObj(n){
var x,t; if((n.indexOf("?"))>0&&parent.frames.length){t=n.split("?");
x=eval("parent.frames['"+t[1]+"'].document.getElementById('"+t[0]+"')");
}else{x=document.getElementById(n)}return x;
}
function MM_showHideLayers() { //v3.0A Modified by Al Sparber and Massimo Foti for NN6 Compatibility
var i,p,v,obj,args=MM_showHideLayers.arguments;if(document.getElementById){
for (i=0; i<(args.length-2); i+=3){ obj=tmt_findObj(args);v=args[i+2];
v=(v=='show')?'visible'
v='hide')?'hidden':v;
if(obj)obj.style.visibility=v;}} else{
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'v='hide')?'hidden':v; }
obj.visibility=v; }}
}
//-->
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; left:116px; top:69px; width:131px; height:8px; z-index:1; visibility: hidden;">Rollover di Link1 </div>
<div id="Layer2" style="position:absolute; left:116px; top:70px; width:115px; height:21px; z-index:2; visibility: hidden;">rollover di Link2 </div>
<a href="pagina.htm" onMouseOver="MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')">Link1</a> <a href="pagina2.htm" onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="MM_showHideLayers('Layer2','','hide')">Link2</a>
</body>
</html>
