クリック時に画像とalt属性を変更するにはどうすればよいですか？

通常のJavaScriptの代わりにJQueryを使用していくつかの画像onclickを変更し、同時に画像alt属性をアクセシビリティのために変更したいと考えています。クリック時に画像と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を回避する方法があります：ここでは

は（alt属性を変更せずに）私はJSでやっていた方法ですか？

編集：おかげでたくさんのaltCognitoが、私は、各画像に異なるalt属性を持つようにこのコードを使用する方法を理解していません。たぶん私はそれを探していたことを忘れていた（私の悪い）。

出典

2009-04-11 Mark

これで行こう。（私は当初、この駆け抜け）

<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'); 
});

See the example。

あなたがここでそれを編集することができます：http://jsbin.com/esebu/edit

出典

2009-04-11 00:53:59 cgp

は、あなたが実際にいけないという多くのコードの変更を必要とする...ここで

は一例です：

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>

出典

2011-08-25 13:22:50

これも私のページでこれを試してみましたが、それは全部正常に動作します。 –

クリック部分に問題があります。 'onclick =" javascript：changeImg（ 'image2'、 'images/nameofthesubfolder/image5.gif'） "'をクリックすると、 –

クリック時に画像とalt属性を変更するにはどうすればよいですか？

答えて

関連する問題