Υπάρχει μια διαφορά μεταξύ της εισαγωγής μιας εικόνας σε ένα ιστοσελίδα και κάνοντας αυτήν την εικόνα ως σύνδεσμο με δυνατότητα κλικ. παρόλο που το HTML είναι παρόμοιο, ένας σύνδεσμος βασίζεται σε ένα άγκυρα στοιχείο ενώ μια εικόνα χρησιμοποιεί το π.χ. στοιχείο. Ωστόσο, μια εικόνα μπορεί να φωλιάσει μέσα σε μια άγκυρα, καθιστώντας αυτήν την εικόνα με δυνατότητα κλικ ως σύνδεσμος.
Εισαγωγή εικόνων σε στοιχεία αγκύρωσης
Η συνήθης χρήση ενός συνδέσμου που βασίζεται σε εικόνα είναι το γραφικό του λογότυπου του ιστότοπου, το οποίο στη συνέχεια συνδέεται με την αρχική σελίδα του ιστότοπου.
Δείτε πώς θα τοποθετούσατε μια εικόνα χωρίς δυνατότητα κλικ στο έγγραφο HTML:
Για να μετατρέψετε την εικόνα σε σύνδεσμο, προσθέστε τον σύνδεσμο αγκύρωσης, ανοίγοντας το στοιχείο αγκύρωσης πριν από την εικόνα και κλείστε την άγκυρα μετά την εικόνα. Αυτή η τεχνική είναι παρόμοια με τον τρόπο σύνδεσης κειμένου, εκτός από το ότι αντί να τυλίξετε τις λέξεις, τυλίγετε την εικόνα:
Όταν προσθέτετε αυτόν τον τύπο HTML στη σελίδα σας, μην τοποθετείτε κενά μεταξύ της ετικέτας αγκύρωσης και της ετικέτας εικόνας. Εάν το κάνετε, ορισμένα προγράμματα περιήγησης θα προσθέσουν μικρά τσιμπούρια δίπλα στην εικόνα, τα οποία θα φαίνονται περίεργα.
Το λογότυπο λειτουργεί επίσης ως κουμπί αρχικής σελίδας, το οποίο είναι σχεδόν ένα πρότυπο ιστού αυτές τις μέρες.
Σημειώστε ότι δεν συμπεριλαμβάνουμε οπτικά στυλ, όπως το πλάτος και το ύψος της εικόνας, στη σήμανση HTML. Θα αφήσουμε αυτά τα οπτικά στυλ στο CSS και θα διατηρήσουμε έναν καθαρό διαχωρισμό της δομής HTML και των στυλ CSS.