Làm cách nào để thay đổi thuộc tính hình ảnh và alt khi nhấp?

Tôi đang tìm cách thay đổi một vài hình ảnh bằng cách sử dụng JQuery thay vì JavaScript bình thường và cũng thay đổi thuộc tính alt của hình ảnh cùng một lúc cho khả năng truy cập.Làm cách nào để thay đổi thuộc tính hình ảnh và alt khi nhấp?

Nó phải là một cái gì đó dễ dàng như tôi không tìm cách để làm một số hiệu ứng đặc biệt về sự thay đổi nhưng tôi vẫn không tìm thấy bất cứ điều gì về nó.

Dưới đây là cách tôi đã làm với JS (không thay đổi thuộc tính 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>

Và đó là một cách để tránh lặp lại images/nameofthesubfolder /?

Chỉnh sửa: Cảm ơn rất nhiều altCognito nhưng tôi không hiểu cách sử dụng mã này để có thuộc tính alt khác cho mỗi hình ảnh. Có lẽ tôi quên đề cập đến rằng tôi đang tìm kiếm nó (xấu của tôi).

Nguồn

2009-04-11 Mark

Hãy thực hiện điều này. (Tôi vội vã thông qua này ban đầu)

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

Và sau đó jQuery:

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

See the example.

Bạn có thể chỉnh sửa nó ở đây: http://jsbin.com/esebu/edit

Nguồn

2009-04-11 00:53:59 cgp

Bạn không thực sự cần điều đó thay đổi mã nhiều ..

Dưới đây là một ví dụ:

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

Và bạn có thể giữ mã html ur ..

<label><input type="radio" name="radio_btn2" onclick="changeImg('image2', 'images/nameofthesubfolder/image5.gif')"/>Image 5</label>

Nguồn

2011-08-25 13:22:50

tôi cũng đã thử điều này trên trang của mình hoạt động tốt .. –

i f u có bất kỳ vấn đề về phần nhấp chuột. giống như khi nhấp vào leats 2 lần để thực hiện hành động, hãy thực hiện ngay lập tức bằng cách sử dụng: 'onclick =" javascript: changeImg ('image2', 'images/nameofthesubfolder/image5.gif') "' –

Làm cách nào để thay đổi thuộc tính hình ảnh và alt khi nhấp?

Trả lời

Các vấn đề liên quan