CSS Μάθημα 5ο Πρωτότυπα tooltips

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

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

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

CSS Μάθημα 5ο Πρωτότυπα tooltips

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

Μάθημα 5ο Πρωτότυπα tooltips

Για την παρακάτω επιλογή θα χρειαστούμε το ακόλουθο αρχείο javascript tooltip.js και να προσθέσουμε στο css αρχείο μας τον παρακάτω κώδικα:

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

div#qTip {
padding: 3px;
height:15px;
border: 1px solid #666;
display: none;
background:#F5F7FE;
color:#666666;
font: bold 10px Verdana, Arial, Helvetica, sans-serif;
position: absolute;
}
Padding: απόσταση κειμένου από τις άκρες του tooltip
Height: ύψος του tooltip
Border: Περίγραμμα του tooltip 1px μονοκόμματη γραμμή χρώματος #666
Display:none δεν θα εμφανίζεται κατά την φόρτωση της σελίδας
background: χρώμα του tooltip
color: χρώμα γραμμάτων μέσα στο tooltip
font: επιλογές για την γραμματοσειρά
position:absolute τοποθέτηση του tooltip απόλυτη αναλόγως το που βρίσκεται το ποντίκι.
Στο head της ιστοσελίδας θα πρέπει να προσθέσουμε τον παρακάτω κώδικα

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

<script language="JavaScript" src="tooltip.js" type="text/JavaScript"></script>
Το tooltip ισχύει όπου υπάρχει link μέσα στην σελίδα σε κείμενο ή σε ολόκληρο το div.
Live demo

Άβαταρ μέλους
EkLekTos
WebDev Moderator
Δημοσιεύσεις: 7421
Εγγραφή: 07 Απρ 2005 15:44
Τοποθεσία: Inside the Effects
Επικοινωνία:

CSS Μάθημα 5ο Πρωτότυπα tooltips

Δημοσίευση από EkLekTos » 08 Ιουν 2007 18:48

