title: How to change image and alt attribute on click?
body: <p>I'm looking to change several images onclick using JQuery instead of normal JavaScript and also change the image alt attribute at the same time for accessibility.</p>
  
  <p>It should be something easy as I'm not looking to do some special effect on change but I still haven't find anything about it.</p>
  
  <p>Here is the way I was doing with JS (without change the alt attribute):</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
   &lt;title&gt;Change Image using Javascript&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
     function changeImg(image_id, image_folder){
     document.getElementById(image_id).src = image_folder;
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div align="center"&gt;
  
  &lt;img id="image1" src="images/nameofthesubfolder/originalimage1.jpg" alt="Original Image 1" /&gt;
  &lt;br /&gt;
    &lt;label&gt;&lt;input type="radio" name="radio_btn1" onclick="changeImg('image1', 'images/nameofthesubfolder/image1.jpg')"/&gt;Image 1&lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" name="radio_btn1" onclick="changeImg('image1', 'images/nameofthesubfolder/image2.gif');"/&gt;Image 2&lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" name="radio_btn1" onclick="changeImg('image1', 'images/nameofthesubfolder/image3.png');"/&gt;Image 3&lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" name="radio_btn1" onclick="changeImg('image1', 'images/nameofthesubfolder/image4.jpeg');"/&gt;Image 4&lt;/label&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;img id="image2" src="images/nameofthesubfolder/originalimage2.jpg" alt="Original Image 2" /&gt;
  &lt;br /&gt;
    &lt;label&gt;&lt;input type="radio" name="radio_btn2" onclick="changeImg('image2', 'images/nameofthesubfolder/image5.gif')"/&gt;Image 5&lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" name="radio_btn2" onclick="changeImg('image2', 'images/nameofthesubfolder/image6.png);"/&gt;Image 6&lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" name="radio_btn2" onclick="changeImg('image2', 'images/nameofthesubfolder/image7.jpeg');"/&gt;Image 7&lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" name="radio_btn2" onclick="changeImg('image2', 'images/nameofthesubfolder/image8.gif');"/&gt;Image 8&lt;/label&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And is there a way to avoid repeating images/nameofthesubfolder/ ?</p>
  
  <p><em>Edit:</em> Thanks a lot altCognito but I don't understand how to use this code to have a different alt attribute <strong>for each image</strong>. Maybe I forgot to mention that I was looking for it (my bad).</p>