Δημιουργία μιας μεταβαλλόμενης εικόνας

Μπορούμε να δημιουργήσουμε μία εναλλαγή εικόνας με τη χρήση της JavaScript, η οποία είναι μία σύνδεση εικόνας που αλλάζει σε μία άλλη εικόνα όταν ο χρήστης τοποθετεί το ποντίκι πάνω στη σύνδεση.
Χρησιμοποιούμε τον κωδικό <A> με τον συνβάν ONMOUSEOVER για να καθορίσουμε την εικόνα που θέλουμε να εμφανίζεται όταν ο χρήστης τοποθετεί το ποντίκι πανω στη σύνδεση.
Μπορούμε να χρησιμοποιήσουμε και το συνβάν ONMOUSEOUT για να ξαναεμφανίζεται η αρχική εικόνα όταν ο χρήστης απομακρύνει το ποντίκι από τη σύνδεση.

Πληκτρολογούμε:

<A HREF="διεύθυνση της σελίδας που θέλουμε όταν ο χρήστης επιλέγει την εικόνα"ONMOUSEOVER="document.rollover.src='θέση και όνομα της εικόνας που θέλουμε να εμφανίζεται όταν ο χρήστης τοποθετεί το ποντίκι πάνω στην εικόνα'"ONMOUSEOUT="document.rollover.src='θέση και όνομα της αρχικής εικόνας'"><IMG SRC="θέση και όνομα της αρχικής εικόνας" NAME="rollover"></A>

Για παράδειγμα:

<A HREF="photos.html"ONMOUSEOVER="document.rollover.src='cat.jpg'"ONMOUSEOUT="document.rollover.src='tiger.jpg'"><IMG SRC="tiger.jpg" NAME="rollover"></A>

Σχόλια