[JAVASCRIPT] Inserire un link

[DrZoidberg]

Salve a tutti,
ho trovato in rete una semplice galleria fotografica implementata con uno script javascript! Vorrei modificare questo javascript in modo che ogni foto sia anche un link ad un sito (che è diverso per ogni foto)...solamente che nn so come inserire il link alla foto tramite javascript!!!
Vi allego il codice

<SCRIPT type="text/javascript" LANGUAGE="JavaScript">
var num=0;

// format: src, alt, text
imgArray = [
['../car.jpg', 'Cardiovascular', 'Text for Picture 1'],
['../gas.jpg', 'Gastroenterology','Text for Picture 2'],
['../mus.jpg', 'Musculoskeletal', 'Text for Picture 3'],
['../oph.jpg', 'Ophthalmic', 'Text for Picture 4'],
['../oti.jpg', 'Otic', 'Text for Picture 5'],
['../res.jpg', 'Respiratory', 'Text for Picture 6'],
['../uri.jpg', 'Uniary', 'Text for Picture 7'],
['../int.jpg', 'Integumentary', 'Text for Picture 8'],
['../end.jpg', 'Endocrine', 'Text for Picture 9'],
['../imm.jpg', 'Immunological', 'Text for Picture 10'],
['../neo.jpg', 'Antineoplastic', 'Text for Picture 11'],
['../neu.jpg', 'Neurological', 'Text for Picture 12'],
['../psy.jpg', 'Psychiatric', 'Text for Picture 13'],
['../dos.jpg', 'Drug Math', 'Text for Picture 14']
]

function LimitNumber(value) {
if (value < 0) { value = imgArray.length - 1; }
var value = value % imgArray.length;
return value;
}
function slide(slide_num,mypic,mylbl) {
document.getElementById(mypic).src=imgArray[slide_num][0];
document.getElementById(mypic).alt=imgArray[slide_num][1];
document.getElementById(mylbl).innerHTML=imgArray[slide_num][2];
}
function DisplaySlides(snos) {
var tmp = new Array();
tmp = snos.split(',');
var SNo = num;
for (i=0; i<tmp.length; i++) {
SNo = LimitNumber(i+num);
// alert(SNo+' : '+SNo+' : mypic'+tmp[i]+' : mlbl'+tmp[i]);
slide(SNo,'mypic'+tmp[i],'mylbl'+tmp[i]);
}
}
function MoveUp(snos) {
num = LimitNumber(num+1); DisplaySlides(snos);
}

function MoveDown (snos) {
num = LimitNumber(num-1); DisplaySlides(snos);
}

var timedNum = 0;
function TimedImage() {
timedNum++;
timedNum = LimitNumber(timedNum);
slide(timedNum,'mypic10','mylbl10');
}
var timedFunc = '';
function InitTimeInterval() {
timeFunc = setInterval("TimedImage()",3000);
}
</SCRIPT>

<body onLoad="InitTimeInterval()">

<TABLE border="0"><TR><TD>
<!-- vertical display of images -->
<div style="border: 2px dotted red;">
<IMG id="mypic0" SRC="../car.jpg" alt="Cardiovascular" BORDER="0" HEIGHT="100" WIDTH="200">
<div id="mylbl0" style="font-size:larger;"> Text For Picture 1 </div>

<IMG id="mypic1" SRC="../gas.jpg" alt="Gastrointestinal" BORDER="0" HEIGHT="100" WIDTH="200">
<div id="mylbl1" style="font-size:larger;"> Text For Picture 2 </div>
<IMG id="mypic2" SRC="../mus.jpg" alt="Musculoskeletal" BORDER="0" HEIGHT="100" WIDTH="200">
<div id="mylbl2" style="font-size:larger;"> Text For Picture 3 </div>
<center>
<a HREF="#" onClick="MoveDown('0,1,2'); return false;"> Down</a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a HREF="#" onClick="MoveUp('0,1,2'); return false;"> Up</a>
</center>
</div>
</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</body>

