Come modificare l'immagine e l'attributo alt al clic?

Sto cercando di modificare più immagini onclick utilizzando JQuery anziché il normale JavaScript e anche modificare l'attributo alt dell'immagine allo stesso tempo per l'accessibilità.Come modificare l'immagine e l'attributo alt al clic?

Dovrebbe essere qualcosa di semplice in quanto non sto cercando di fare un effetto speciale sul cambiamento ma non ho ancora trovato nulla a riguardo.

Ecco il modo in cui stavo facendo con JS (senza modificare l'attributo 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>

E c'è un modo per evitare di ripetere immagini/nameofthesubfolder /?

Edit: Grazie altCognito molto ma non capisco come utilizzare questo codice per avere un alt diverso attributo per ogni immagine. Forse ho dimenticato di dire che lo stavo cercando (il mio male).

fonte

2009-04-11 Mark

Andiamo con questo. (Mi sono precipitato attraverso questo inizialmente)

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

E poi il jQuery:

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

See the example.

È possibile modificarlo qui: http://jsbin.com/esebu/edit

fonte

2009-04-11 00:53:59 cgp

Non avete davvero bisogno che il cambiamento del codice tanto ..

Ecco un esempio:

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

E si può tenere ur codice html ..

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

fonte

2011-08-25 13:22:50

ho anche provato questo sulla mia pagina funziona perfettamente .. –

i hai qualche problema sulla parte clic. come se il click su si interrompesse 2 volte per fare l'azione, basta istanziarlo usando: 'onclick =" javascript: changeImg ('image2', 'images/nameofthesubfolder/image5.gif') "' –

Come modificare l'immagine e l'attributo alt al clic?

risposta

Problemi correlati