[JAVASCRIPT] Inserire un link

DrZoidberg · 07-12-2008, 14:34

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>

<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>
         
<a HREF="#" onClick="MoveUp('0,1,2'); return false;"> Up</a>
</center>
</div>
</TD>
<TD> </TD>
</TR>
</TABLE>
</body>

Qualcuno può darmi una mano??
Grazieeee

Torav · 07-12-2008, 15:03

Quote:

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>

<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>
         
<a HREF="#" onClick="MoveUp('0,1,2'); return false;"> Up</a>
</center>
</div>
</TD>
<TD> </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 · 07-12-2008, 15:14

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

Torav · 07-12-2008, 15:31

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

DrZoidberg · 07-12-2008, 15:43

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 · 07-12-2008, 15:54

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 · 07-12-2008, 16:11

Funziona!!!!!!!
Grazie milleeeeeeeeeeeeee

DrZoidberg · 07-12-2008, 16:18

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>

<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>
         
<a HREF="#" onClick="MoveUp('0,1,2'); return false;"> Up</a>
</center>
</div>
</TD>
<TD> </TD>
</TR>
</TABLE>

Torav · 07-12-2008, 16:32

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 · 07-12-2008, 16:38

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

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

Torav · 07-12-2008, 17:57

figurati

07-12-2008, 14:34	#1
DrZoidberg Senior Member Iscritto dal: Jan 2006 Messaggi: 326	[JAVASCRIPT] Inserire un link 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>           <a HREF="#" onClick="MoveUp('0,1,2'); return false;"> Up</a> </center> </div> </TD> <TD> </TD> </TR> </TABLE> </body> Qualcuno può darmi una mano?? Grazieeee

07-12-2008, 15:14	#3
DrZoidberg Senior Member Iscritto dal: Jan 2006 Messaggi: 326	infatti non funziona!!! non riconosce il link....ci avevo provato anche io cosi ma non va....

07-12-2008, 15:31	#4
Torav Senior Member Iscritto dal: Dec 2005 Messaggi: 558	che significa che non riconosce il link? O-o hai un debugger per sapere cosa c'è che non va?

07-12-2008, 15:43	#5
DrZoidberg Senior Member Iscritto dal: Jan 2006 Messaggi: 326	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] "> ??????

07-12-2008, 15:54	#6
Torav Senior Member Iscritto dal: Dec 2005 Messaggi: 558	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..

07-12-2008, 16:11	#7
DrZoidberg Senior Member Iscritto dal: Jan 2006 Messaggi: 326	Funziona!!!!!!! Grazie milleeeeeeeeeeeeee

07-12-2008, 16:18	#8
DrZoidberg Senior Member Iscritto dal: Jan 2006 Messaggi: 326	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>           <a HREF="#" onClick="MoveUp('0,1,2'); return false;"> Up</a> </center> </div> </TD> <TD> </TD> </TR> </TABLE>

07-12-2008, 16:32	#9
Torav Senior Member Iscritto dal: Dec 2005 Messaggi: 558	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');">

07-12-2008, 16:38	#10
DrZoidberg Senior Member Iscritto dal: Jan 2006 Messaggi: 326	si del primo link l'avevo corretto già!!! Grazie mille x il tempo che mi hai dedicato!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

07-12-2008, 17:57	#11
Torav Senior Member Iscritto dal: Dec 2005 Messaggi: 558	figurati

Strumenti
Mostra una versione stampabile Invia questa pagina per email