Qualcuno può darmi una mano??
Grazieeee

[Torav]

Originariamente inviato da DrZoidberg

Salve a tutti,
ho trovato in rete una semplice galleria fotografica implementata con uno script javascript! Vorrei modificare questo javascript in modo che ogni foto sia anche un link ad un sito (che è diverso per ogni foto)...solamente che nn so come inserire il link alla foto tramite javascript!!!
Vi allego il codice

<SCRIPT type="text/javascript" LANGUAGE="JavaScript">
var num=0;

// format: src, alt, text, link
imgArray = [
['../car.jpg', 'Cardiovascular', 'Text for Picture 1', 'link'],
['../gas.jpg', 'Gastroenterology','Text for Picture 2', 'link'],
['../mus.jpg', 'Musculoskeletal', 'Text for Picture 3', 'link'],
['../oph.jpg', 'Ophthalmic', 'Text for Picture 4', 'link'],
['../oti.jpg', 'Otic', 'Text for Picture 5', 'link'],
['../res.jpg', 'Respiratory', 'Text for Picture 6', 'link'],
['../uri.jpg', 'Uniary', 'Text for Picture 7', 'link'],
['../int.jpg', 'Integumentary', 'Text for Picture 8', 'link'],
['../end.jpg', 'Endocrine', 'Text for Picture 9', 'link'],
['../imm.jpg', 'Immunological', 'Text for Picture 10', 'link'],
['../neo.jpg', 'Antineoplastic', 'Text for Picture 11', 'link'],
['../neu.jpg', 'Neurological', 'Text for Picture 12', 'link'],
['../psy.jpg', 'Psychiatric', 'Text for Picture 13', 'link'],
['../dos.jpg', 'Drug Math', 'Text for Picture 14', 'link']
]

function LimitNumber(value) {
if (value < 0) { value = imgArray.length - 1; }
var value = value % imgArray.length;
return value;
}
function slide(slide_num,mypic,mylbl) {
document.getElementById(mypic).src=imgArray[slide_num][0];
document.getElementById(mypic).alt=imgArray[slide_num][1];
document.getElementbyId(mypic + "Link").href = imgArray[slide_num][3];
document.getElementById(mylbl).innerHTML=imgArray[slide_num][2];
}
function DisplaySlides(snos) {
var tmp = new Array();
tmp = snos.split(',');
var SNo = num;
for (i=0; i<tmp.length; i++) {
SNo = LimitNumber(i+num);
// alert(SNo+' : '+SNo+' : mypic'+tmp[i]+' : mlbl'+tmp[i]);
slide(SNo,'mypic'+tmp[i],'mylbl'+tmp[i]);
}
}
function MoveUp(snos) {
num = LimitNumber(num+1); DisplaySlides(snos);
}

function MoveDown (snos) {
num = LimitNumber(num-1); DisplaySlides(snos);
}

var timedNum = 0;
function TimedImage() {
timedNum++;
timedNum = LimitNumber(timedNum);
slide(timedNum,'mypic10','mylbl10');
}
var timedFunc = '';
function InitTimeInterval() {
timeFunc = setInterval("TimedImage()",3000);
}
</SCRIPT>

<body onLoad="InitTimeInterval()">

<TABLE border="0"><TR><TD>
<!-- vertical display of images -->
<div style="border: 2px dotted red;">
<IMG id="mypic0" SRC="../car.jpg" alt="Cardiovascular" BORDER="0" HEIGHT="100" WIDTH="200">
<div id="mylbl0" style="font-size:larger;"> Text For Picture 1 </div>

