Skip to content

Latest commit

 

History

History
79 lines (63 loc) · 3.4 KB

ex5.md

File metadata and controls

79 lines (63 loc) · 3.4 KB
Raw

Introduction to Web Development

Part 2: JavaScript

Άσκηση 5η

Σε αυτήν την άσκηση θα παίξουμε με τις εικόνες και τα events onmouseover/onmouseout/onclick.

  1. Δημιουργούμε έναν φάκελο στην επιφάνεια εργασίας με το όνομα ex5 και ένα νέο αρχείο με το όνομα ex5.html.

  2. Πληκτρολογούμε τα παρακάτω αναγκαία tags:

<!DOCTYPE html>
<html>
    <head>
      <title>Example 5 - JS</title>
    </head>
    <body>
        
    </body>
</html>

  1. Φτιάχνουμε έναν υποφάκελο μέσα στον ex5 με το όνομα images και βάζουμε μέσα 3 εικόνες: html.png, css.png και js.png.

  2. Μέσα στο body γράφουμε το παρακάτω:

<section id="gallery">
  <img id="myIMG" src="images/html.png" alt="Just another image" onmouseover="changeIMG()" />
</section>
  1. Στο head προσθέτουμε styling για την εικόνα:
<style>
  img {
    width: 600px;
    margin: 50px auto;
  }

  section#gallery{
    margin: 10px auto;
    text-align: center;
    width: 800px;
  }
</style>
  1. Συνεχίσουμε στο head και προσθέτουμε script για την αλλαγή της εικόνας μόλις περάσει το ποντικί πάνω από τη φωτογραφία (onmouseover).
<script>
  function changeIMG(){
    document.getElementById("myIMG").src = "images/css.png";
  }
</script>

  1. Αποθηκεύουμε τις αλλαγές μας στο αρχείο ex5.html και τρέχουμε τη σελίδα.

  2. Στη συνέχεια θέλουμε η εικόνα να επιστρέφει στη προηγούμενη μόλις φύγει το ποντικί από πάνω της (onmouseout). Για αυτό προσθέτουμε ακόμη μία μέθοδο στο script:

function returnIMG(this){
  this.src = "images/html.png";
}
  1. Έπειτα πρέπει να προσθέσουμε και το ανάλογο event, στην περίπτωσή μας το onmouseout πάνω στην εικόνα. Οπότε αλλάζουμε τον κώδικα της εικόνας:
  <img id="myIMG" src="images/html.png" alt="Just another image" onmouseover="changeIMG()" onmouseout="returnIMG(this)" />

  1. Αποθηκεύουμε τις αλλαγές μας και τρέχουμε και πάλι την σελίδα.

  2. Τέλος, θέλουμε να αλλάζει η εικόνα και όταν κάνουμε κλικ πάνω της σε μία τρίτη. Για αυτό θα χρησιμοποιήσουμε το event onclick.

  3. Αλλάζουμε το κώδικα της σελίδας με το παρακάτω:

  <img id="myIMG" src="images/html.png" alt="Just another image" onmouseover="changeIMG()" onmouseout="returnIMG(this)" onclick="this.src='images/js.png'" />
  1. Αποθηκεύουμε τις αλλαγές μας και τρέχουμε την σελίδα.