Using Fewer Images

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27626
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Using Fewer Images

Δημοσίευση από cordis » 09 Οκτ 2006 17:11

Using Fewer Images

μερικές φορές θέλουμε να κάνουμε το εφε των εικόνων με rollover. Πώς μπορεί να γίνει με μια μόνο εικόνα; απλά αλλάξοντας στο state hover το position τις εικόνας.

Κώδικας: Επιλογή όλων

a#yaprak {
    width: 64px;
    height: 64px;
    background-image: url(yaprak_bw_color.png);
    display: block;
    text-decoration: none;
}

a#yaprak:hover {
    background-position: 64px 0;
}
αναλυτικά: http://magnetiq.com/2006/08/27/using-less-images/
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Using Fewer Images

Δημοσίευση από manolism » 09 Οκτ 2006 17:13

Πάρα πολύ χρήσιμο.

Το χρησιμοποιώ στα τελευταία projects.


Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Using Fewer Images

Δημοσίευση από skeftomilos » 09 Οκτ 2006 20:45

Είχα δει παλαιότερα την τεχνική σε demo κώδικα του Cherouvim, αλλά την είχα ξεχάσει. Χρήσιμη η υπενθύμιση. :) Εκτός από ταχύτερο downloading και ελάφρυνση του server θα ωφελήσει να μη μεγαλώνουν πολύ γρήγορα τα log files.

Το συμβάν window.onload τρέχει μετά το φόρτωμα όλων των foreground images, ανεξάρτητα αν έχουν φορτωθεί τα background images. Αυτό μπορεί να είναι επιθυμητό ή όχι αναλόγως.

Για το φόβο των Ιουδαίων μπορεί να προστεθεί overflow:hidden στο css του link.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Using Fewer Images

Δημοσίευση από cherouvim » 09 Οκτ 2006 21:01

Επίσης έτσι μπορείς να εφαρμόσεις φίλτρα (πχ to hue/saturation) στο "skin file" όλου του component σου. (Εάν φυσικά έχεις μαζέψει όλα του τα στοιχεία σε μία εικόνα).
Εικόνα

Άβαταρ μέλους
alkisg
Δημοσιεύσεις: 265
Εγγραφή: 03 Ιουν 2005 11:53
Τοποθεσία: Ιωάννινα
Επικοινωνία:

Using Fewer Images

Δημοσίευση από alkisg » 09 Οκτ 2006 21:23

Καλό!
Παραπλήσιο: έχετε δει πουθενά να χρησιμοποιούν διαφορετικά φίλτρα (directx transform) για hue/saturation/grayscale σε onhover/disabled κτλ χρησιμοποιώντας ένα μόνο image? Φυσικά θα παίζει μόνο σε IE...
Λογικά με τα SVG θα έπρεπε να γίνεται κάτι αντίστοιχο και σε firefox...

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Using Fewer Images

Δημοσίευση από ALR » 10 Οκτ 2006 11:48

Πολύ ωραίο.
Φαντάζομαι θα είναι αρκετά πιο ελαφρύ από το κλασσικό rollover script που βγάζει το imageready.

Δηλαδή ουσιαστικά, σχεδιάζουμε δίπλα δίπλα 2 φωτογραφίες που θέλουμε να εναλλάσονται και χρησιμοποιούμε τον κώδικα αυτό σε .css εξωτερικό , εσωτερικό ή δεν παίζει ρόλο;
Καλύτερα εξωτερικό βέβαια..
Γίνονται πραγματάκια

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Using Fewer Images

Δημοσίευση από cherouvim » 10 Οκτ 2006 11:51

Γενικά μία css λύση είναι πάντα καλύτερη από οτιδήποτε περιλαμβάνει javascript.

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης