rollover buttons δεν φορτώνουν έγκαιρα

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

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

Απάντηση
heavyaris
Δημοσιεύσεις: 295
Εγγραφή: 15 Απρ 2008 21:31

rollover buttons δεν φορτώνουν έγκαιρα

Δημοσίευση από heavyaris » 24 Ιαν 2011 01:40

παιδιά, έβαλα σε ένα μενού rollover buttons, αλλά δεν φαίνεται να φορτώνει έγκαιρα το "δευτερο" κουμπί που πρέπει να φορτώσει μόλις πάει ο κέρσορας απο πάνω, άργεί ένα δευτερολεπτο περίπου...

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

<title>
<script type="text/javascript">
function MM_swapImgRestore&#40;&#41; &#123; //v3.0
  var i,x,a=document.MM_sr; for&#40;i=0;a&&i<a.length&&&#40;x=a&#91;i&#93;&#41;&&x.oSrc;i++&#41; x.src=x.oSrc;
&#125;
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;

function MM_findObj&#40;n, d&#41; &#123; //v4.01
  var p,i,x;  if&#40;!d&#41; d=document; if&#40;&#40;p=n.indexOf&#40;"?"&#41;&#41;>0&&parent.frames.length&#41; &#123;
    d=parent.frames&#91;n.substring&#40;p+1&#41;&#93;.document; n=n.substring&#40;0,p&#41;;&#125;
  if&#40;!&#40;x=d&#91;n&#93;&#41;&&d.all&#41; x=d.all&#91;n&#93;; for &#40;i=0;!x&&i<d.forms.length;i++&#41; x=d.forms&#91;i&#93;&#91;n&#93;;
  for&#40;i=0;!x&&d.layers&&i<d.layers.length;i++&#41; x=MM_findObj&#40;n,d.layers&#91;i&#93;.document&#41;;
  if&#40;!x && d.getElementById&#41; x=d.getElementById&#40;n&#41;; return x;
&#125;

function MM_swapImage&#40;&#41; &#123; //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for&#40;i=0;i<&#40;a.length-2&#41;;i+=3&#41;
   if &#40;&#40;x=MM_findObj&#40;a&#91;i&#93;&#41;&#41;!=null&#41;&#123;document.MM_sr&#91;j++&#93;=x; if&#40;!x.oSrc&#41; x.oSrc=x.src; x.src=a&#91;i+2&#93;;&#125;
&#125;
</script>
και το κάθε κουμπί του μενού:

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

 <div id="home"><a href="index.php"   onmouseout="MM_swapImgRestore&#40;&#41;" onmouseover="MM_swapImage&#40;'home','','images/2home.png',1&#41;"><img src="images/home.png"
 name="home" width="70" height="50" border="0" id="home2" /></a></div>
τι πρέπει να διορθώσω;
ευχαριστώ.
Τελευταία επεξεργασία από το μέλος heavyaris την 24 Ιαν 2011 10:30, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

rollover buttons δεν φορτώνουν έγκαιρα

Δημοσίευση από Khronos » 24 Ιαν 2011 09:12


heavyaris
Δημοσιεύσεις: 295
Εγγραφή: 15 Απρ 2008 21:31

rollover buttons δεν φορτώνουν έγκαιρα

Δημοσίευση από heavyaris » 24 Ιαν 2011 10:30

ευχαριστώ,ίσως δεν είμουν σαφής στον τίτλο, εννοούσα οτι "δεν φορτώνουν εγκαιρα"

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

rollover buttons δεν φορτώνουν έγκαιρα

Δημοσίευση από korgr » 24 Ιαν 2011 10:44

Αυτό που σου πρότεινε ο Khronos είναι η πλέον σύγχρονη και αποδοτική λύση στο πρόβλημα σου.
Για την ιστορία το SwapImage του DW είναι αντιμετώπιση δεκαετίας.
Το παρατήσαμε όταν η css λύση που μας δώθηκε ήταν το:

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

.button&#123;
background&#58; url&#40;image.png&#41; no-repeat;
width&#58; 180px;
height&#58; 20px;
&#125;
.button&#58;hover&#123;
background&#58; url&#40;imageHover.png&#41; no-repeat;
&#125;
Τώρα η καλύτερη λύση είναι με sprites. Διάβασε το link είναι πολύ καλό!

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

