e-gradiva     HTML CSS JavaScript Načrtovanje    
  logotip  
SERŠ Maribor Iskanje Primeri

Spreminjanje velikosti

Koda: 
<html>
<head>
<script type="text/javascript">
function changeSize(visina, dozina)
{
document.getElementById("nuke").style.height=visina+"px"
document.getElementById("nuke").style.width=dozina+"px"
alert("OK")
}
</script>
</head>

<body>
<img id="nuke" src="slike\nuke.jpg" alt="Slikica" width="107" height="98" />
<br /><br />
<p>Prosim vas, da v primeru, če želite spremeniti velikost slike,
v polji vpišete podatka za višino in dolžino slike kakršno
bo slika po pritisku gumba SPREMENI tudi imela.</p>

<form action="#">
Visina slike: <input type="text" name="visina" value="107"><br />
Dolzina slike: <input type="text" name="dolzina" value="98"><br />
<p></p>
<input type="button" onclick="changeSize(visina.value, dolzina.value)" value="SPREMENI (velikost slike)">
</body>

</html>
Izgled v
brskalniku:

Slikica

Prosim vas, da v primeru, če želite spremeniti velikost slike, v polji vpišete podatka za višino in dolžino slike kakršno bo slika po pritisku gumba SPREMENI tudi imela.

Višina slike:
Dolžina slike:

Razlaga: Zgornji primer prikazuje primer javascripta, ki omogoča spreminjanje velikosti slike tako, da vrednosti za dolžino in višino vpišemo sami in pritisnemo gumb SPREMENI. Ko gumb pritisnemo, se vrednosti v okencih za vpis dodelijo vrednostima višine in dolžine slike. Slika se nato spremeni v poljubno želeno velikost, sledi pa tudi izpis, da je bila pretvorba uspešna.

gor Gor     e-gradiva     JavaScript     Primeri

SERŠ Maribor : Strokovna gimnazija : 2004 : Damijan Račel