Temat: Wykorzystanie skryptów na stronie internetowej - animowanie grafiki.
Temat z podręcznika kwalifikacja E .14 Tworzenie aplikacji internetowych cz.3 str.
102-105
To jest przykład z wykorzystaniem zalecanych poleceń addEventListener.
<html>
<head>
<meta charset="UTF-8">
<title>zmiana obrazka</title>
</head>
<body>
(zmiana obrazka (rollover) z wykorzystaniem zdarzeń myszki -niezalecana ze względu na
wczytywanie obrazków z serwera dopiero w momencie zajścia zdarzenia onMouseOver i onClick, co prawdopodobnie dla wolniejszych łączy spowoduje opóźnienie w działaniu.)
<p> <img src="1.png" width="250" height="250" alt="obraz1" name="obraz"
onMouseOut="this.src='2.png'" onMouseOver="this.src='1.png'"; onClick="this.src='3.png'"
/></p>
(Podmiana obrazka - efekt rollover z wcześniejszym załadowaniem grafiki do bufora przeglądarki -zalecane)
<p> <img src="ikona1.png" id="obrazek1"></p>
<script type="text/javascript">
if (document.images) { var obrazek1 = new Image;
var obrazek2 = new Image;
var obrazek3 = new Image;
obrazek1.src = 'ikona1.png';
obrazek2.src = 'ikona2.png';
obrazek3.src = 'ikona3.png';
var img = document.getElementById('obrazek1');
img.addEventListener('mouseout', function() {this.src = obrazek1.src});
img.addEventListener('mouseover', function() {this.src = obrazek2.src});
img.addEventListener('click', function() {this.src = obrazek3.src});
}</script>
</body>
</html>
To jest przykład książkowy -analogiczny jak powyższe.
<html>
<head>
<meta charset="UTF-8">
<title>zmiana obrazka</title>
</head>
<body>
<p><img src="ikona1.png" id="ikona"/></p>
<script type="text/javascript">
var ikona_n=new Image();
var ikona_p=new Image();
var ikona_c=new Image();
ikona_n.src="ikona2.png";
ikona_p.src="ikona1.png";
ikona_c.src="ikona3.png"
var obraz=document.getElementById("ikona");
obraz.onmouseover = function() {this.src=ikona_n.src
}obraz.onmouseout = function() {this.src=ikona_p.src
}obraz.onclick = function() {this.src=ikona_c.src }</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>animowany baner obrazkowy</title>
<style type="text/css">
#baner { top:100;
width:250px;
height:250px;
}</style>
<script type="text/javascript">
window.onload = zmiana;
var nr=0;
function zmiana()
var obrazy=new Array ('1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png');{ nr++;
if (nr==obrazy.length) {nr=0;
document.getElementById("baner").src=obrazy[nr];} setTimeout(zmiana,500);
}</script>
</head>
<body>
<div><img src="1.png" id="baner"> </div>
</body>
</html>
