css rollover image

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

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

Απάντηση
Fouli_B
Δημοσιεύσεις: 271
Εγγραφή: 10 Ιαν 2004 12:23
Τοποθεσία: θεσσαλονίκη
Επικοινωνία:

css rollover image

Δημοσίευση από Fouli_B » 30 Οκτ 2004 20:12

γεια σας, έφτιαξα ένα rollover menu χρησιμοποιώντας CSS. Κάθε link έχει ξεχωριστή εικόνα και δική του rollover εικόνα. (αν θέλετε δείτε το εδώ ). Το πρόβλημα είναι ότι αργούν να φορτώσουν τα rollover ή στην χειρότερη περίπτωση δεν φορτώνουν καθόλου.Που κάνω λάθος;
Ευχαριστώ πολύ

[το site δεν είναι τελειωμένο]
Τελευταία επεξεργασία από το μέλος Fouli_B την 24 Ιουν 2005 00:24, έχει επεξεργασθεί 1 φορά συνολικά.
Εικόνα

Άβαταρ μέλους
geraki
Honorary Member
Δημοσιεύσεις: 1404
Εγγραφή: 26 Ιαν 2004 20:10
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

css rollover image

Δημοσίευση από geraki » 30 Οκτ 2004 21:04

Θα πρέπει να βάλεις ένα javascript για να φορτώνει από πριν τις rollover εικόνες.
Εικόνα ← Αυτό το έκλεψα απ'τον Eneme.

Άβαταρ μέλους
geraki
Honorary Member
Δημοσιεύσεις: 1404
Εγγραφή: 26 Ιαν 2004 20:10
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

css rollover image

Δημοσίευση από geraki » 30 Οκτ 2004 21:11

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

-------- HEAD --------

<script language="JavaScript">
function MM_preloadImages&#40;&#41; &#123; //v3.0
  var d=document; if&#40;d.images&#41;&#123; if&#40;!d.MM_p&#41; d.MM_p=new Array&#40;&#41;;
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for&#40;i=0; i<a.length; i++&#41;
    if &#40;a&#91;i&#93;.indexOf&#40;"#"&#41;!=0&#41;&#123; d.MM_p&#91;j&#93;=new Image; d.MM_p&#91;j++&#93;.src=a&#91;i&#93;;&#125;&#125;
&#125;
</script>

------------------------

<body onLoad="MM_preloadImages&#40;'images/home.gif','images/researchroll.gif','images/supportdown.gif',
'images/drastroll.gif','images/mail.gif'&#41;" style="margin&#58; 0;">

Κώδικας από το Dreamweaver.

Επίσης τώρα που το θυμήθηκα μπορείς να κάνεις αυτό και να γλιτώσεις το javascript, αλλά πρέπει να ενώσεις τις εικόνες: http://wellstyled.com/css-nopreload-rollovers.html
Τελευταία επεξεργασία από το μέλος geraki την 30 Οκτ 2004 21:35, έχει επεξεργασθεί 1 φορά συνολικά.
Εικόνα &#8592; Αυτό το έκλεψα απ'τον Eneme.

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

css rollover image

Δημοσίευση από xmavidis » 30 Οκτ 2004 21:30

Πολύ χρήσιμο! :-P
I want to know God’s thoughts; the rest are details.
Albert Einstein

Fouli_B
Δημοσιεύσεις: 271
Εγγραφή: 10 Ιαν 2004 12:23
Τοποθεσία: θεσσαλονίκη
Επικοινωνία:

css rollover image

Δημοσίευση από Fouli_B » 31 Οκτ 2004 02:33

σε ευχαριστώ πάρα πολύ για την άμεση απάντησή σου geraki, απέφυγα την javascript, αν και έχω για validation form. ακολούθησα τις οδηγίες του link που μου έδωσες και ένωσα τις φωτογραφίες, όπως είπες. αν θες ακολούθησε το link που έδωσα πιο πάνω να το δείς
:pint: :pint: :pint: :pint:
xmanidis έγραψε:πολύ χρήσιμο :P
πραγματικά πολύ χρήσιμο

Άβαταρ μέλους
Rapid-eraser
WebDev Moderator
Δημοσιεύσεις: 6851
Εγγραφή: 05 Απρ 2003 17:50
Τοποθεσία: Πειραιάς
Επικοινωνία:

