2

この質問は、 jQuery を使用してクリック時に画像を変更する方法についてここで尋ねた最初の質問を完了します。

後で投稿を編集したとしても、クリックして画像が変更されるたびに異なる alt 属性を持つ方法を探していることを忘れていました。

(これは、アクセシビリティの向上と SEO の最適化のためです。)

altCognito による実際の html コードは次のとおりです。

<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で編集できます。

4

5 に答える 5

6

ええと... 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-21T16:56:44.913 に答える
1

入力のrelにalt値を入れてから、それを画像にも配置してみませんか：

<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-21T17:00:57.633 に答える
1

nameこれには、ラジオ ボタンの属性を使用しません。カスタム属性を定義します: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-21T17:01:45.137 に答える
0

コピーして新しいページに貼り付けるだけです...変更するには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-21T17:12:19.620 に答える
0

次のようなことを試すことができます：

<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-21T17:03:08.283 に答える