Hover με εικόνα

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

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

Απάντηση
Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

Hover με εικόνα

Δημοσίευση από vassilism » 05 Μάιος 2008 19:52

Καλησπέρα σας.
Έχω βάλει σε μια εικόνα link να κάνει hover με μια άλλη εικόνα με τον εξής τρόπο.
CSS

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

a.closeimage{
width: 45px;
height: 17px;
background-image: url(close.gif);
background-repeat: no-repeat;
}
a.closeimage:hover{
background-image: url(close_hover.gif);
background-repeat: no-repeat;
}
PHP

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

<?php 
echo &#40;"<a href=index.php title=\"Κλείσιμο\" class=\"closeimage\"></a>"&#41;;
?>
Με αυτόν τον τρόπο δεν δουλεύει σωστά. Στον FF δεν εμφανίζει καθόλου την εικόνα και στον IE όταν ο δείκτης του ποντικιού πάει επάνω στην εικόνα, η εικόνα εξαφανίζετε και μετά από λίγο εμφανίζει την άλλη εικόνα.
Γνωρίζετε πως μπορώ να το διορθώσω?

Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

Hover με εικόνα

Δημοσίευση από dva_dev » 05 Μάιος 2008 20:39

είδες μήπως χρειάζεσαι κανένα "display: block;"

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

Hover με εικόνα

Δημοσίευση από Basilakis » 05 Μάιος 2008 20:55

Ακριβώς το είδιο πρόγραμμα είχα και εγώ όταν το έκανα μέσο php. Αλλα σε κανονικό html (χωρίς echo) έπαιζε σωστά... τι να σου πώ εάν το βρείς, σφυράς xD

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

Hover με εικόνα

Δημοσίευση από vassilism » 05 Μάιος 2008 21:18

dva_dev έγραψε:είδες μήπως χρειάζεσαι κανένα "display: block;"
Το display: block; είναι για να βάζεις το περιεχόμενο το ένα κάτω από το άλλο, όποτε δεν φταίει αυτό.
Basilakisweb έγραψε:Ακριβώς το είδιο πρόγραμμα είχα και εγώ όταν το έκανα μέσο php. Αλλα σε κανονικό html (χωρίς echo) έπαιζε σωστά... τι να σου πώ εάν το βρείς, σφυράς xD"
Θα κάνω μια δοκιμή με html και θα σας πω.

Άβαταρ μέλους
Kainourios
Ruby Moderator
Δημοσιεύσεις: 504
Εγγραφή: 18 Μάιος 2005 16:20
Τοποθεσία: Κορυδαλλός
Επικοινωνία:

Hover με εικόνα

Δημοσίευση από Kainourios » 05 Μάιος 2008 21:19

Χμμμ για το πρόβλημα με τον firefox φταίει το ότι δεν έχεις βάλει display:block; όπως είπε και ο dva_dev. Για το πρόβλημα με τον IE τo ότι εξαφανίζεται και εμφανίζεται μετά από λίγο, μάλλον γίνεται τη πρώτη φορά και αυτό γιατί αργεί να φορτώσει την 2η εικόνα. Αν συμβαίνει αυτό ένας απλός τρόπος για να το διορθώσεις είναι ο εξής:

Έστω έχεις τις εικόνες:
Εικόνα
close.gif με διαστάσεις width: 137px.
και

Εικόνα
close_hover.gif με διαστάσεις επίσης width: 137px.

Τις ενώνεις κάνοντας τες τη μία δίπλα στην άλλη όπως εδώ Εικόνα
About-us.gif με διαστάσεις 274px.

και αλλάζεις το css ως εξής:

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

a.closeimage&#123;
display&#58; block;
width&#58; 137px; 
height&#58; 33px; 
background-image&#58; url&#40;About-us.gif&#41;; 
background-repeat&#58; no-repeat; &#125; 

a.closeimage&#58;hover&#123; 
background-position&#58; -137px;
 &#125;
Δηλαδή φορτώνει μια εικόνα και την μετατοπίζει ανάλογα το hover. Γιατί την μετατοπίζει 137px; Γιατί η κάθε μια εικόνα του παραδείγματος έχει width 137px. Ενωμένες έχουν width 274 οπότε φορτώνεται μια εικόνα και μετατοπίζεται στο hover κατά 137px. Υπάρχει και τρόπος με javascript να φορτώνονται οι εικόνες από πριν.

Όσο για το τρόπο με τον php κώδικα, εγώ θα τον έγραφα καλύτερα ως εξής:

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

<?php
echo '<a href="index.php" title="Κλείσιμο" class="closeimage"></a>';
?>
Βάζεις δηλαδή εντός των ' και ' το τι θες να εμφανίσει και γράφεις μέσα ότι θες με " και ". Μου φαίνεται πιο ευκολοδιάβαστο. :)

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

Hover με εικόνα

Δημοσίευση από vassilism » 06 Μάιος 2008 21:25

Πολύ καλύτερη αυτή η εκδοχή, αν και το είχα δει πάλι δεν το είχα δοκιμάσει.
Το δοκίμασα και δουλεύει τέλεια και στον FF και στον IE :victory:
Ευχαριστώ πολύ :D

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

Hover με εικόνα

Δημοσίευση από skeftomilos » 08 Μάιος 2008 17:24

Μπορεί να γίνει preload το δεύτερο image (με JavaScript) για να αποφευχθεί το flicker του πρώτου hover.

O IE6 έχει ένα κόλλημα με τα background images στα links, γι αυτό καλό είναι να προστεθεί στο head αυτός ο κώδικας:

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

<!--&#91;if IE 6&#93;>
  <script type="text/javascript">
    try &#123;document.execCommand&#40;'BackgroundImageCache', false, true&#41;&#125; catch&#40;e&#41; &#123;&#125;
  </script>
<!&#91;endif&#93;-->

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

Hover με εικόνα

Δημοσίευση από vassilism » 08 Μάιος 2008 18:59

skeftomilos έγραψε:Μπορεί να γίνει preload το δεύτερο image (με JavaScript) για να αποφευχθεί το flicker του πρώτου hover.

O IE6 έχει ένα κόλλημα με τα background images στα links, γι αυτό καλό είναι να προστεθεί στο head αυτός ο κώδικας:

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

<!--&#91;if IE 6&#93;>
  <script type="text/javascript">
    try &#123;document.execCommand&#40;'BackgroundImageCache', false, true&#41;&#125; catch&#40;e&#41; &#123;&#125;
  </script>
<!&#91;endif&#93;-->
Να υποθέσω ότι αυτό ισχύει για την δικιά μου εκδοχή έτσι?
Όπως το έχει ο Kainourios είναι εντάξει νομίζω.

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

Hover με εικόνα

Δημοσίευση από skeftomilos » 08 Μάιος 2008 22:56

Αν δεν το βάλεις τότε στο mouseover εμφανίζεται στιγμιαία μια κλεψύδρα, και ο IE6 ζητά το image από τον server ξανά και ξανά. Είναι bug του IE6.

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

Hover με εικόνα

Δημοσίευση από vassilism » 08 Μάιος 2008 23:01

:respect:

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

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

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