css rollover image

Δημοσίευση από Rapid-eraser » 31 Οκτ 2004 02:59

vai vai afto me to css eivai para poli kali idea !!!
Cu, Rapid-eraser, Tα αγαθά copies κτώνται.
Love is like oxygen, You get too much you get too high
Not enough and you're gonna die, Love gets you high

Άβαταρ μέλους
geraki
Honorary Member
Δημοσιεύσεις: 1404
Εγγραφή: 26 Ιαν 2004 20:10
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

css rollover image

Δημοσίευση από geraki » 31 Οκτ 2004 18:17

Ναι είναι πολύ γρήγορο.

@fouli

Νομίζω δεν είναι καλή ιδέα να έχεις classes με ονόματα style1 style2 κλπ. και να τα χρησιμοποιείς αθροιστικά. Καλύτερα να έχεις onoma email mhnyma κλπ.

π.χ. Έχεις:

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

<td class="style5 style4  style6">τ<span class="style7">ο μήνυμα σας </span></td>
όπου:

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

.style5 &#123;font-family&#58; "Times New Roman", Times, serif; color&#58; #00CCCC; &#125;
.style4 &#123;
	color&#58; #009191;
	font-weight&#58; bold;
&#125;
.style6 &#123;
	color&#58; #009191;
	font-size&#58; 12px;
&#125;
.style7 &#123;color&#58; #006699&#125;
Έτσι τα μπλέκεις πολύ. Καλύτερα θα ήταν έτσι:

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

.mynhma &#123;font-family&#58; "Times New Roman", Times, serif;  font-weight&#58; bold; font-size&#58; 12px; color&#58; #009191;&#125;
.arxikogramma &#123;color&#58; #006699&#125;
και

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

<td class="mhnyma"><span class="arxikogramma">τ</span>ο μήνυμα σας</td>
Ετσι αλλάζεις εύκολα μόνο αυτό που θέλεις, ξέρεις τί χρησιμοποιείται πού, και classes όπως το arxikogramma μπορούν να χρησιμοποιηθούν και σε άλλα σημεία.

Κοίταξε λίγο και τα divs, σε firefox η φόρμα βγαίνει πολύ χαμηλά.
Εικόνα &#8592; Αυτό το έκλεψα απ'τον Eneme.

Fouli_B
Δημοσιεύσεις: 271
Εγγραφή: 10 Ιαν 2004 12:23
Τοποθεσία: θεσσαλονίκη
Επικοινωνία:

css rollover image

Δημοσίευση από Fouli_B » 02 Νοέμ 2004 19:47

Η αλήθεια είναι ότι παιδεύτηκα πάρα πολύ για να καταφέρω να φαίνεται σωστά η σελίδα και με το firefox. Ουσιαστικά την έφτιαξα από την αρχή και την δοκίμαζα και στους δυο browsers. Σωστά επίσης βγαίνει και με το opera 7. Tελικά δοκιμάζοντας σε διαφορετικούς browsers μαθαίνεις καλύτερα πως συμπεριφέρεται το css.
Άλλαξα τα style σε class, όντως είναι πιο σωστό να ελέγχεται η σελίδα από μια πηγή.
Αν τη δεις, σε firefox , θα δεις και το imput:focus κάτι που στον ie δεν βγαίνει.
όμως γιατί φαίνεται όπως την φτιάχνεις στο preview του dreamweaver και με τους δυο browsers και όταν την κατεβάζεις στον server έχει διαφορές;
πχ, τα textfield, textarea εγώ τα έχω δεξιά και τώρα φαίνονται αριστερά.
geraki, σε ευχαριστω πάρα πολύ για την βοήθεια, ήταν πραγματικά ουσιαστική
ελπίζω βέβαια να μη σε κούρασα

Άβαταρ μέλους
geraki
Honorary Member
Δημοσιεύσεις: 1404
Εγγραφή: 26 Ιαν 2004 20:10
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

css rollover image

Δημοσίευση από geraki » 02 Νοέμ 2004 22:59

At your service. 8)
Εικόνα &#8592; Αυτό το έκλεψα απ'τον Eneme.

Απάντηση

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

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

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