Comment changer l'attribut alt d'une image plusieurs fois avec jQuery?

Question

Cette question complète le premier que j'ai demandé here sur la façon de changer une image sur clic en utilisant jQuery.

J'ai oublié de dire (même si j'ai édité mon post plus tard) que je cherche un moyen d'avoir un attribut alt différent chaque fois qu'une image est modifiée par un clic.

(Ceci est pour une meilleure accessibilité et l'optimisation SEO.)

Voici le code HTML réel grâce à 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' /> 

Et le jquery:

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

Il peut être édité au jsbin.

Answer 1

Eh bien ... SEO et le contenu manipulé par Javascript ne devrait pas être dans le même post pour commencer. Quoi que vous fassiez, si vous utilisez Javascript pour afficher votre contenu, vous nuire à la visibilité de votre moteur de recherche. Cela dit, vous pouvez avoir ces images dans un hasharray (imagename-> alt) et obtenir l'alt à partir de là, ou vous pouvez mettre l'alt dans la valeur de la radio concaténée au nom de fichier avec un séparateur comme | puis analysez-les dans la fonction que vous utilisez pour afficher l'image.

... si bref soit:

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

... ou:

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

Answer 2

pourquoi ne pas mettre la valeur alt dans le rel de l'entrée puis placez que sur l'image aussi:

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

Answer 3

Je ne voudrais pas utiliser l'attribut name dans les boutons radio pour cela. Définir un attribut personnalisé: data-Img ou quelque chose comme ça. Cela vous aidera également à vous conformer à la prochaine norme html. Vous pourriez probablement faire cela en une ligne ... mais je ne vois pas vraiment le point. Rendez-le lisible en premier.

Answer 4

Vous pouvez essayer quelque chose comme ceci:

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

Answer 5

il suffit de copier-coller dans une nouvelle page ... vous avez 2 façons de le changer.

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