Wie Bild und Alt-Attribut bei Klick ändern?

Ich bin auf der Suche nach mehreren Bildern onclick mit JQuery anstelle von normalem JavaScript ändern und auch das Image alt-Attribut zur gleichen Zeit für die Zugänglichkeit.Wie Bild und Alt-Attribut bei Klick ändern?

Es sollte etwas Einfaches sein, da ich nicht auf einen speziellen Effekt auf Änderungen achten will, aber ich habe immer noch nichts darüber gefunden.

Hier ist die Art, wie ich mit JS tun (ohne das alt-Attribut ändern):

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

Und ist es eine Möglichkeit, sich wiederholende Bilder/nameofthesubfolder zu vermeiden /?

Edit: Vielen Dank altCognito aber ich verstehe nicht, wie Sie diesen Code verwenden, um eine andere alt haben Attribut für jedes Bild. Vielleicht habe ich vergessen zu erwähnen, dass ich danach suchte (mein Schlechter).

Quelle

2009-04-11 Mark

Lassen Sie uns damit gehen. (I durch diese stürzte zunächst)

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

Und dann die jQuery:

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

See the example.

Sie können es hier bearbeiten: http://jsbin.com/esebu/edit

Quelle

2009-04-11 00:53:59 cgp

Sie eigentlich, dass viel Code Änderung nicht brauchen ..

Hier ist ein Beispiel:

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

Und Sie können ur HTML-Code halten ..

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

Quelle

2011-08-25 13:22:50

ich habe es auch auf meiner Seite versucht es funktioniert total gut .. –

ich Sie haben ein Problem mit dem Klick-Teil. Wenn du zum Beispiel 2 mal klickst, um es zu tun, instanziiere es einfach mit: 'onclick =" javascript: changeImg ('image2', 'images/nameofthesubfolder/image5.gif') "' –

Wie Bild und Alt-Attribut bei Klick ändern?

Antwort

Verwandte Themen