Εικόνα σε Div

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

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

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

Εικόνα σε Div

Δημοσίευση από manolism » 17 Ιουν 2006 11:26

Να κάνω και μία άλλη ερώτηση

Έχω αυτό:

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

div.star8 {
background-image:url(images/flash_star.gif);
  float: left;
  width:120px;
  height:121px;
  margin-top:20px;
  }
Πως θα μπορέσω να κάνω hover μία άλλη εικόνα;

Σε προηγούμενη περίπτωση που χρησιμοποίησα αυτό:

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

#start {
	width: 168px;
	height: 96px;
	text-indent: -5000px;
	text-decoration:none;
	background: #ffffff url(images/start.gif) 0px 0px;
	border: 0;
	display: block;
}

#start:hover {
	background: #ffffff url(images/start.gif) 0px 96px;
}
δούλεψε.

Αλλά τώρα δεν έχω id αλλά class

Άβαταρ μέλους
milianos
Δημοσιεύσεις: 269
Εγγραφή: 11 Νοέμ 2004 01:39
Τοποθεσία: schwabenland
Επικοινωνία:

Εικόνα σε Div

Δημοσίευση από milianos » 17 Ιουν 2006 19:30

Κανονικά η [google]pseudo class hover [/google]ισχύει μόνο για τα links και οχι γενικώς για οποιοδήποτε div element. Με λίγη java όμως υπάρχουν πιθανότητες να δουλεύει αυτό που θες παντού ικανοποιητικά ακόμα και στον χαζο Firefox :lol: .

παράδειγμα:

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

div.star8 {
background-image:url(ikon97.jpg); 
  float: left; 
  width:120px; 
  height:121px; 
  margin-top:20px; 
}
div.star8:hover, div.star8hover {
background-image:url(ikon98.jpg); 
  float: left; 
  width:120px; 
  height:121px; 
  margin-top:20px; 
}
div.star8 {
background-image: expression(
this.onmouseover = new Function("this.className += ' star8hover';"),
this.onmouseout = new Function("this.className = this.className.replace('star8hover', '');")
);
}
Για προηγούμενες εκδόσεις IE μπορείς αυτό το [google]Conditional Comment [/google]να το επισημάνεις με ενα <!--[if IE]> και να φαίνεται κάπως έτσι:

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

<!--&#91;if IE&#93;>
<style type="text/css">
div.star8 &#123;
background-image&#58; expression&#40;
this.onmouseover = new Function&#40;"this.className += ' star8hover';"&#41;,
this.onmouseout = new Function&#40;"this.className = this.className.replace&#40;'star8hover', ''&#41;;"&#41;
&#41;;
&#125;
</style>
<!&#91;endif&#93;-->

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

Εικόνα σε Div

Δημοσίευση από cherouvim » 17 Ιουν 2006 21:41

Pontaro thn aksia ton mison mou posts, oti an den hrisimopoihseis pote sti zoi sou css expressions, mono kalo tha sou kanei.

Άβαταρ μέλους
fotisevangelou
Δημοσιεύσεις: 125
Εγγραφή: 24 Οκτ 2005 10:49
Επικοινωνία:

Εικόνα σε Div

Δημοσίευση από fotisevangelou » 17 Ιουν 2006 22:38

Συμφωνώ ακράδαντα με Cherouvim (αν και ψιλοαρπαχτήκαμε μια φορά :) )

Πάντως το hover ισχύει και σε άλλα elements για τον "χαζοfirefox" εν αντιθέσει με τον ΙΕ, όπου εκεί καταλαβαίνει hover μόνο στο a.

Αν θες να κάνεις ένα rollover μπορείς να δοκιμάσεις το εξής:

Αντί για div θα παίξουμε με a, το οποίο δεν είναι "block element" (δηλαδή δεν συμπεριφέρεται σαν div) αλλά εμείς θα το κάνουμε. Και θα του δώσουμε και μία κλάση "rollover" (μπορείς να δώσεις και id, ανάλογα με το design σου). Στο a θα έχουμε την bg εικόνα όταν ο κέρσορας δεν είναι από πάνω και -προφανώς- στο a:hover θα έχουμε την bg2 εικόνα που θα κάνει, ε.., roll over! Και έστω ότι έχουν διάσταση 100px width και 80px height (και οι 2).

Έχουμε λοιπόν:

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

a.rollover &#123;
display&#58;block; /* μετατρέπουμε το a σε block element και του δίνουμε πιο κάτω διαστάσεις */
background&#58;&#40;bg.jpg&#41; no-repeat;
width&#58;100px;
height&#58;80px;
text-decoration&#58;none;
&#125;

