Tapahtuma kuvassa

Sisältää
tehtäviä!

Sijoitetaan kaksi kuvaa images-kansioon: kuva1.jpg ja kuva2.jpg

Edellisessä kappaleen tapahtumia voidaan käytetään nettisivuilla esimerkiksi kuvan vaihtamiseen. 

	kohde.src = jokintoinen-src

jokintoinen-scr voi olla kuvan nimi "lainausmerkeissä" esimerkiksi "kuva2.jpg" tai viittaus toisen elementin src-arvoon. 

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://www.matikki.fi/guidebook-python/brython/brython380/brython.js"></script>
<script src="https://www.matikki.fi/guidebook-python/brython/brython380/brython_stdlib.js"></script>

<title>Brython</title>

<script type="text/python">
from browser import document

def muutaKuva(event):
	kohde = document["suurikuva"]	#haetaan vaihdettava kuva
	kohde.src = "images/kuva2.jpg"	#vaihtaa kohteen kuvan src-arvon
	

document['pienikuva2'].bind("mouseenter", muutaKuva)	#liitetään tapahtumafunktio

</script>

</head>

<body onload="brython({debug:1,indexedDB: false})">

<img id="suurikuva" src="images/kuva1.jpg" height="300px" /> 
<br />

<img id="pienikuva2" src="images/kuva2.jpg" height="50px" /> 

</body>
</html>

Huomaa! Kuvan src-arvossa pitää olla myös mukana kansion nimi, jos kuvat sijaitsevat omassa kansiossaan.

Kuvilla leikkimistä

Joskus on kätevää viitata tapahtuman elementtiin. 

	tapahtumaelementti = event.currentTarget

Esimerkiksi, jos meillä on monta kuvaa sivulla, niin meidän ei tarvitse viitata jokaisen kuvan omaan nimeen. Alla kuva muutetaan viittaamalla tapahtumaelementin scr-arvoon 

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://www.matikki.fi/guidebook-python/brython/brython380/brython.js"></script>
<script src="https://www.matikki.fi/guidebook-python/brython/brython380/brython_stdlib.js"></script>

<title>Brython</title>

<script type="text/python">
from browser import document

def muutaKuva(event):
	kohde = document["suurikuva"]				#haetaan vaihdettava kuva
	tapahtumaelementti = event.currentTarget	#hakee kuvan, jossa tapahtuma tapahtui
	kohde.src = tapahtumaelementti.src			#vaihtaa kohteen kuvan src-arvon
	

document['pienikuva1'].bind("mouseenter", muutaKuva)	#liitetään tapahtumafunktio 
document['pienikuva2'].bind("mouseenter", muutaKuva)	#kaikkiin pikkukuviin

</script>

</head>

<body onload="brython({debug:1,indexedDB: false})">

<img id="suurikuva" src="images/kuva1.jpg" height="300px" /> 
<br />

<img id="pienikuva1" src="images/kuva1.jpg" height="50px" /> 
<img id="pienikuva2" src="images/kuva2.jpg" height="50px" /> 

</body>
</html>

Tehtävä 1:

Rakenna esimerkkiin funktio, mikä muuttaa ison kuvan takaisin oletuskuvaksi, kun hiiri poistuu mistä tahansa pienestä kuvasta. Liitä pieniin kuviin ko. tapahtumafunktio.
Huomaa, että kuvien osoitteet viittaavat niiden absoluuttiseen osoitteeseen netissä!

Tehtävä 2:

Liitä esimerkkiin kaksi kuvaa lisää: "kuva3.jpg" ja "kuva4.jpg" vaihtuvina kuvina.
Huomaa, että kuvien osoitteet viittaavat niiden absoluuttiseen osoitteeseen netissä!