Javascript proprietà immagine

Sono stato versando oltre il mio codice più e più volte e non riesco proprio a capire perché non funziona correttamente ...Javascript proprietà immagine

Qualcuno può illuminarmi? Qual è il problema qui? Io proprio non lo vedo.

Il codice dovrebbe consentire all'utente di inserire vari valori in caselle di testo per modificare alcune delle caratteristiche dell'immagine come dimensione del bordo, colore, larghezza, altezza, testo alt dell'immagine e titolo dell'immagine.

Questo è il mio codice:

<html> 
<head> 
<title>Image Properties</title> 
<script type="text.javascript"> 
function changeImage() { 
    //applies a new border size 
    document.getElementById('img').border = document.getElementById('bs').value; 
    //applies a new border color 
    document.getElementById('img').style.borderColor = document.getElementById('bc').value; 
    //applies a new width 
    document.getElementById('img').width = document.getElementById('bw').value; 
    //applies a new height 
    document.getElementById('img').height = document.getElementById('bh').value; 
    //applies a new alt tag 
    document.getElementById('img').alt = document.getElementById('ba').value; 
    //applies a new title 
    document.getElementById('img').title = document.getElementById('bt').value; 
} 
</script> 
</head> 
<body> 
<h2>Change Image Properties</h2> 
<img src="KotakuLogo.jpg" id="img" /> 
<p> 
Border Size:<input type="text" id="bs" 
onfocus="this.style.background='#c3c3c3'" 
onblur="this.style.background='#FFFFFF'"/><br /> 
New Border Color:<input type="text" id="bc" 
onfocus="this.style.background='#c3c3c3'" 
onblur="this.style.background='#FFFFFF'"/><br /> 
New Border Width:<input type="text" id="bw" 
onfocus="this.style.background='#c3c3c3'" 
onblur="this.style.background='#FFFFFF'"/><br /> 
New Border Height:<input type="text" id="bh" 
onfocus="this.style.background='#c3c3c3'" 
onblur="this.style.background='#FFFFFF'"/><br /> 
New Border Alt Tag:<input type="text" id="ba" 
onfocus="this.style.background='#c3c3c3'" 
onblur="this.style.background='#FFFFFF'"/><br /> 
New Border Title:<input type="text" id="bt" 
onfocus="this.style.background='#c3c3c3'" 
onblur="this.style.background='#FFFFFF'"/><br /> 
<input type="button" value="Submit Image Changes" onclick="changeImage()" /> 
</body> 
</html>

fonte

2015-04-23 Morgander

Il problema è che lo script non viene interpretato, perché lo metti nello script con il tipo sbagliato:

<script type="text.javascript">...</script>

Cambio di correggere text/javascript e funzionerà. O ancora meglio: rimuovere l'attributo type come ridondante, text/javascript è comunque il tipo predefinito.

E, infine, invece di usare i CSS onfocus="this.style.background='#c3c3c3'" onblur="this.style.background='#FFFFFF'":

input:focus { 
    background: #c3c3c3; 
}

fonte

2015-04-23 20:40:54 dfsq

ah ah ah .. è possibile aggiungere questo in un solo commento. – Mimouni

@ Ilyas Minmouni, ma la sua reputazione è sulla linea! : P –

punti gratuiti! : D –

Prima di tutto, document.getElementById prende un po 'di tempo per l'esecuzione, così si dovrebbe conservare il suo risultato, invece di chiamare dieci volte.

var elem = document.getElementById('img'); 
elem.something = "example"; 
elem.somethingElse = 1234;

border è deprecated su un'immagine. Dovresti invece interagire direttamente con lo stile dell'elemento. La proprietà CSS del bordo copre tutti gli stili contemporaneamente e deve essere scritta SIZEunit style color come 5px solid black.

elem.style.border = document.getElementById('bs').value + "px solid " + document.getElementById('bc').value;

fonte

2015-04-23 20:49:10

risposta

Problemi correlati