[JAVASCRIPT] Inserire un link [Archivio]

View Full Version : [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

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 :D

DrZoidberg

07-12-2008, 16:18

Approfitto della tua gentilezza x chiederti un'altra cosa :p

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 ;)