Как изменить изображение и атрибут alt при клике? - PullRequest
Новая
       45

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

5 голосов
/ 11 апреля 2009

Я хочу изменить несколько изображений по клику, используя 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 ]

8 голосов
/ 11 апреля 2009

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

<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

4 голосов
/ 25 августа 2011

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

Вот пример: 

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