/    Sign up×
Community /Pin to ProfileBookmark

Modifying a simple script… I think…. Make Image Rotator Clickable.

Hi,

I would like to modify a script to make the images in a free image rotator found at the following link clicklable: [url]http://javascriptsource.com/miscellaneous/random-image-rotator.html[/url]

I can’t figure it out on my own. I attached a link to the code and I will copy and past it below. This is what I need (please assume I’m an very, very slow):

1) Either detailed instructions (step by step) on how to change it.
OR
2) Perhaps just modifying the script with actual links and I can personllize the links with my content after the fact.

[B]Thank you very, very much for your help. ? I will copy the script below:[/B]

[CODE]
<!– THREE STEPS TO INSTALL RANDOM IMAGE ROTATOR:

1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document –>

<!– STEP ONE: Paste this code into the HEAD of your HTML document –>

<HEAD>

<SCRIPT LANGUAGE=”JavaScript”>
<!– Original: Robert Bui ([email protected]) –>
<!– Web Site: http://astrogate.virtualave.net –>

<!– This script and many more are available free online at –>
<!– The JavaScript Source!! http://javascript.internet.com –>

<!– Begin
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem(“http://javascript.internet.com/img/image-cycler/01.jpg”);
image_list[image_index++] = new imageItem(“http://javascript.internet.com/img/image-cycler/02.jpg”);
image_list[image_index++] = new imageItem(“http://javascript.internet.com/img/image-cycler/03.jpg”);
image_list[image_index++] = new imageItem(“http://javascript.internet.com/img/image-cycler/04.jpg”);
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y – x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = “rotateImage(‘”+place+”‘)”;
setTimeout(recur_call, interval);
}
// End –>
</script>
</HEAD>

<!– STEP TWO: Insert the onLoad event handler into your BODY tag –>

<BODY OnLoad=”rotateImage(‘rImage’)”>

<!– STEP THREE: Copy this code into the BODY of your HTML document –>

<center>
<img name=”rImage” src=”http://javascript.internet.com/img/image-cycler/01.jpg” width=120 height=90>
</center>

<p><center>
<font face=”arial, helvetica” size=”-2″>Free JavaScripts provided<br>
by <a href=”http://javascriptsource.com”>The JavaScript Source</a></font>
</center><p>

<!– Script Size: 2.29 KB –>
[/CODE]

to post a comment
JavaScript

7 Comments(s)

Copy linkTweet thisAlerts:
@JMRKERFeb 25.2012 — See is this is closer to your needs ... much simpler.
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Rotating Gallery&lt;/title&gt;
&lt;/head&gt;
&lt;body onload="onload()"&gt;
&lt;script type="text/javascript"&gt;
function onload(){ slideshow(); }

var imgPtr = 0;
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgList = [
['11.jpg','http://www.webdeveloper.com'],
['12.jpg','http://www.codingforums.com"'],
['13.jpg','http://dreamincode.net'],
['14.jpg','http://www.mredkj.com/tutorials/htmljs.html'],
['15.jpg','http://scripterlative.com/?smartstars']
];

function slideshow(){
var image=document.getElementById("ss_image")
image.src = baseURL + imgList[imgPtr][0];
document.getElementById('alink').href = imgList[imgPtr][1];
imgPtr = (imgPtr+1) &amp;#37; imgList.length;
setTimeout("slideshow()",2000);
}

&lt;/script&gt;
&lt;a href="" id="alink" style="text-decoration:none"&gt;
&lt;img id="ss_image" src="" height="296" width="401" /&gt;
&lt;/a&gt;
&lt;br /&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@Rookie999authorFeb 27.2012 — Thank you so much! The script you gave me works like a charm. I have a quick question about it.

For the sake of SEO and keeping google happy, how would I go about giving each image a description? I'm sorry I did not put that in my original request and I am thrilled with the solution you gave me.

I really appreciate the help!
Copy linkTweet thisAlerts:
@JMRKERFeb 27.2012 — Thank you so much! The script you gave me works like a charm. I have a quick question about it.

For the sake of SEO and keeping google happy, how would I go about giving each image a description? I'm sorry I did not put that in my original request and I am thrilled with the solution you gave me.

I really appreciate the help![/QUOTE]


You might have guessed at this solution:

Add a 3rd element to the imgList array...
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Rotating Gallery&lt;/title&gt;
&lt;/head&gt;
&lt;body onload="onload()"&gt;
&lt;script type="text/javascript"&gt;
function onload(){ slideshow(); }

var imgPtr = 0;
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgList = [
['11.jpg','http://www.webdeveloper.com','Webdeveloper'],
['12.jpg','http://www.codingforums.com','CodingForums'],
['13.jpg','http://dreamincode.net','Dream-In-Code'],
['14.jpg','http://www.mredkj.com/tutorials/htmljs.html','Tutorials'],
['15.jpg','http://scripterlative.com/?smartstars','Scripterlative']
];

function slideshow(){
var image=document.getElementById("ss_image")
image.src = baseURL + imgList[imgPtr][0];
document.getElementById('alink').href = imgList[imgPtr][1];
document.getElementById('ss_caption').innerHTML = imgList[imgPtr][2];
imgPtr = (imgPtr+1) % imgList.length;
setTimeout("slideshow()",2000);
}

&lt;/script&gt;
&lt;a href="" id="alink" style="text-decoration:none"&gt;
&lt;img id="ss_image" src="" height="296" width="401" /&gt;
&lt;div id="ss_caption" style="text-align:center;width:401px"&gt;&lt;/div&gt;
&lt;/a&gt;
&lt;br /&gt;
&lt;/body&gt;
&lt;/html&gt;

Who is SEO?

And why should I keep google happy?

:eek:
Copy linkTweet thisAlerts:
@Rookie999authorFeb 27.2012 — Okay, you're very good at what you do and if I'm getting annoying I understand. I don't expect more help if your done helping.

I think my limited knowlege makes me a poor communicator in this regard. I was looking for what my CMS calls "Image Description" of which I think is an "Alt Attribute". Alt="image description".

For the sake of Search Engine Optimization I'm wanted to make sure my images were properly labelled. It is my understanding that google wants labelled images and a site without labelled images can be a negeative from an SEO perspective. I don't require an additional text link but rather the alt description.

Does that make more sense? Again, I understand if your done helping but if you do, thanks! I really appreciate what you have already done and I did impliment the clickable code.?
Copy linkTweet thisAlerts:
@JMRKERFeb 28.2012 — Okay, you're very good at what you do and if I'm getting annoying I understand. I don't expect more help if your done helping.

I think my limited knowlege makes me a poor communicator in this regard. I was looking for what my CMS calls "Image Description" of which I think is an "Alt Attribute". Alt="image description".

For the sake of Search Engine Optimization I'm wanted to make sure my images were properly labelled. It is my understanding that google wants labelled images and a site without labelled images can be a negeative from an SEO perspective. I don't require an additional text link but rather the alt description.

Does that make more sense? Again, I understand if your done helping but if you do, thanks! I really appreciate what you have already done and I did impliment the clickable code.?[/QUOTE]


You should begin to start seeing a pattern here.

All attributes of an HTML tag are accessible using JS.

Change the description element within the imgList array to suit your needs.
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Rotating Gallery&lt;/title&gt;
&lt;/head&gt;
&lt;body onload="onload()"&gt;
&lt;script type="text/javascript"&gt;
function onload(){ slideshow(); }

var imgPtr = 0;
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgList = [
['11.jpg','http://www.webdeveloper.com','Webdeveloper','Alt.Descriptor 1'],
['12.jpg','http://www.codingforums.com','CodingForums','Alt.Descriptor 2'],
['13.jpg','http://dreamincode.net','Dream-In-Code','Alt.Descriptor 3'],
['14.jpg','http://www.mredkj.com/tutorials/htmljs.html','Tutorials','Alt.Descriptor 4'],
['15.jpg','http://scripterlative.com/?smartstars','Scripterlative','Alt.Descriptor 5']
];

function slideshow(){
document.getElementById("ss_image").src = baseURL + imgList[imgPtr][0];
document.getElementById('alink').href = imgList[imgPtr][1];
document.getElementById('ss_caption').innerHTML = imgList[imgPtr][2];
document.getElementById('ss_image').alt = imgList[imgPtr][3];
document.getElementById('ss_image').title = imgList[imgPtr][3];
imgPtr = (imgPtr+1) &amp;#37; imgList.length;
setTimeout("slideshow()",2000);
}

&lt;/script&gt;
&lt;a href="" id="alink" style="text-decoration:none"&gt;
&lt;img id="ss_image" src="" alt="" title="" height="296" width="401" /&gt;
&lt;div id="ss_caption" style="text-align:center;width:401px"&gt;&lt;/div&gt;
&lt;/a&gt;
&lt;br /&gt;
&lt;/body&gt;
&lt;/html&gt;

Note that the "alt=xxxxxxx" does not appear unless the image can not be accessed.


The "title=yyyyy" will show with the cursor hovering over the

image but is only temporary and changes when refreshed with addition hovering actions.

Good Luck! ?
Copy linkTweet thisAlerts:
@Rookie999authorMar 11.2012 — You have been a tone of help and I have been using the code. Next challenge.

How do I use this code on the same page twice? I just can't figure it out! I want to seperate rotators.

Thanks again.
Copy linkTweet thisAlerts:
@JMRKERMar 11.2012 — You have been a tone of help and I have been using the code. Next challenge.

How do I use this code on the same page twice? I just can't figure it out! I want to seperate rotators.

Thanks again.[/QUOTE]


Same images or a different set?

Same number of different images?

Will the images come from the same group or will there be non-overlapping groups?

Just a guess...
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Rotating Gallery&lt;/title&gt;
&lt;script type="text/javascript"&gt;
// For: http://www.webdeveloper.com/forum/showthread.php?t=257146

var imgPtr0 = 0;
var imgPtr1 = 0;
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgList0 = [
['11.jpg','http://www.webdeveloper.com','Webdeveloper','Alt.Descriptor 1'],
['12.jpg','http://www.codingforums.com','CodingForums','Alt.Descriptor 2'],
['13.jpg','http://dreamincode.net','Dream-In-Code','Alt.Descriptor 3'],
['14.jpg','http://www.mredkj.com/tutorials/htmljs.html','Tutorials','Alt.Descriptor 4'],
['15.jpg','http://scripterlative.com/?smartstars','Scripterlative','Alt.Descriptor 5']
];
var imgList1 = [
['21.jpg','http://www.webdeveloper.com','Webdeveloper','Alt.Descriptor 6'],
['22.jpg','http://www.codingforums.com','CodingForums','Alt.Descriptor 7'],
['23.jpg','http://dreamincode.net','Dream-In-Code','Alt.Descriptor 8'],
['24.jpg','http://www.mredkj.com/tutorials/htmljs.html','Tutorials','Alt.Descriptor 9'],
['25.jpg','http://scripterlative.com/?smartstars','Scripterlative','Alt.Descriptor 10']
];

function slideshow0(){
document.getElementById("ss_image0").src = baseURL + imgList0[imgPtr0][0];
document.getElementById('alink0').href = imgList0[imgPtr0][1];
document.getElementById('ss_caption0').innerHTML = imgList0[imgPtr0][2];
document.getElementById('ss_image0').alt = imgList0[imgPtr0][3];
document.getElementById('ss_image0').title = imgList0[imgPtr0][3];
imgPtr0 = (imgPtr0+1) &amp;#37; imgList0.length;
setTimeout("slideshow0()",2000);
}
function slideshow1(){
document.getElementById("ss_image1").src = baseURL + imgList1[imgPtr1][0];
document.getElementById('alink1').href = imgList1[imgPtr1][1];
document.getElementById('ss_caption1').innerHTML = imgList1[imgPtr1][2];
document.getElementById('ss_image1').alt = imgList1[imgPtr1][3];
document.getElementById('ss_image1').title = imgList1[imgPtr1][3];
imgPtr1 = (imgPtr1+1) % imgList1.length;
setTimeout("slideshow1()",2000);
}
function onload() { slideshow0(); slideshow1(); }

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div style="position:absolute;left:0px;"&gt;
&lt;a href="" id="alink0" style="text-decoration:none"&gt;
&lt;img id="ss_image0" src="" alt="" title="" height="296" width="401" /&gt;
&lt;div id="ss_caption0" style="text-align:center;width:401px"&gt;&lt;/div&gt;
&lt;/a&gt;
&lt;/div&gt;

&lt;div style="position:absolute;top:200px;left:450px;"&gt;
&lt;a href="" id="alink1" style="text-decoration:none"&gt;
&lt;img id="ss_image1" src="" alt="" title="" height="296" width="401" /&gt;
&lt;div id="ss_caption1" style="text-align:center;width:401px"&gt;&lt;/div&gt;
&lt;/a&gt;
&lt;/div&gt;

&lt;br /&gt;
&lt;/body&gt;
&lt;/html&gt;

If you are doing more that 2, I would take a different approach altogether.
×

Success!

Help @Rookie999 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...