Πώς να κάνει Rollover Εικόνες σε HTML Text

Με τα εκατομμύρια των ιστοσελίδων στο Internet , είναι σημαντικό ότι η ιστοσελίδα σας να είναι αξέχαστη και μοναδική . Μια τεχνική που χρησιμοποιείται για να προσθέσετε μια δυναμική επίδραση στις ιστοσελίδες είναι ανατροπής εικόνες , επίσης γνωστή ως κουμπιά ανατροπής . Ουσιαστικά , όταν ο επισκέπτης κυλά πάνω από μια εικόνα , θα αλλάξει σε κάτι άλλο . Όταν ο χρήστης βγαίνει από την εικόνα , θα επιστρέψει στο αρχικό γραφικό . Κοινή ανατροπές περιλαμβάνουν ανεπαίσθητες επιδράσεις , όπως η αλλαγή του χρώματος της εικόνας ή την οικογένεια. Μπορείτε να δημιουργήσετε το δικό σας ανατροπής εικόνα με βασική μορφοποίηση HTML σε διάφορα προγράμματα web-design . Τα πράγματα που θα χρειαστείτε
λογισμικό επεξεργασίας φωτογραφιών
Web-σχεδιασμός λογισμικού
Παρουσίαση Περισσότερες οδηγίες
Η

1 Δημιουργήστε ένα νέο έγγραφο του επιθυμητού μεγέθους σε pixels στη φωτογραφία -editing λογισμικό, όπως το Photoshop . Δημιουργήστε το κουμπί και ανατροπής εικόνες . Οι δύο εικόνες πρέπει να είναι το ίδιο μέγεθος . 2

Αποθηκεύστε τις δύο εικόνες ξεχωριστά με την πλοήγηση στο μενού "Αρχείο" και κάνοντας κλικ στο " Αποθήκευση". Αποθηκεύστε τις εικόνες είτε ως JPEG , GIF ή PNG . Αν και τα αρχεία JPEG και GIF χρησιμοποιούνται πιο συχνά , τα αρχεία PNG διατηρεί τη διαφάνεια . Βεβαιωθείτε ότι μπορείτε να αποθηκεύσετε την εικόνα στο φάκελο τοπικό ρίζα της ιστοσελίδας σας .
Εικόνων 3

Ανοίξτε το επιθυμητό λογισμικό σχεδιασμού ιστοσελίδων , όπως το Adobe Dreamweaver . Κάντε κλικ στο κουμπί ανανέωσης στη βιβλιοθήκη σας να ενημερώσετε τη βιβλιοθήκη της ιστοσελίδας και τοπικού φακέλου ρίζας .
Η 4 Εντοπίστε τις εικόνες στο τοπικό ριζικό φάκελο .

Αλλαγή σε της ιστοσελίδας του " Προβολή κώδικα ", επιλέγοντας το κουμπί Προβολή κώδικα .
5

Τύπος " " χωρίς το άνοιγμα και το κλείσιμο εισαγωγικά μέσα στον κώδικα .
Η 6

Αντικατάσταση " http://yourwebsite.com "με το όνομα της ιστοσελίδας σας . Αντικαταστήστε το " Image1 » και « image2 » με το όνομα του κουμπιού και της ανατροπής των εικόνων σας . Εικόνα ανατροπής σας θα αντικαταστήσει " image2 », ενώ « Image1 " σημαίνει για την αρχική εικόνα κουμπιού .
Η
εικόνων