a.rollover &#58;hover &#123;
display&#58;block; /* διατηρούμε το a σε block element και του δίνουμε πιο κάτω διαστάσεις */
background&#58;&#40;bg2.jpg&#41; no-repeat;
width&#58;100px;
height&#58;80px;
text-decoration&#58;none;
&#125;
και html:

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

<a class="rollover" href="#"></a>
Αν θες να έχεις λινκ αντικαθιστάς το # με το λινκ σου, αν δεν θες να έχεις λινκ, το αφήνεις έτσι και βάζεις στο css στο a.rollover και στο a.rollover:hover ένα cursor:default; και είσαι κύριος.

Την javascript απέφυγέ την δια ροπάλου σε αυτά. Αστη για κανα εφεδάκι καλύτερα!

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

Εικόνα σε Div

Δημοσίευση από skeftomilos » 18 Ιουν 2006 00:02

fotisevangelou έγραψε:Αν θες να έχεις λινκ αντικαθιστάς το # με το λινκ σου
Κάπως άσχετο με το θέμα αλλά προσωπικά θεωρώ poor coding style και δε χρησιμοποιώ links με href="#". Όταν θέλω ένα ψευδο-link που να τρέχει JavaScript βάζω href="javascript:void(0)" και τον κώδικα στο onclick να επιστρέφει false. Όχι ότι κι αυτό μ'αρέσει αλλά τα links έχουν το καλό ότι μπορούν να πάρουν το focus και να γίνουν κλικ με το πληκτρολόγιο. Το αντικειμενικά σωστότερο νομίζω θα ήταν να μπει ένα button, που να πάρει την εμφάνιση link με CSS. Αλλά είναι αρκετή φασαρία, και δεν ξέρω αν γίνεται κι όλας.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
fotisevangelou
Δημοσιεύσεις: 125
Εγγραφή: 24 Οκτ 2005 10:49
Επικοινωνία:

Εικόνα σε Div

Δημοσίευση από fotisevangelou » 18 Ιουν 2006 00:40

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

Δυστυχώς για το button που αναφέρεις έχουμε και πάλι το πρόβλημα του IE που δεν αναγνωρίζει css της μορφής input:hover! Άρα παίζουμε με a.

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

Εικόνα σε Div

Δημοσίευση από manolism » 18 Ιουν 2006 08:11

Τελικά μου βγήκε με το:

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

div.star1 a&#123;
background&#58;url&#40;images/planner_star1.gif&#41; 0px 0px;
  float&#58; left;
  width&#58;120px;
    text-indent&#58; -5000px; 
height&#58;121px;
  margin-left&#58;20px;
  text-decoration&#58;none;
  &#125;

  div.star1 a&#58;hover &#123;
background&#58;url&#40;images/planner_star1.gif&#41;  0px 121px;
&#125;
Thanks για τις απαντήσεις. :P

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

Εικόνα σε Div

Δημοσίευση από panosru » 20 Ιουν 2006 11:21

ThyClub έγραψε:Μπορεί να περάσει το javascript μέσα απο το αρχείο CSS. Αρχίσαμε να ξεφεύγουμε λίγο :P
mporeis na to kaneis kai me thn expression alla genikotera den thn exo xrhshmopoihsei (den brhsko logo na peraso JavaScript se CSS) kai den ksero pos tha symperiferthei oute ston tropo emfanishs oute ston tropo validation

EDIT:
pantos lunarmedia den brhsko logo gi' ayto pou egrapses, kyrios den katalabaino to problhma pou eixes kai den xrhshmopoihses ayto pou sou eixe dosei o cherouvim

px an exeis mia eikona diastaseon 316px X 370px

ena css san to akoloutho:

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

#MyImageId &#123;
	background-image&#58; url&#40;ft-florencia.jpg&#41;;
	background-repeat&#58;no-repeat;
	width&#58; 316px;
	height&#58; 370px;
	display&#58; block;
	text-indent&#58; -5000px; /* diohnei to text &#123; oraia epishmansh tou cherouvim &#125;*/ 
&#125;
kai ena link san to parakato:

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

<a id="MyImageId" href="#"></a>
ti problhma exei kai den sou paizei?

PS: asxeta oti gia na to prosarmoseis opos to thes prepei na prostheseis kai alla styles sto #MyImageId...

@cherouvim kapou eixa diabase, nomizo sto stylegala gia to text-indent enas elege gia -9000px kai enas allos elege pos einai kalytero to -999em :s na sou po thn alhtheia den to proseksa idietera alla an einai tha psakso na to bro kai na sou doso link an thes na to diabaseis (eixan grapse 8 selides++)

Απάντηση

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

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

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