jQueryでイメージのalt属性を何度も変更するには？

この質問は、jQueryを使用してクリック時に画像を変更する方法についてhereに質問した最初のものです。jQueryでイメージのalt属性を何度も変更するには？

クリックして画像を変更するたびに別のalt属性を使用する方法を探していることを忘れました（後で投稿を編集した場合でも）。

（これは、より良いアクセシビリティとSEOの最適化のためである）

ここでは、実際のHTMLコードがaltCognitoのおかげである：

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

それができますjsbinで編集しました。

出典

2009-04-21 Mark

@Matt：通常、タイトルにタグを繰り返す必要はありません。 –

まあ... SEOとJavascriptで操作されるコンテンツは、同じ投稿で始めるべきではありません。 Javascriptを使用してコンテンツを表示すると、検索エンジンの可視性が損なわれます。

これは、画像をハヤアレイ（imagename-> alt）に入れてそこからaltを取得するか、altの値をファイル名に連結したラジオの値に|イメージを表示するために使用する関数でそれらを解析します。

...短いのいずれかでそう：

<img id="radio_btn1" src="originalimage1.jpg" /> 
<br /> 
    <input type="radio" name="radio_btn1" value='image1.jpg|Image 1' /> 
    <input type="radio" name="radio_btn1" value='image2.gif|Image 2' /> 
    <input type="radio" name="radio_btn1" value='image3.png|Image 3' /> 
    <input type="radio" name="radio_btn1" value='image4.jpeg|Image 4' />

imgFldr = 'images/nameofthesubfolder/'; 
$("input[type='radio']").click(function() { 
    var strarr = this.value.split('|'); 
    if(strarr.length < 2) return; 
    $('#'+this.name).attr('src', imgFldr+strarr[0]).attr('alt', strarr[1]); 
});

...または：

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

imgFldr = 'images/nameofthesubfolder/'; 
var imagesarr = {'image1.jpg': 'Image 1', 'image2.gif': 'Image 2','image3.png': 'Image 3','image4.jpeg': 'Image 4'} 
$("input[type='radio']").click(function() { 
    $('#'+this.name).attr('src', imgFldr+this.value).attr('alt', imagesarr[this.value]); 
});

出典

2009-04-21 16:56:44

「オブジェクトのソリューションイメージを格納する」ソリューションに私を打ち負かしました。 –

2番目の選択肢では、「画像4」の後に（カンマではなく）いくつかの中かっこ}を閉じるのを忘れていました。私は最初のバージョンを選んだ、とにかくおかげで;-) – Mark

ページをリフレッシュした後、またはウェブブラウザーでページに戻ったときにイメージの変更を維持する方法はありますか？このコードでは現在のところできませんので、ページをリフレッシュするか、ページに戻ると、ラジオボタンは選択されていますが、イメージは変更されません。 – Mark

はなぜ、あまりにも画像上にそれを置く入力の相対でALT値を入れていない：私は、このためのラジオボタンでname属性を使用していないだろう

<img id="radio_btn1" src="originalimage1.jpg" /> 
<br /> 
    <input type="radio" name="radio_btn1" value='image1.jpg' rel="alt text 1" /> 
    <input type="radio" name="radio_btn1" value='image2.gif' rel="alt text 1" /> 
    <input type="radio" name="radio_btn1" value='image3.png' rel="alt text 1" /> 
    <input type="radio" name="radio_btn1" value='image4.jpeg' rel="alt text 1" /> 
And the jquery: 

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

出典

2009-04-21 17:00:57 Richard

。カスタム属性：data-Imgなどを定義します。それはまた、次のhtml標準に準拠するのに役立ちます。

var imgFldr = 'images/nameofthesubfolder/'; 

$("input[type='radio']").click(function() { 

    var img = '#'+ $(this).attr('data-Img'); 

    var url = imgFldr + $(this).attr('value'); 

    $(img).attr('src', url) 
      .attr('alt', 'newattribute'); 

});

これはおそらく1行で行うことができますが、実際にはその点は表示されません。最初に読みやすいようにします。

出典

2009-04-21 17:01:45

あなたはこのような何かを試みることができる：

<img id="radio_btn1" src="originalimage1.jpg" /> 
<br /> 
<input type="radio" name="radio_btn1" value='image1' /> 
<input type="radio" name="radio_btn1" value='image2' /> 
<input type="radio" name="radio_btn1" value='image3' /> 
<input type="radio" name="radio_btn1" value='image4' /> 

imgFldr = 'images/nameofthesubfolder/'; 
var images = { 
image1: {'img': 'image1.jpg', 'alt': 'Alt for img1'}, 
image2: {'img': 'image2.gif', 'alt': 'Alt for img2'}, 
image3: {'img': 'image3.png', 'alt': 'Alt for img3'}, 
image4: {'img': 'image4.jpeg', 'alt': 'Alt for img4'}  
} 
$("input[type='radio']").click(function() { 
var imgObject = images[this.value]; 
$('#'+this.name).attr('src', imgFldr+imgObject['img']).attr('alt', imgObject['alt']); 
});

出典

2009-04-21 17:03:08

はちょうど新しいページにコピー＆ペースト...あなたはそれを変更するには2つの方法があります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Sandbox</title> <style type="text/css" media="screen"> body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> imgFldr = 'http://www.kde-look.org/CONTENT/content-m1/'; $(document).ready(function(){ $("input[type='radio']").each(function(index) { var $radio = this; var alt = ''; switch (index + 1) { case 1: alt = 'alt 1'; break; case 2: alt = 'alt 2'; break; case 3: alt = 'alt 3'; break; case 4: alt = 'alt 4'; break; } console.log('img ' + (index+1) + ': ' + $radio.value + ' with alt: ' + alt); $(this).click(function() { // 1st way: using mynewalt attribute of the radio button (you can delete the switch case if you choose to use this) $('#myImage').attr('src', imgFldr+$radio.value).attr('alt', $(this).attr('mynewalt')); //2nd way: using the switch $('#myImage').attr('src', imgFldr+$radio.value).attr('alt', alt); }); }); }); </script> </head> <body> <img id="myImage" src="http://www.kde-look.org/CONTENT/content-m1/m100860-1.png" /> <br /> <input type="radio" name="radio_btn1" value='m102389-1.png' mynewalt='new alt 1' /> <input type="radio" name="radio_btn1" value='m100856-1.png' mynewalt='new alt 2' /> <input type="radio" name="radio_btn1" value='m100857-1.png' mynewalt='new alt 3' /> <input type="radio" name="radio_btn1" value='image4.jpeg' mynewalt='new alt 4' /> </body> </html>

出典

2009-04-21 17:12:19 balexandre

jQueryでイメージのalt属性を何度も変更するには？

答えて

関連する問題