PDA

View Full Version : Adding ALT tag to Images in JavaScript



chefbrian
05-03-2006, 05:40 PM
Okay, I'm having problems with this. I have a bunch of images on my site inside a JavaScript slide show function. It look like this:

// to add more images, just continue the pattern, adding to the array below:

Pic[0] = 'gifs & jpegs/image 6.jpg'
Pic[1] = 'gifs & jpegs/image 3.jpg'
Pic[2] = 'gifs & jpegs/image 5.jpg'

Is it possible to add the ALT attribute to these images so people can see what they are when they mouseover?

I've been monkeying around with this and aren't getting to far. :mad: Any ideas?

Thanx!

Twey
05-03-2006, 06:18 PM
You can't add anything there, but you should be able to modify it to do so somewhere later on in the code. If you paste the rest of the code here (between
tags, please) I'll have a look.

"Butterfly marshmallow supreme!" :)

chefbrian
05-03-2006, 06:39 PM
Why, thank you very much, Twey! Simple script I got off from CodeLifter.com.




<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'gifs & jpegs/image 6.jpg'
Pic[1] = 'gifs & jpegs/Diamond Trip 3.jpg'
Pic[2] = 'gifs & jpegs/image 5.jpg'
Pic[3] = 'gifs & jpegs/image 3.jpg'
Pic[4] = 'gifs & jpegs/Oct2006.jpg'
Pic[5] = 'gifs & jpegs/image 8.jpg'
Pic[6] = 'gifs & jpegs/image 4.jpg'




// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>



Again, thank you for your time.

Twey
05-03-2006, 07:09 PM
<script type="text/javascript">
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;

// Duration of crossfade (seconds)
var crossFadeDuration = 3;

// Specify the image files
var Pic = new Array(), Alt = new Array(); // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'gifs & jpegs/image 6.jpg';
Pic[1] = 'gifs & jpegs/Diamond Trip 3.jpg';
Pic[2] = 'gifs & jpegs/image 5.jpg';
Pic[3] = 'gifs & jpegs/image 3.jpg';
Pic[4] = 'gifs & jpegs/Oct2006.jpg';
Pic[5] = 'gifs & jpegs/image 8.jpg';
Pic[6] = 'gifs & jpegs/image 4.jpg';

Alt[0] = 'the number six';
Alt[1] = 'a pretty diamond';
// ... and so on...


// =======================================
// do not edit anything below this line
// =======================================

var t,
j = 0,
p = Pic.length;

var preLoad = new Array()
for (i = 0; i < p; i++) (preLoad[i] = new Image()).src = Pic[i];

function runSlideShow(){
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
document.images.SlideShow.alt = (Alt[j] || "");
if (document.all) document.images.SlideShow.filters.blendTrans.Play();
j++;
if (j > (p-1)) j=0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>However, two things to note:
1) Alts are a bit pointless here, since a browser is far less likely to have Javascript than image support (although I do have one); if you want the mouse-over tooltip effect, you should use title instead.
2) That script is quite badly-written. If I may, I would suggest this modification (http://www.twey.co.uk/files/slide.html) of a DD script instead; it supports IE and standards-compliant browsers and alt and title attributes already (set the slide descriptions). The controls, if you do not want them, can be hidden by wrapping them in a <div style="display:none;">.

chefbrian
05-03-2006, 07:19 PM
Thanks for your prompt reply and suggestions, Twey. I really appreciate that. Thank you.

Brian

OBTW, the reason I wanted to use the ALT attribute. I ws reading search engines give a bit more consideration to pages that have the images optimized. That's why I was asking!

T-B0N3
05-04-2006, 06:59 AM
But as I recall spiders don't go into Java/JavaScript. So putting ALT for a HTML code will do good, but in terms of Java I belive it's just hassle for nothing.

djr33
05-04-2006, 07:26 AM
I wouldn't be surprised if google did do some scripts... but wouldn't be surprised if they (or certainly most spiders) don't. Good point.

mwinter
05-04-2006, 10:25 AM
Alts are a bit pointless here, since a browser is far less likely to have Javascript than image support [...]In terms of browsers, yes, that's probably true. However, it would be quite reasonable for a dial-up user to disable images but not client-side scripting.


But as I recall spiders don't go into Java/JavaScript.Java? Certainly not. Client-side scripts? There are rumours (that are quite old, now) that a new Googlebot does have limited script support, but I don't know whether there's any truth to them (I don't really care enough to find out :D).

By the way, don't group Java and JavaScript together. As Twey's signature makes very clear, they are not the same.

Mike

Twey
05-04-2006, 02:19 PM
In terms of browsers, yes, that's probably true. However, it would be quite reasonable for a dial-up user to disable images but not client-side scripting.Ah, yes, I forgot about that.
OBTW, the reason I wanted to use the ALT attribute. I ws reading search engines give a bit more consideration to pages that have the images optimized. That's why I was asking!Uhm...
Is it possible to add the ALT attribute to these images so people can see what they are when they mouseover?