Rollover images with CSS

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

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

Απάντηση
Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Rollover images with CSS

Δημοσίευση από Basilakis » 02 Απρ 2008 21:42

Hmm enw kserw pws na kanw rollover images anarwtiemai ean kapoios gnwrizei, pws mporeis na ta kaneis xwris na xrisimopoieiseis Javascript alla me CSS ean ginetai.

dld, na exw to <img src="image.gif" /> kai otan kanw roll, na alazei se image1...

Άβαταρ μέλους
The Razor
Δημοσιεύσεις: 1940
Εγγραφή: 10 Φεβ 2007 12:37
Επικοινωνία:

Rollover images with CSS

Δημοσίευση από The Razor » 02 Απρ 2008 22:07

Sτο css αυτο:

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

div.tv a&#123;
background&#58;url&#40;tv-2.jpg&#41; 0px 0px;
float&#58; left;
width&#58;120px;
text-indent&#58; -5000px;
height&#58;85px;
margin-left&#58;20px;
margin-top&#58;20px;
text-decoration&#58;none;
&#125;
 
div.tv a&#58;hover &#123;  
background&#58;url&#40;tv.jpg&#41;  0px 0px;
&#125;
Και στο <body></body> αυτο:

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

<div class="tv"><a title="Ελληνική tv" href='tv.html'></a></div>

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Rollover images with CSS

Δημοσίευση από Basilakis » 02 Απρ 2008 22:10

Afto to kanei gia ena background enos DIV... afto simainei pws prepei na alaksw oli mou tin domi ean to kanw etsi, i na valw to image san background mesa sto DIV :P

(kai distixws to vrika afto sto internet psaxnwntas already :D)

Efw to psaxnw se img tag :D


Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Rollover images with CSS

Δημοσίευση από Basilakis » 02 Απρ 2008 23:35

AAA den katalaves :D EIpa pws exw vrei afto pou eipes, gia to BGcolor :P

Psaxnw akomi, gia to image tag ;)


Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Rollover images with CSS

Δημοσίευση από Basilakis » 03 Απρ 2008 02:51

Come on boys and girls :D

Eimai sigouros pws mporei na ginei kapws :P

Min me kanete na to psaxw pws ginete me php :(

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

Rollover images with CSS

Δημοσίευση από ALR » 03 Απρ 2008 03:44

Μπορείς να μη χρησιμοποιήσεις div , αλλά να δώσεις ένα id σε ένα <a> element , αλλά κι αυτό προϊποθέτει να μην έχεις hardcoded τις εικόνες σου.

Το <img> δε βοηθά και πολύ.

εγώ προτείνω να έχεις μια εικόνα και το html Πάει κάπως έτσι: <a href="#" id="roll"></a>

#roll a{
background:url (image.jpg);

}
#roll a:hover{
background: url(image.jpg) 0 20px ;
}

Ανάλογα την εικόνα που έχεις , αλλάζει και το Positioning.

Σε img tag rollover λογικά πρέπει να γίνεται με 2 εικόνες, img a & img a:hover.
Δεν γίνεται έτσι;
Γίνονται πραγματάκια

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Rollover images with CSS

Δημοσίευση από Basilakis » 03 Απρ 2008 12:33

Hmmm nai...

Alla den mporeis na kaneis to img a kai a:hover...

Skeftika na to kanw me imageholder alla pali @@.

Den kserw mallon tha prepei na epistrepsw stin Javascript :P

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

Rollover images with CSS

Δημοσίευση από skeftomilos » 03 Απρ 2008 18:29

Τα rollover images καλό είναι να έχουν κατέβει εγκαίρως γιατί το να φορτωθούν με καθυστέρηση στο rollover είναι κάπως ερασιτεχνικό.

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

function preloadImage&#40;url&#41; &#123;
  var image = new Image&#40;&#41;
  arguments.callee&#91;'#' + url&#93; = image
  image.src = url
&#125;

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

Rollover images with CSS

Δημοσίευση από cherouvim » 03 Απρ 2008 20:32

skeftomilos έγραψε:Τα rollover images καλό είναι να έχουν κατέβει εγκαίρως γιατί το να φορτωθούν με καθυστέρηση στο rollover είναι κάπως ερασιτεχνικό.
Γιαυτό χρησιμοποιώ css sprites.
http://www.alistapart.com/articles/sprites

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

Rollover images with CSS

Δημοσίευση από skeftomilos » 03 Απρ 2008 22:17

Ωραία είναι τα sprites, αλλά ένα Load Images = false από τα options του browser αχρηστεύει το μενού, και δε μπορεί να μπει το ταμπελάκι της accessibility conformance.

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Rollover images with CSS

Δημοσίευση από Basilakis » 03 Απρ 2008 22:19

Poli kalo afto pou egrapses skeftomilos...

Apo oti katalavenw, den mporoume na ksefigoume apo tin xrisi javascript, gia na keep using to img tag.

tha dw ean mporw na to kanw me php. Alwste, xreiazomai na to xrisimopoieisw mesa se ena php Print kai i Javascript einai unusefull in there

Απάντηση

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

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

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