<a href="" id="mypic1Link"><IMG id="mypic1" SRC="../gas.jpg" alt="Gastrointestinal" BORDER="0" HEIGHT="100" WIDTH="200"></a>
<div id="mylbl1" style="font-size:larger;"> Text For Picture 2 </div>
<a href="" id="mypic2Link"><IMG id="mypic2" SRC="../mus.jpg" alt="Musculoskeletal" BORDER="0" HEIGHT="100" WIDTH="200"></a>
<div id="mylbl2" style="font-size:larger;"> Text For Picture 3 </div>
<center>
<a HREF="#" onClick="MoveDown('0,1,2'); return false;"> Down</a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a HREF="#" onClick="MoveUp('0,1,2'); return false;"> Up</a>
</center>
</div>
</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</body>

Qualcuno può darmi una mano??
Grazieeee

Non l'ho testato e c'è una seria possibilità che qualcosa non vada, riposta se non ti funziona, ho messo in grassetto le modifiche che ho fatto. Nell'array delle foto devi solo aggiungere il link che vorresti associare ad ogni foto. Fammi sapere

[DrZoidberg]

infatti non funziona!!! non riconosce il link....ci avevo provato anche io cosi ma non va....

[Torav]

che significa che non riconosce il link? O-o
hai un debugger per sapere cosa c'è che non va?

[DrZoidberg]

se clicco sulla foto non apre nessun link!!!!!

Ma non posso stampare il contenuto dell'array javascript direttamente nella variabile html?

cioè qlc del tipo <a href=" [VALORE ARRAY] "> ??????

[Torav]

ok nella modifica che ho fatto ci sta un b minuscola invece che maiuscola,

getElementbyId -> getElementById e poi a me funziona perfettamente... l'unica accortezza che devi avere è nell'inserire i link iniziali nei tag html, per il resto a me sembra funzionare..

[DrZoidberg]

Funziona!!!!!!!
Grazie milleeeeeeeeeeeeee

[DrZoidberg]

Approfitto della tua gentilezza x chiederti un'altra cosa

Perchè se non inizializzo la tabella con delle foto non mi visualizza quelle memorizzate nell'array javascript?
Cioè...se io lancio lo script con questa tabella qui sotto che ho modificato, non mi compare niente, poi appena xò clicco su down o up...allora mi visualizza le foto!!
Come posso fare a inizializzare la galleria con delle foto che nn scelgo a priori??
Non so se mi sono spiegato bene

<TABLE border="0"><TR><TD>
<!-- vertical display of images -->
<div style="border: 2px dotted red;">
<IMG id="mypic0" SRC="" alt="" BORDER="0" HEIGHT="100" WIDTH="200">
<div id="mylbl0" style="font-size:larger;"> Text For Picture 1 </div>

<a href="" id="mypic1Link"><IMG id="mypic1" SRC="" alt="" BORDER="0" HEIGHT="100" WIDTH="200"></a>
<div id="mylbl1" style="font-size:larger;"> Text For Picture 2 </div>
<a href="" id="mypic2Link"><IMG id="mypic2" SRC="" alt="" BORDER="0" HEIGHT="100" WIDTH="200"></a>
<div id="mylbl2" style="font-size:larger;"> Text For Picture 3 </div>
<center>
<a HREF="#" onClick="MoveDown('0,1,2'); return false;"> Down</a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a HREF="#" onClick="MoveUp('0,1,2'); return false;"> Up</a>
</center>
</div>
</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>

[Torav]

prima di tutto mi sono accorto di una cosa: devi aggiungere <a href="" id="mypic0Link"> prima della foto numero 0 e </a> dopo, altrimenti il primo elemento non è un link:

<a href="" id="mypic0Link"><IMG id="mypic0" SRC="../car.jpg" alt="Cardiovascular" BORDER="0" HEIGHT="100" WIDTH="200"></a>

e poi ti basta fare questo cambiamento:

da <body onLoad="InitTimeInterval()"> a
<body onLoad="InitTimeInterval();DisplaySlides('0,1,2');">

[DrZoidberg]

si del primo link l'avevo corretto già!!!

Grazie mille x il tempo che mi hai dedicato!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[Torav]

figurati