rollover buttons δεν φορτώνουν έγκαιρα

Δημοσίευση από Khronos » 24 Ιαν 2011 10:45

Αν το κάνεις με sprites δηλαδή να είναι στο ίδιο image και το rollover, θα έχει ήδη φορτώσει.

Edit. Με πρόλαβε ο korgr :P

heavyaris
Δημοσιεύσεις: 295
Εγγραφή: 15 Απρ 2008 21:31

rollover buttons δεν φορτώνουν έγκαιρα

Δημοσίευση από heavyaris » 24 Ιαν 2011 11:22

παιδιά, σας ευχαριστώ πάρα πολύ για το λίνκ και τις απαντήσεις, όντως έτσι θα γίνει την επόμενη φορά, απλά επειδή το site έχει τελειώσει σχεδόν, θα ήθελα να παλέψω να διορθώσω το MM_preloadImages που φαίνεται να μην φορτώνει κάν.
στο firebug βγάζει "aborted", μήπως υπάρχει περιορισμός στο μέγεθος; επειδή (πολύ κακώς) άφησα τα κουμπιά .png και το κάθε ένα ειναι 60-70kb, έχω 7 κουμπιά χ 2 τα rollover = 14 * 70 kb = σχεδον 1 mb ειναι μόνο τα κουμπιά τώρα που το σκέφτομαι (!)

heavyaris
Δημοσιεύσεις: 295
Εγγραφή: 15 Απρ 2008 21:31

rollover buttons δεν φορτώνουν έγκαιρα

Δημοσίευση από heavyaris » 24 Ιαν 2011 12:30

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

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

#home &#123;
	background&#58; url&#40;images/home.jpg&#41; no-repeat; 
	float&#58; left;
	left&#58;0px;
	top&#58;210px;
	width&#58;70px;
	height&#58;50px;
&#125;
#home &#58;hover&#123;
background&#58; url&#40;images/2home.jpg&#41; no-repeat;
&#125;
και

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

<div id="home"><a href="index.php"></a></div>
άλλα δεν αλλάζει κάτι μόλις πάω με τον κέρσορα απο πάνω, τι μου διαφέυγει; ούτε κάν σύνδεσμος υπάρχει..
ευχαριστώ.

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

rollover buttons δεν φορτώνουν έγκαιρα

Δημοσίευση από korgr » 24 Ιαν 2011 12:42

Εγώ το κάνω μόνο με <a> και παίζω με το display:block

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

.btn1 &#123;
display&#58;block;
background&#58; url&#40;images/home.jpg&#41; no-repeat; 
width&#58;70px;
height&#58;50px;
&#125;
.btn1&#58;hover&#123;
background&#58; url&#40;images/2home.jpg&#41; no-repeat;
&#125;

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

<a href="index.php" class="btn1"></a>
<a href="contact.php" class="btn2"></a>
Φυσικά μπορείς να το κάνεις και με unordered list, αλλά μάθε πρώτα καλά την μέθοδο και μετά την εφαρμόζεις όπου θες.

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

rollover buttons δεν φορτώνουν έγκαιρα

Δημοσίευση από cherouvim » 24 Ιαν 2011 13:48

heavyaris έγραψε:

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

#home &#58;hover&#123;
background&#58; url&#40;images/2home.jpg&#41; no-repeat;
&#125;
... άλλα δεν αλλάζει κάτι μόλις πάω με τον κέρσορα απο πάνω...
Το :hover pseudoclass δεν το έχεις βάλει πάνω στο #home. Αφαίρεσε το κενό μεταξύ του #home και του :hover.

Να σημειωθεί οτι έτσι όπως το κάνεις δεν έχεις sprite. Το "δευτερόλεπτο" φόρτωσης θα υφίσταται και σε αυτή τη περίπτωση. Αυτό που πρέπει να κάνεις για να γίνει preload η εικόνα της hover κατάστασης είναι να έχεις 1 φυσικό αρχείο εικόνας στο server το οποίο να περιλαμβάνει και τις 2 εικόνες και να δουλέψεις με το background-position css property.

Δες το http://www.ejhweb.com/css-sprites.html που είναι κάπως πιο μαζεμένο και μετά αν έχεις όρεξη το http://www.alistapart.com/articles/sprites

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

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

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