how to load a different image on a web page and attach a hyperlink

everderese · March 30th, 2007, 02:54 PM

Hello,
I am looking for code that will load different image on a web page and attach a hyperlink to each picture and if possible have a read artilce link associated with the image.

I did find some code that let me load the images but i can not associate a link with it.

Code:

var urls="http://www.apem.com/news/" ;
var a=[
['Joy_gr-jaune_ico.jpg',170,170,'Industrial Joysticks'],
['Serie-IA_icone.jpg',181,198,'Pushbutton Switches'],
['ACF6573.jpg',170,170,'Boots for Pushbutton Switches'],
['',,,''],
['',,,''],
['',,,''],
['',,,'']
] 

for(i=0;i<a.length;i++){a[i][0]=urls+a[i][0]};

var cflip=Math.round((a.length-1)*Math.random()) ;
document.write('<p class="h"><img src="'+a[cflip][0]+'" width="'+a[cflip][1]+'" height="'+a[cflip][2]+'" alt="'+a[cflip][3]+'"><br>'+a[cflip][3]+'<\/p>');

spinal007 · April 1st, 2007, 10:53 AM

add link tags around the code....

Code:

document.write('<p class="h"><a href="URL.htm"><img src="'+a[cflip][0]+'" width="'+a[cflip][1]+'" height="'+a[cflip][2]+'" alt="'+a[cflip][3]+'"><br>'+a[cflip][3]+'<\/a><\/p>');

everderese · April 2nd, 2007, 11:30 AM

Thank you

when i click on the picture it want's to go to url.htm how do i customize the line
['Joy_gr-jaune_ico.jpg',170,170,'Industrial Joysticks', url='joystick_news.html'],

looking foward to your reply

everderese · April 2nd, 2007, 11:48 AM

Spinal007,
I figured it out, never would of got without you

Thank you

spinal007 · April 2nd, 2007, 12:52 PM

No problem and well done for trying and getting there! I hope you stick around and enjoy Webforumz...

I'll post my reply anyway because this might help somebody who comes across this post in the future.

This is an array...
['Joy_gr-jaune_ico.jpg',170,170,'Industrial Joysticks']

You went wrong by putting url= in the array...
['Joy_gr-jaune_ico.jpg',170,170,'Industrial Joysticks', url= 'NEW 1'] // ERROR

Add items to an array like this...
['Joy_gr-jaune_ico.jpg',170,170,'Industrial Joysticks', 'NEW 1', 'NEW 2']

In your case, the index of 'NEW 1' is 4 (as it's the 5th item of the array).
So you can access it using [4].

Which in your case, would be:
document.write('<p class="h"><a href="'+a[cflip][4]+'
"><img src="'+a[cflip][0]+'" width="'+a[cflip][1]+'" height="'+a[cflip][2]+'" alt="'+a[cflip][3]+'"><br>'+a[cflip][3]+'<\/a><\/p>');