ALT tag meets JavaScript code.

seroxatmad · #1 (**permalink**) 09-25-06, 05:25 AM

Hi

I have a script to show a picture description when the mouse on over an image. Can the info in this array be insert into an ALT tag?

Quote:

var blurb = new Array(17); // = number of different options
blurb[1] = "Picture Description for Pic1";
blurb[2] = "Picture Description for Pic2";
blurb[3] = "Picture Description for Pic3";
blurb[4] = "Picture Description for Pic4";
blurb[5] = "Picture Description for Pic5";
blurb[6] = "Picture Description for Pic6";

function seeBlurb(option) {
document.getElementById('blurbDiv').innerHTML = blurb[option];
}
</script>

Regards

John

GO4TF4CE · #2 (**permalink**) 09-25-06, 05:52 AM

just refer to the item as

document.getElementById('myimage1').alt='your text here';

or you could refer to the image like this

document.getElementById('myimage' + option).alt = blurb[option];

in future post this type of stuff in the javascript section you will probably get a faster response

seroxatmad · #3 (**permalink**) 09-25-06, 08:00 AM

Hi

Thanks for the reply

Quote:

<td><a href="pic2.png" rel="lightbox" title="Optional Text..."><img src="pic2_sml.png" alt="pic2" name="2" width="190" height="96" id="2" style="cursor

ointer" onmouseover="seeBlurb(2);" /></td>

Can i just add the code you suggest in place of the alt tag in the script above.

A test link is www.thestottfamily.co.uk/template/index.php

Regards

John

GO4TF4CE · #4 (**permalink**) 09-25-06, 08:11 AM

Code:

<html>
<head>
<script>
var blurb = new Array(17); // = number of different options
blurb[1] = "Picture Description for Pic1";
blurb[2] = "Picture Description for Pic2";
blurb[3] = "Picture Description for Pic3";
blurb[4] = "Picture Description for Pic4";
blurb[5] = "Picture Description for Pic5";
blurb[6] = "Picture Description for Pic6";

function seeBlurb(option) {
document.getElementById('blurbDiv').innerHTML = blurb[option];
} 

function loadalt() { 

var i=0;
for(i=0;i<6;i++){
document.getElementById(i).alt = blurb[i];
}

}
</script>
</head
<body onload="loadalt()">
</body>
</html>

This should work fine. Just put your images onto the page.

Nico · #5 (**permalink**) 09-25-06, 08:16 AM

Moved to Javascript.

seroxatmad · #6 (**permalink**) 09-25-06, 08:16 AM

Hi

I have a piece of code that when the mouse is over an image it displays a description of the image.

It would be nice if this description was placed in the images ALT tag.

Code:

 var blurb = new Array(17); // = number of different options 
      blurb[1] = "Picture Description for Pic1"; 
      blurb[2] = "Picture Description for Pic2"; 
      blurb[3] = "Picture Description for Pic3"; 
	  blurb[4] = "Picture Description for Pic4"; 
      blurb[5] = "Picture Description for Pic5"; 
      blurb[6] = "Picture Description for Pic6"; 
	  blurb[7] = "Picture Description for Pic7"; 
      blurb[8] = "Picture Description for Pic8"; 
      blurb[9] = "Picture Description for Pic9"; 
	  blurb[10] = "Picture Description for Pic10";
	  blurb[11] = "Picture Description for Pic11";
	  blurb[12] = "Picture Description for Pic12"; 
	  blurb[13] = "Picture Description for Pic13"; 
	  blurb[14] = "Picture Description for Pic14"; 
	  blurb[15] = "Picture Description for Pic15"; 
	  blurb[16] = "Picture Description for Pic16"; 
	  blurb[17] = "Picture Description for Pic17"; 
      function seeBlurb(option) { 
      document.getElementById('blurbDiv').innerHTML = blurb[option]; 
      }

This is placed in the area i want the description

Quote:

The images are displayed like this, this is were i have the ALT tag:

Code:

<td><a href="pic3.png" rel="lightbox" title="Optional Text..."><img src="pic3_sml.png" alt="pic3" name="3" width="190" height="96" id="3" style="cursor:pointer" onmouseover="seeBlurb(3);" /></td>

So i want the alt=pic3 replacing with the text already in
blurb[3] = "Picture Description for Pic3"; as an example.

Any ideas?

Regards

John

Nico · #7 (**permalink**) 09-25-06, 08:30 AM

Threads merged. Please do not cross post.

GO4TF4CE · #8 (**permalink**) 09-25-06, 08:44 AM

in that case just change

Code:

function seeBlurb(option) { 
      document.getElementById('blurbDiv').innerHTML = blurb[option]; 
}

to

Code:

function seeBlurb(option) { 
      document.getElementById('blurbDiv').innerHTML = blurb[option]; 
      document.getElementById(option).alt= blurb[option]; 
}

Nico · #9 (**permalink**) 09-25-06, 09:09 AM

Note that the "alt" attribute won't show up on Firefox. I'd rather set the "title" attribute which works on all browsers.

seroxatmad · #10 (**permalink**) 09-25-06, 09:22 AM

Hi

Thanks...one extra line of code and it works fine.

I think a book on the subject will be bought soon.

John

P.S I use Firefox and it shows the ALT working when i right click and select properties. I will try title also. Thanks again.

Added both ALt and TITLE - works fine. www.thestottfamily.co.uk/template/index.php