Adding ALT tag to Images in JavaScript

[chefbrian]

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. Any ideas?

Thanx!

[Twey]

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 [code][/code] tags, please) I'll have a look.

"Butterfly marshmallow supreme!"

[chefbrian]

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]

<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 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]

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]

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]

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]

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

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

Mike

[Twey]

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?