Πώς να κάνετε εικόνες ανατροπής με κώδικα HTML

Συγγραφέας: Christy White
Ημερομηνία Δημιουργίας: 11 Ενδέχεται 2021
Ημερομηνία Ενημέρωσης: 12 Νοέμβριος 2024
Anonim
Πώς να κάνετε εικόνες ανατροπής με κώδικα HTML - Άρθρα
Πώς να κάνετε εικόνες ανατροπής με κώδικα HTML - Άρθρα

Περιεχόμενο

Με τα εκατομμύρια των ιστοτόπων που υπάρχουν στο διαδίκτυο, είναι σημαντικό να είναι μοναδικό το δικό σας. Μια τεχνική που χρησιμοποιείται για να προσθέσει μια δυναμική επίδραση στους ιστότοπους είναι οι "εικόνες rollover", γνωστές και ως "κουμπιά ανατροπής". Ουσιαστικά, όταν ο επισκέπτης αιωρείται πάνω από μια εικόνα, αλλάζει και επιστρέφει στο φυσιολογικό όταν αφαιρείται το ποντίκι. Αυτό μπορεί να χρησιμοποιηθεί για μερικά λεπτά εφέ, όπως αλλαγή χρώματος της εικόνας ή του γράμματος. Μπορείτε να δημιουργήσετε τη δική σας εικόνα ανατροπής με βασική μορφοποίηση HTML σε διάφορα προγράμματα σχεδιασμού.


Οδηγίες

Δημιουργήστε δυναμικές ιστοσελίδες με τη βοήθεια εικόνων ανατροπής (Jupiterimages / Φωτογραφίες.com / Getty Images)
  1. Δημιουργήστε ένα νέο έγγραφο με το επιθυμητό μέγεθος (σε εικονοστοιχεία) χρησιμοποιώντας λογισμικό επεξεργασίας εικόνας, όπως το Photoshop. Δημιουργήστε τις κανονικές εικόνες και τις εικόνες "ανατροπής", οι οποίες πρέπει να έχουν το ίδιο μέγεθος.

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

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


  4. Μεταβείτε στην προβολή κώδικα της ιστοσελίδας.

  5. Πληκτρολογήστε "

    "Στον κώδικα, χωρίς τα εισαγωγικά εισαγωγικά.

  6. Αντικαταστήστε το "http://yoursite.com" με τη διεύθυνση του ιστότοπού σας. Αντικαταστήστε επίσης το "IMAGE1" και το "IMAGE2" με τα ονόματα των κανονικών εικόνων και των εικόνων "rollover" αντίστοιχα.

Τι χρειάζεστε

  • Λογισμικό επεξεργασίας εικόνας
  • Λογισμικό σχεδιασμού ιστοσελίδων