Как изменить изображение и атрибут alt при клике?

Я хочу изменить несколько изображений по клику, используя JQuery вместо обычного JavaScript, а также одновременно изменить атрибут изображения alt для доступности.

Это должно быть что-то простое, так как я не собираюсь оказывать какое-то особое влияние на изменения, но я до сих пор ничего не нашел об этом.

Вот как я делал с JS (без изменения атрибута alt):

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

И есть ли способ избежать повторения изображений/имя подпапки/?

Изменить: Большое спасибо, altCognito, но я не понимаю, как использовать этот код, чтобы иметь разные атрибуты alt для каждого изображения. Может быть, я забыл упомянуть, что я искал его (мой плохой).


image jquery accessibility onclick alt-attribute
person Mark    schedule 11.04.2009    source источник

Ответы (2)


arrow_upward
8
arrow_downward

Давайте с этим. (сначала поторопился)

<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' />

И затем jQuery:

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

см. пример.

Вы можете изменить его здесь: http://jsbin.com/esebu/edit.

person cgp    schedule 11.04.2009

arrow_upward
4
arrow_downward

На самом деле вам не нужно столько изменений кода.

Вот пример:

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

И вы можете сохранить свой HTML-код ..

 <label><input type="radio" name="radio_btn2" onclick="changeImg('image2', 'images/nameofthesubfolder/image5.gif')"/>Image 5</label>
person Berker Yüceer    schedule 25.08.2011
comment
если у вас есть какие-либо проблемы с частью клика. например, если он щелкнет не менее 2 раз, чтобы выполнить действие, просто создайте экземпляр с помощью: onclick="javascript:changeImg('image2', 'images/nameofthesubfolder/image5.gif')" - person Berker Yüceer; 11.11.2011