How to change image and alt attribute on click?

2020-07-14 05:24发布

站内问答 / jQuery
1773 2 5

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.

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.

Here is the way I was doing with JS (without change the alt attribute):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Change Image using Javascript</title>
<script type="text/javascript">
   function changeImg(image_id, image_folder){
   document.getElementById(image_id).src = image_folder;
}
</script>
</head>
<body>
<div align="center">

<img id="image1" src="images/nameofthesubfolder/originalimage1.jpg" alt="Original Image 1" />
<br />
  <label><input type="radio" name="radio_btn1" onclick="changeImg('image1', 'images/nameofthesubfolder/image1.jpg')"/>Image 1</label>
  <label><input type="radio" name="radio_btn1" onclick="changeImg('image1', 'images/nameofthesubfolder/image2.gif');"/>Image 2</label>
  <label><input type="radio" name="radio_btn1" onclick="changeImg('image1', 'images/nameofthesubfolder/image3.png');"/>Image 3</label>
  <label><input type="radio" name="radio_btn1" onclick="changeImg('image1', 'images/nameofthesubfolder/image4.jpeg');"/>Image 4</label>
<br />
<br />
<img id="image2" src="images/nameofthesubfolder/originalimage2.jpg" alt="Original Image 2" />
<br />
  <label><input type="radio" name="radio_btn2" onclick="changeImg('image2', 'images/nameofthesubfolder/image5.gif')"/>Image 5</label>
  <label><input type="radio" name="radio_btn2" onclick="changeImg('image2', 'images/nameofthesubfolder/image6.png);"/>Image 6</label>
  <label><input type="radio" name="radio_btn2" onclick="changeImg('image2', 'images/nameofthesubfolder/image7.jpeg');"/>Image 7</label>
  <label><input type="radio" name="radio_btn2" onclick="changeImg('image2', 'images/nameofthesubfolder/image8.gif');"/>Image 8</label>
</div>
</body>
</html>

And is there a way to avoid repeating images/nameofthesubfolder/ ?

Edit: Thanks a lot altCognito but I don't understand how to use this code to have a different alt attribute for each image. Maybe I forgot to mention that I was looking for it (my bad).

2条回答
傲
2楼-- · 2020-07-14 05:46

Let's go with this. (I rushed through this initially)

<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 then the jQuery:

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

See the example.

You can edit it here: http://jsbin.com/esebu/edit

查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
3楼-- · 2020-07-14 05:59

You dont actually need that much code change..

Here is an example: 

function changeImg(image_id, image_folder) {
    $("#" + image_id).attr({ 'src': image_folder, 'alt': image_folder });
}

And you can keep ur html code..

 <label><input type="radio" name="radio_btn2" onclick="changeImg('image2', 'images/nameofthesubfolder/image5.gif')"/>Image 5</label>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)