Σε αυτήν την άσκηση θα παίξουμε με τις εικόνες και τα events onmouseover/onmouseout/onclick.
-
Δημιουργούμε έναν φάκελο στην επιφάνεια εργασίας με το όνομα
ex5
και ένα νέο αρχείο με το όνομαex5.html
. -
Πληκτρολογούμε τα παρακάτω αναγκαία tags:
<!DOCTYPE html>
<html>
<head>
<title>Example 5 - JS</title>
</head>
<body>
</body>
</html>
-
Φτιάχνουμε έναν υποφάκελο μέσα στον
ex5
με το όνομαimages
και βάζουμε μέσα 3 εικόνες: html.png, css.png και js.png. -
Μέσα στο
body
γράφουμε το παρακάτω:
<section id="gallery">
<img id="myIMG" src="images/html.png" alt="Just another image" onmouseover="changeIMG()" />
</section>
- Στο
head
προσθέτουμε styling για την εικόνα:
<style>
img {
width: 600px;
margin: 50px auto;
}
section#gallery{
margin: 10px auto;
text-align: center;
width: 800px;
}
</style>
- Συνεχίσουμε στο
head
και προσθέτουμε script για την αλλαγή της εικόνας μόλις περάσει το ποντικί πάνω από τη φωτογραφία (onmouseover
).
<script>
function changeIMG(){
document.getElementById("myIMG").src = "images/css.png";
}
</script>
-
Αποθηκεύουμε τις αλλαγές μας στο αρχείο
ex5.html
και τρέχουμε τη σελίδα. -
Στη συνέχεια θέλουμε η εικόνα να επιστρέφει στη προηγούμενη μόλις φύγει το ποντικί από πάνω της (
onmouseout
). Για αυτό προσθέτουμε ακόμη μία μέθοδο στοscript
:
function returnIMG(this){
this.src = "images/html.png";
}
- Έπειτα πρέπει να προσθέσουμε και το ανάλογο event, στην περίπτωσή μας το
onmouseout
πάνω στην εικόνα. Οπότε αλλάζουμε τον κώδικα της εικόνας:
<img id="myIMG" src="images/html.png" alt="Just another image" onmouseover="changeIMG()" onmouseout="returnIMG(this)" />
-
Αποθηκεύουμε τις αλλαγές μας και τρέχουμε και πάλι την σελίδα.
-
Τέλος, θέλουμε να αλλάζει η εικόνα και όταν κάνουμε κλικ πάνω της σε μία τρίτη. Για αυτό θα χρησιμοποιήσουμε το event
onclick
. -
Αλλάζουμε το κώδικα της σελίδας με το παρακάτω:
<img id="myIMG" src="images/html.png" alt="Just another image" onmouseover="changeIMG()" onmouseout="returnIMG(this)" onclick="this.src='images/js.png'" />
- Αποθηκεύουμε τις αλλαγές μας και τρέχουμε την σελίδα.