F.A.Q. numero 430.
Come posso creare dinamicamente dei link a nomi e cliccando su di essi si visualizzare a destra foto e dati relativi?
Nel codice che segue, i links vengono immersi nel documento, ed al click si ottiene l'effetto voluto.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
//--fabiano@jsdir.com-------
//--http://www.jsdir.com--------
//--copyright © 2001-------
//----------------------------------------parte comune-------------------------------------
//-------browser sniff--------------
var isOp=(navigator.userAgent.toLowerCase().indexOf('opera')!=-1)?true:false;
var isOp5=(isOp && navigator.userAgent.toLowerCase().indexOf('5')!=-1)?true:false;
var nome=(navigator.appName=="Microsoft Internet Explorer")?true:false;
var wt=nome?(navigator.appVersion.split(';').toString().split("").toString().split(',')[4] ):null;
var isie5=((wt)>=5 && nome)?true:false;
var isie4=((wt <5 && wt >=4) && nome)?true:false;
var isNS4=(document.layers)?true:false;
var isNS6=document.getElementById &&(navigator.appName=="Netscape")?true:false;
var isIE4=document.all?true:false;
var isIE5=document.getElementById && (navigator.appName=="Microsoft Internet Explorer")?true:false;
var sty=(isie4 || isie5 || isNS6 || isOp5)?'hidden':(isNS4)?'hide':'hidden';
var stv=(isie4 || isie5 || isNS6 || isOp5)?'visible':(isNS4)?'show':'visible;'
var isd=(isNS4)?document.layers:(isie4 || isOp5)?document.all:document;
//-------parte modificabile------------------------------------------
//--
//-----preload immagini-------
var imm=new Array('images/img1.gif','images/img2.gif','images/img3.gif');
//--aggiungere immagini----
ph=new Array();
for (i=0; i<imm.length; i++)
{
ph[i]=new Image();
ph[i].src=imm[i];
}
//--------------- stili -------
var altz=0; //--top del primo nome---------
var colore="navy"; //--colore del font------
var tipo="Verdana"; //--tipo font--------
var sez="2"; //--dimensione font-----
//------dati personali-----------------
var n0=new Array('Mario Rossi','via pinco pallino 3','tel: 044444444','.','.');
var n1=new Array('Fabio Bianchi','via dante 11','tel: 055555555','.','.');
var n2=new Array('Giuseppe Verdi','via verdi pascoli 33','tel: 00000000','.','.');
var nomi=new Array(n0,n1,n2); //--aggiungere o togliere le variabili dichiarate-----
//--
//---------fine parte modificabile----------------
//----------------------------------
function wrt()
{
if (isie5 || isNS6)
{
for (j=0; j<nomi.length; j++)
{
altz=altz+20;
var liv=document.createElement('div');
document.body.appendChild(liv);
liv.id="lv"+[j];
liv.style.position="absolute";
liv.style.top=altz;
liv.style.left=10;
var ft=document.createElement('font');
document.getElementById("lv"+[j]).appendChild(ft);
ft.id="fnt"+[j];
ft.color=colore;
ft.face=tipo;
ft.size=sez;
var lnk=document.createElement('a');
document.getElementById("fnt"+[j]).appendChild(lnk);
lnk.id="link"+[j];
lnk.setAttribute('href','javascript:mostra('+j+')');
lnk.style.textDecoration="none";
document.getElementById("link"+[j]).onmouseover=ch;
document.getElementById("link"+[j]).onmouseout=hh;
var list=document.createTextNode(nomi[j][0]);
document.getElementById("link"+[j]).appendChild(list);
}
}
}
//----------colora---------------------
function ch(evt,dd)
{
if (isie5 || isNS6)
this.style.background="#c6eff7";
else
if(isie4)
document.all[dd].style.background="#c6eff7";
else
if(isNS4)
document.layers[dd].bgColor="#c6eff7";
}
function hh(evt,dd)
{
if (isie5 || isNS6)
this.style.background="white";
else
if (isie4)
document.all[dd].style.background="white";
else
if (isNS4)
document.layers[dd].bgColor="white";
}
//---------------------------mostra-------------------
function mostra(id)
{
if (isie5 || isNS6)
document.getElementById('div0').innerHTML='<img src='+(ph[id].src)+'border=0 height=200 width=300><font color=\"'+(colore)+'\" face=\"'+(tipo)+'\" size=\"'+(sez)+'\"><p>'+(nomi[id][0])+'</p><p>'+(nomi[id][1])+'</p><p>'+(nomi[id][2])+'</p><p>'+(nomi[id][3])+'</p><p>'+(nomi[id][4])+'</p></font>';
else
if (isie4)
document.all['div0'].innerHTML='<img src='+(ph[id].src)+' border=0 height=200 width=300><font color=\"'+(colore)+'\" face=\"'+(tipo)+'\" size=\"'+(sez)+'\"><p>'+(nomi[id][0])+'</p><p>'+(nomi[id][1])+'</p><p>'+(nomi[id][2])+'</p><p>'+(nomi[id][3])+'</p><p>'+(nomi[id][4])+'</p></font>';
else
if (isNS4)
{
document.layers['div0'].document.write('<img src='+(ph[id].src)+' border=0 height=200 width=300><font color=\"'+(colore)+'\" face=\"'+(tipo)+'\" size=\"'+(sez)+'\"><p>'+(nomi[id][0])+'</p><p>'+(nomi[id][1])+'</p><p>'+(nomi[id][2])+'</p><p>'+(nomi[id][3])+'</p><p>'+(nomi[id][4])+'</p></font>');
document.layers['div0'].document.close();
document.layers['div0'].bgColor="#c6eff7";
}
}
//-------------------codice per NS4------------------------
if(isNS4)
{
for (j=0; j<nomi.length; j++)
{
aaa="lv"+[j];
altz=altz+20;
document.write('<layer name=\"'+(aaa)+'\" top=\"'+(altz)+'\" left=10><font color=\"'+(colore)+'\" size=\"'+(sez)+'\" face=\"'+(tipo)+'\" ><A HREF="javascript:mostra('+j+')" onMouseOver="ch(0,\''+aaa+'\')" onMouseOut="hh(0,\''+aaa+'\')" >'+(nomi[j][0])+'</A></font></layer>');
document.close();
}
}
//-------------------codice per IE4------------------------
if(isie4)
{
for (j=0; j<nomi.length; j++)
{
aaa="lv"+[j];
altz=altz+20;
document.write('<div id=\"'+(aaa)+'\" style="position.absolute; top:'+(altz)+'; left:10; width:150"><font color=\"'+(colore)+'\" size=\"'+(sez)+'\" face=\"'+(tipo)+'\" ><A HREF="javascript:mostra('+j+')" onMouseOver="ch(0,\''+aaa+'\')" onMouseOut="hh(0,\''+aaa+'\')" style="text-decoration:none;">'+(nomi[j][0])+'</A></font></div>');
document.close();
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="wrt()">
<div id="div0" style="position:absolute; top:20; left:300; height:400;width:300; background:#c6eff7;"></div>
</BODY>
</HTML>
| 
Stampa
Segnala 
Preferiti 