Το έκανα στο wordpress μου αλλά δεν δούλεψε.. :(
* Apple Technical Support Specialist *
* Apple Sales & Product Professional Certificate since 2011 * Εικόνα
Follow me @Twitter

Άβαταρ μέλους
EkLekTos
WebDev Moderator
Δημοσιεύσεις: 7421
Εγγραφή: 07 Απρ 2005 15:44
Τοποθεσία: Inside the Effects
Επικοινωνία:

CSS Μάθημα 5ο Πρωτότυπα tooltips

Δημοσίευση από EkLekTos » 09 Ιουν 2007 02:23

Τώρα που το κοίταξα μου δουλεύει αλλά όχι σε όλα...
Πχ στα άρθρα στον τίτλο δεν δουλεύει.. Γιατί?
* Apple Technical Support Specialist *
* Apple Sales & Product Professional Certificate since 2011 * Εικόνα
Follow me @Twitter

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

CSS Μάθημα 5ο Πρωτότυπα tooltips

Δημοσίευση από manolism » 11 Ιουν 2007 12:09

Μήπως πρέπει να βάλεις το link για το tooltip.js και σε κανένα άλλο αρχείο;

Άβαταρ μέλους
EkLekTos
WebDev Moderator
Δημοσιεύσεις: 7421
Εγγραφή: 07 Απρ 2005 15:44
Τοποθεσία: Inside the Effects
Επικοινωνία:

CSS Μάθημα 5ο Πρωτότυπα tooltips

Δημοσίευση από EkLekTos » 11 Ιουν 2007 15:26

Όπως που?
Και επίσης αν το βάλω και σε άλλο φάκελο με πιο κώδικα θα τα συνδέσω?
* Apple Technical Support Specialist *
* Apple Sales & Product Professional Certificate since 2011 * Εικόνα
Follow me @Twitter

deforme9
Δημοσιεύσεις: 38
Εγγραφή: 18 Απρ 2007 21:29

CSS Μάθημα 5ο Πρωτότυπα tooltips

Δημοσίευση από deforme9 » 11 Ιουν 2007 16:01

lunarmedia έγραψε:Μάθημα 5ο Πρωτότυπα tooltips

Για την παρακάτω επιλογή θα χρειαστούμε το ακόλουθο αρχείο javascript tooltip.js και να προσθέσουμε στο css αρχείο μας τον παρακάτω κώδικα:

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

div#qTip &#123;
padding&#58; 3px;
height&#58;15px;
border&#58; 1px solid #666;
display&#58; none;
background&#58;#F5F7FE;
color&#58;#666666;
font&#58; bold 10px Verdana, Arial, Helvetica, sans-serif;
position&#58; absolute;
&#125;
Padding: απόσταση κειμένου από τις άκρες του tooltip
Height: ύψος του tooltip
Border: Περίγραμμα του tooltip 1px μονοκόμματη γραμμή χρώματος #666
Display:none δεν θα εμφανίζεται κατά την φόρτωση της σελίδας
background: χρώμα του tooltip
color: χρώμα γραμμάτων μέσα στο tooltip
font: επιλογές για την γραμματοσειρά
position:absolute τοποθέτηση του tooltip απόλυτη αναλόγως το που βρίσκεται το ποντίκι.
Στο head της ιστοσελίδας θα πρέπει να προσθέσουμε τον παρακάτω κώδικα

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

<script language="JavaScript" src="tooltip.js" type="text/JavaScript"></script>
Το tooltip ισχύει όπου υπάρχει link μέσα στην σελίδα σε κείμενο ή σε ολόκληρο το div.
Live demo
Παντού υπάρχει ένας absolute :lol: :lol: :lol:

Άβαταρ μέλους
chaldofbh
Δημοσιεύσεις: 117
Εγγραφή: 01 Μαρ 2007 10:03
Τοποθεσία: Athens
Επικοινωνία:

CSS Μάθημα 5ο Πρωτότυπα tooltips

Δημοσίευση από chaldofbh » 12 Ιουν 2007 10:18

wraio tip, thanx
I have no idea what i want... but i would do anything to get it...

Guild
Portfolio

Άβαταρ μέλους
chaldofbh
Δημοσιεύσεις: 117
Εγγραφή: 01 Μαρ 2007 10:03
Τοποθεσία: Athens
Επικοινωνία:

CSS Μάθημα 5ο Πρωτότυπα tooltips

Δημοσίευση από chaldofbh » 12 Ιουν 2007 12:25

Μια παρατήρηση, έβαλα τον συγκεκριμένο κώδικα σε μια πρόχειρη ιστοσελίδα που διατηρώ την: προσωπική σελίδα

Σε Mozilla Firefox 2.0.2 δουλεύει τέλεια, σε Internet explorer όμως έχει ένα μικρό προβληματάκι, εμφανίζετε και η τιμή της ιδιότητας "alt" του tag "img".

Καμία πρόταση για το πώς να ξεπεραστεί αυτό το θέμα
I have no idea what i want... but i would do anything to get it...

Guild
Portfolio

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

CSS Μάθημα 5ο Πρωτότυπα tooltips

Δημοσίευση από patriot » 12 Ιουν 2007 12:55

chaldofbh έγραψε:Μια παρατήρηση, έβαλα τον συγκεκριμένο κώδικα σε μια πρόχειρη ιστοσελίδα που διατηρώ την: προσωπική σελίδα

Σε Mozilla Firefox 2.0.2 δουλεύει τέλεια, σε Internet explorer όμως έχει ένα μικρό προβληματάκι, εμφανίζετε και η τιμή της ιδιότητας "alt" του tag "img".

Καμία πρόταση για το πώς να ξεπεραστεί αυτό το θέμα
Πολύ απλά σβήσε το μήνυμα που υπάρχει μέσα στο alt (δηλ αυτό: alt="σβήσε με"). Ή το θες τόσο πολύ;
Τελευταία επεξεργασία από το μέλος patriot την 12 Ιουν 2007 16:52, έχει επεξεργασθεί 1 φορά συνολικά.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
chaldofbh
Δημοσιεύσεις: 117
Εγγραφή: 01 Μαρ 2007 10:03
Τοποθεσία: Athens
Επικοινωνία:

CSS Μάθημα 5ο Πρωτότυπα tooltips

Δημοσίευση από chaldofbh » 12 Ιουν 2007 13:44

Αυτό λέω και εγώ να κάνω, αλλά είπα να δω μήπως υπάρχει κάποιος άλλος τρόπος γιατί είναι καλό το alt μην είναι κενό για τις Search engines
I have no idea what i want... but i would do anything to get it...

Guild
Portfolio

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

CSS Μάθημα 5ο Πρωτότυπα tooltips

Δημοσίευση από skeftomilos » 12 Ιουν 2007 14:30

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

<img src="image.gif" alt="Κείμενο" title="">
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

CSS Μάθημα 5ο Πρωτότυπα tooltips

Δημοσίευση από manolism » 12 Ιουν 2007 15:09

To title είναι αυτό που δίνει το κείμενο στο tooltip.

Άβαταρ μέλους
chaldofbh
Δημοσιεύσεις: 117
Εγγραφή: 01 Μαρ 2007 10:03
Τοποθεσία: Athens
Επικοινωνία:

CSS Μάθημα 5ο Πρωτότυπα tooltips

Δημοσίευση από chaldofbh » 13 Ιουν 2007 09:57

skeftomilos έγραψε:

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

<img src="image.gif" alt="Κείμενο" title="">
Απλό και αποτελεσματικό ty
I have no idea what i want... but i would do anything to get it...

Guild
Portfolio

mariosal
Honorary Member
Δημοσιεύσεις: 1473
Εγγραφή: 09 Νοέμ 2007 23:55

CSS Μάθημα 5ο Πρωτότυπα tooltips

Δημοσίευση από mariosal » 29 Μαρ 2008 14:58

Εγώ πάντως δεν μπορώ να το βάλω. Στο phpBB 3.0.0 forum μου.

mf_iii
Δημοσιεύσεις: 398
Εγγραφή: 07 Σεπ 2007 23:45

CSS Μάθημα 5ο Πρωτότυπα tooltips

Δημοσίευση από mf_iii » 09 Ιουν 2008 00:34

Αν αντι σκετο tooltip θελουμε να εχουμε μια εικονα (ενα balloon δηλαδη) κι εκει μεσα να γραφεται το link η ο,τι θελουμε πως γινεται ?

Απάντηση

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

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

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