CSS Image Sprites

Πίνακας περιεχομένων

Image Sprites

Ένα sprite εικόνας είναι μια συλλογή εικόνων που τοποθετούνται σε μια ενιαία εικόνα.

Μια ιστοσελίδα με πολλές εικόνες μπορεί να πάρει πολύ χρόνο για να φορτώσει και να δημιουργηθεί πολλαπλά αιτήματα διακομιστή.

Η χρήση sprites εικόνων θα μειώσει τον αριθμό των αιτημάτων διακομιστή και θα αποθηκεύσει εύρος ζώνης.

Image Sprites - Απλό Παράδειγμα

Αντί να χρησιμοποιούμε τρεις ξεχωριστές εικόνες, χρησιμοποιούμε αυτή τη μοναδική εικόνα ("img_navsprites.gif"):

Με το CSS, μπορούμε να δείξουμε μόνο το μέρος της εικόνας που χρειαζόμαστε.

Στο παρακάτω παράδειγμα, το CSS καθορίζει ποιο μέρος του "img_navsprites.gif" εικόνα για εμφάνιση:

Παράδειγμα

#home
{
   
width: 46px;
  height: 44px;
   
background: url(img_navsprites.gif) 0 0;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

#next {
  width: 43px;
  height: 44px;
  background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img id="home" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">

</body>
</html>

Εξήγηση στο παράδειγμα:

<img id="home" src="img_trans.gif">: - Καθορίζει μόνο μια μικρή διαφανή εικόνα επειδή το χαρακτηριστικό src δεν μπορεί να είναι κενό. Η εικόνα που εμφανίζεται θα είναι η εικόνα φόντου που καθορίζουμε στο CSS
width: 46px; height: 44px;: - Καθορίζει το τμήμα της εικόνας που θέλουμε να χρησιμοποιήσουμε
background: url(img_navsprites.gif) 0 0;: - Καθορίζει την εικόνα φόντου και τη θέση της (αριστερά 0px, επάνω 0px)

Αυτός είναι ο ευκολότερος τρόπος χρήσης sprites εικόνων, τώρα θέλουμε να τον επεκτείνουμε χρησιμοποιώντας συνδέσμους και εφέ αιώρησης.

Image Sprites - Δημιουργία λίστας πλοήγησης

Θέλουμε να χρησιμοποιήσουμε την εικόνα sprite ("img_navsprites.gif") για να δημιουργήσουμε μια λίστα πλοήγησης.

Θα χρησιμοποιήσουμε μια λίστα HTML, επειδή μπορεί να είναι σύνδεσμος και να υποστηρίζει επίσης μια εικόνα φόντου:

Παράδειγμα

#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
    top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 
0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') 
-91px 0;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

Εξήγηση στο παράδειγμα:

#navlist {position:relative;}: - η θέση έχει ρυθμιστεί σε σχετική για να επιτρέπει την απόλυτη τοποθέτηση μέσα σε αυτήν
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}: - το περιθώριο και η συμπλήρωση έχουν οριστεί σε 0, το στυλ λίστας καταργείται και όλα τα στοιχεία της λίστας είναι απόλυτα τοποθετημένα
#navlist li, #navlist a {height:44px;display:block;}: - το ύψος όλων των εικόνων είναι 44 px

Τώρα ξεκινήστε να τοποθετείτε και να διαμορφώνετε για κάθε συγκεκριμένο μέρος:

#home {left:0px;width:46px;}: - Τοποθετείται εντελώς προς τα αριστερά και το πλάτος της εικόνας είναι 46 εικονοστοιχεία
#home {background:url(img_navsprites.gif) 0 0;}: - Καθορίζει την εικόνα φόντου και τη θέση της (αριστερά 0px, επάνω 0px)
#prev {left:63px;width:43px;}: - Τοποθετείται 63 εικονοστοιχεία προς τα δεξιά (#home πλάτος 46 px + λίγος επιπλέον χώρος μεταξύ των στοιχείων) και το πλάτος είναι 43 px
#prev {background:url('img_navsprites.gif') -47px 0;}: - Καθορίζει την εικόνα φόντου 47 px προς τα δεξιά (#home πλάτος 46px + 1px line διαιρών)
#next {left:129px;width:43px;}: - Τοποθετείται 129 px προς τα δεξιά (η αρχή του #prev είναι 63px + #prev πλάτος 43px + επιπλέον χώρος) και το πλάτος είναι 43px
#next {background:url('img_navsprites.gif') -91px 0;}: - Καθορίζει την εικόνα φόντου 91 px προς τα δεξιά (#home πλάτος 46px + 1px διαχωριστικό γραμμής + #προηγούμενο πλάτος 43 εικονοστοιχεία + 1 εικονοστοιχείο διαχωριστικό γραμμής)

Image Sprites - Εφέ Hover

Τώρα θέλουμε να προσθέσουμε ένα εφέ αιώρησης στη λίστα πλοήγησής μας.

Συμβουλή: Ο επιλογέας :hover μπορεί να χρησιμοποιηθεί σε όλα τα στοιχεία, όχι μόνο σε συνδέσμους.

Η νέα μας εικόνα ("img_navsprites_hover.gif") περιέχει τρεις εικόνες πλοήγησης και τρεις εικόνες για χρήση για εφέ αιώρησης:

Επειδή πρόκειται για μία μεμονωμένη εικόνα και όχι για έξι ξεχωριστά αρχεία, θα υπάρχει no καθυστέρηση φόρτωσηςόταν ένας χρήστης τοποθετεί το δείκτη του ποντικιού πάνω από την εικόνα.

Προσθέτουμε μόνο τρεις γραμμές κώδικα για να προσθέσουμε το εφέ hover:

Παράδειγμα

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px 
-45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px 
-45px;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites_hover.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -91px 0;
}

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

Παράδειγμα που εξηγείται:

#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;}: - Και για τις τρεις εικόνες αιώρησης καθορίζουμε την ίδια θέση φόντου, μόνο 45 εικονοστοιχεία πιο κάτω