Как изменить изображение и атрибут 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>

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

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

Источник

2 ответа

Решение

Пойдем с этим. (Я бросился через это вначале)

<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

Источник

Вам на самом деле не нужно так много изменений кода..

Вот пример:

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>
Источник
Другие вопросы по тегам