How to change alt attribute of an image several times with jQuery?

Question

This question completes the first one that I asked here about how to change an image on click using jQuery.

I forgot to say (even if I edited my post later) that I'm looking for a way to have a different alt attribute each time an image is changed by click.

(This is for better accessibility and SEO optimization.)

Here is the actual html code thanks to altCognito:

<img id="radio_btn1" src="originalimage1.jpg" />
<br />
  <input type="radio" name="radio_btn1" value='image1.jpg' />
  <input type="radio" name="radio_btn1" value='image2.gif' />
  <input type="radio" name="radio_btn1" value='image3.png' />
  <input type="radio" name="radio_btn1" value='image4.jpeg' />

And the jquery:

imgFldr = 'images/nameofthesubfolder/';
$("input[type='radio']").click(function() {
   $('#'+this.name).attr('src', imgFldr+this.value).attr('alt', 'newattribute');
});

It can be edited at jsbin.

Answer 1

Well... SEO and content manipulated by Javascript shouldn't be in the same post to begin with. Whatever you do, if you use Javascript to display your content, you're hurting your search engine visibility.

That said, you could either have those images in a hasharray (imagename->alt) and get the alt from there, or you could put the alt in the value of the radio concatenated to the filename with a separator like | and then parse them out in the function you use to display the image.

...so in short either:

<img id="radio_btn1" src="originalimage1.jpg" />
<br />
  <input type="radio" name="radio_btn1" value='image1.jpg|Image 1' />
  <input type="radio" name="radio_btn1" value='image2.gif|Image 2' />
  <input type="radio" name="radio_btn1" value='image3.png|Image 3' />
  <input type="radio" name="radio_btn1" value='image4.jpeg|Image 4' />

+

imgFldr = 'images/nameofthesubfolder/';
$("input[type='radio']").click(function() {
   var strarr = this.value.split('|');
   if(strarr.length < 2) return;
   $('#'+this.name).attr('src', imgFldr+strarr[0]).attr('alt', strarr[1]);
});

...or:

<img id="radio_btn1" src="originalimage1.jpg" />
<br />
<input type="radio" name="radio_btn1" value='image1.jpg' />
<input type="radio" name="radio_btn1" value='image2.gif' />
<input type="radio" name="radio_btn1" value='image3.png' />
<input type="radio" name="radio_btn1" value='image4.jpeg' />

+

imgFldr = 'images/nameofthesubfolder/';
var imagesarr = {'image1.jpg': 'Image 1', 'image2.gif': 'Image 2','image3.png': 'Image 3','image4.jpeg': 'Image 4'}
$("input[type='radio']").click(function() {
   $('#'+this.name).attr('src', imgFldr+this.value).attr('alt', imagesarr[this.value]);
});

Answer 2

why not put the alt value in the rel of the input then place that on the image too:

<img id="radio_btn1" src="originalimage1.jpg" />
<br />
  <input type="radio" name="radio_btn1" value='image1.jpg' rel="alt text 1" />
  <input type="radio" name="radio_btn1" value='image2.gif' rel="alt text 1" />
  <input type="radio" name="radio_btn1" value='image3.png'  rel="alt text 1" />
  <input type="radio" name="radio_btn1" value='image4.jpeg' rel="alt text 1" />
And the jquery:

imgFldr = 'images/nameofthesubfolder/';
$("input[type='radio']").click(function() {
   $("#radio_btn1").attr("src", imgFldr + $(this).val()).attr("alt", $(this).attr("rel"));
});

Answer 3

1. I would not use the 'name' attribute in the radio buttons for this. Define a custom attribute: data-Img or something like that. That would also help you conform to the next html standard.

   var imgFldr = 'images/nameofthesubfolder/';

   $("input[type='radio']").click(function() {

   var img = '#'+ $(this).attr('data-Img');

   var url = imgFldr + $(this).attr('value');

   $(img).attr('src', url) .attr('alt', 'newattribute');

   });

You could probably do this in one line...but I don't see the point really. Make it readable first.

Answer 4

You could try something like this:

<img id="radio_btn1" src="originalimage1.jpg" />
<br />
<input type="radio" name="radio_btn1" value='image1' />
<input type="radio" name="radio_btn1" value='image2' />
<input type="radio" name="radio_btn1" value='image3' />
<input type="radio" name="radio_btn1" value='image4' />

imgFldr = 'images/nameofthesubfolder/';
var images = {
 image1: {'img': 'image1.jpg', 'alt': 'Alt for img1'},
 image2: {'img': 'image2.gif', 'alt': 'Alt for img2'},
 image3: {'img': 'image3.png', 'alt': 'Alt for img3'},
 image4: {'img': 'image4.jpeg', 'alt': 'Alt for img4'}     
}
$("input[type='radio']").click(function() {
 var imgObject = images[this.value];
 $('#'+this.name).attr('src', imgFldr+imgObject['img']).attr('alt', imgObject['alt']);
});

Answer 5

just copy paste into a new page... you have 2 ways to change it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<title>Sandbox</title> 

<style type="text/css" media="screen"> 
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; } 
</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt; 

<script type="text/javascript"> 

imgFldr = 'http://www.kde-look.org/CONTENT/content-m1/'; 

$(document).ready(function(){

   $("input[type='radio']").each( function(index) {
    var $radio = this;
    var alt = '';

    switch (index + 1) {
     case 1: alt = 'alt 1'; break;
     case 2: alt = 'alt 2'; break;
     case 3: alt = 'alt 3'; break;
     case 4: alt = 'alt 4'; break;
    }
    console.log('img ' + (index+1) + ': ' + $radio.value + ' with alt: ' + alt);

    $(this).click(function() { 
    // 1st way: using mynewalt attribute of the radio button (you can delete the switch case if you choose to use this)
       $('#myImage').attr('src', imgFldr+$radio.value).attr('alt', $(this).attr('mynewalt'));
    //2nd way: using the switch
       $('#myImage').attr('src', imgFldr+$radio.value).attr('alt', alt);
    });
   }); 

}); 


</script> 


</head> 
<body> 
<img id="myImage" src="http://www.kde-look.org/CONTENT/content-m1/m100860-1.png" /> 
<br /> 
  <input type="radio" name="radio_btn1" value='m102389-1.png' mynewalt='new alt 1' /> 
  <input type="radio" name="radio_btn1" value='m100856-1.png' mynewalt='new alt 2' /> 
  <input type="radio" name="radio_btn1" value='m100857-1.png' mynewalt='new alt 3' /> 
  <input type="radio" name="radio_btn1" value='image4.jpeg' mynewalt='new alt 4' /> 

</body> 
</html>