11. december 2004 - 01:16Der er
27 kommentarer og 1 løsning
Forkortelse af funktion - JavaScript
Hej eksperter.
Jeg har en funktion. Men jeg synes egentligt at det er lidt mærkeligt, at man skal lave et så stort arbejde.
button0up = new Image; button0up.src = "img/strenge.gif" button0down = new Image; button0down.src = "img/strenge_aktiv.gif" button1up = new Image; button1up.src = "img/tangent.gif" button1down = new Image; button1down.src = "img/tangent_aktiv.gif" button2up = new Image; button2up.src = "img/studie.gif" button2down = new Image; button2down.src = "img/studie_aktiv.gif" button3up = new Image; button3up.src = "img/hoejtaler.gif" button3down = new Image; button3down.src = "img/hoejtaler_aktiv.gif" button4up = new Image; button4up.src = "img/blaese.gif" button4down = new Image; button4down.src = "img/blaese_aktiv.gif" button5up = new Image; button5up.src = "img/slagtoej.gif" button5down = new Image; button5down.src = "img/slagtoej_aktiv.gif" button6up = new Image; button6up.src = "img/forstaerker.gif" button6down = new Image; button6down.src = "img/forstaerker_aktiv.gif" button7up = new Image; button7up.src = "img/computer.gif" button7down = new Image; button7down.src = "img/computer_aktiv.gif"
function MouseOverRoutine(ButtonName) { if (ButtonName=="button0") {document.button0.src = button0down.src;} if (ButtonName=="button1") {document.button1.src = button1down.src;} if (ButtonName=="button2") {document.button2.src = button2down.src;} if (ButtonName=="button3") {document.button3.src = button3down.src;} if (ButtonName=="button4") {document.button4.src = button4down.src;} if (ButtonName=="button5") {document.button5.src = button5down.src;} if (ButtonName=="button6") {document.button6.src = button6down.src;} if (ButtonName=="button7") {document.button7.src = button7down.src;} if (ButtonName=="button8") {document.button8.src = button8down.src;} if (ButtonName=="button9") {document.button9.src = button9down.src;} if (ButtonName=="button10") {document.button10.src = button10down.src;} if (ButtonName=="button11") {document.button11.src = button11down.src;} }
function MouseOutRoutine(ButtonName) { if (ButtonName=="button0") {document.button0.src = button0up.src;} if (ButtonName=="button1") {document.button1.src = button1up.src;} if (ButtonName=="button2") {document.button2.src = button2up.src;} if (ButtonName=="button3") {document.button3.src = button3up.src;} if (ButtonName=="button4") {document.button4.src = button4up.src;} if (ButtonName=="button5") {document.button5.src = button5up.src;} if (ButtonName=="button6") {document.button6.src = button6up.src;} if (ButtonName=="button7") {document.button7.src = button7up.src;} if (ButtonName=="button8") {document.button8.src = button8up.src;} if (ButtonName=="button9") {document.button9.src = button9up.src;} if (ButtonName=="button10") {document.button10.src = button10up.src;} if (ButtonName=="button11") {document.button11.src = button11up.src;}
Kan dette ikke gøres på en nemmere måde? såsom noget hvor funktionen bliver brugt, sådan at man skriver MouseOverRoutine(button1) MouseOverRoutine(Button2)
osv.
Hvor den går ind og finder tingene i en variable, fremfor at man skal skrive ifsætninger til hver eneste "mouseover" ting der skal laves.
jo, du kan prøve: var urlArray = ["img/strenge.gif","img/strenge_aktiv.gif","img/tangent.gif","img/tangent_aktiv.gif"]; var imgArray = new Array(); function preloadImages() { for (i=0;i<urlArray.length;i++) { imgArray[i] = new Image(); imgArray[i].src = urlArray[i]; }
} function MouseOverRoutine(num) { document.images["button"+num].src = urlArray[num*2]; } function MouseOutRoutine(num) { document.images["button"+num].src = urlArray[num*2+1]; }
Hvor urlArray() er et array med alle de url du har skrevet ovenfor (de skal stå i rigtig rækkefølge vel at mærke). Hvis vi går ud fra alle dine billeder hedder button+et nummer, så kan vi lave begge dine funktioner så du skal kalde dem således: MouseOverRoutine(1) (henvender sig til button1)
Hmm skovenborg, den der går galt for mig. Jeg har lavet det sådan her.
var urlArray = ["img/button1.gif","img/button1_aktiv.gif","img/button2.gif","img/button2_aktiv.gif","img/button3.gif","img/button3_aktiv.gif","img/button4.gif","img/button4_aktiv.gif","img/button5.gif","img/button5_aktiv.gif","img/button6.gif","img/button6_aktiv.gif","img/button7.gif","img/button7_aktiv.gif","img/button8.gif","img/button8_aktiv.gif","img/button9.gif","img/button9_aktiv.gif","img/button10.gif","img/button10_aktiv.gif","img/button11.gif","img/button11_aktiv.gif","img/button12.gif","img/button12_aktiv.gif"]; var imgArray = new Array(); function preloadImages() { for (i=0;i<urlArray.length;i++) { imgArray[i] = new Image(); imgArray[i].src = urlArray[i]; }
} function MouseOverRoutine(num) { document.images["button"+num].src = urlArray[num*2]; } function MouseOutRoutine(num) { document.images["button"+num].src = urlArray[num*2+1]; }
ser dine billeder sådan ud: <img name="button0" src="img/etellerandet.gif"> hvis du bruger id'er istedet for name, så skal scriptet nemlig se sådan ud: function MouseOverRoutine(num) { document.getElementById("button"+num).src = urlArray[num*2]; } function MouseOutRoutine(num) { document.getElementById("button"+num).src = urlArray[num*2+1]; }
det var nu meningen du bare skulle bruge tal ikke tekst-strenge som argument: <a onmouseOver="MouseOverRoutine(1)" onmouseOut="MouseOutRoutine(1)" href="#">
Hvis der stod anførselstegn omkring ville det blive opfattet som tekst, ikke tal, og derfor går det nok galt når du skriver num*2. Ellers ser det meget rigtigt ud.
hmm, der skulle jo stå: function MouseOverRoutine(num) { document.images["button"+num].src = urlArray[num*2]; } function MouseOutRoutine(num) { document.images["button"+num].src = urlArray[num*2+1]; }
og så skal dit url-array være ligesom 11/12-2004 01:53:14. Forresten glemte jeg lige at preloade billederne sidste gang: function preloadImages() { for (i=0;i<urlArray.length;i++) { imgArray[i] = new Image(); imgArray[i].src = urlArray[i]; }
ok - jeg laver det nøjagtigt som du skriver, så skriver jeg lige igen så du kan se problemet. Jeg har jo selv siddet og leget lidt med problemet, så derfor er det ikke helt korrekt mere hehe :D
jeg har kigget lidt på den side du testede det af på (ikke helt opdateret måske), men tror jeg har fundet fejlene.
Først og fremmest skal du have det fulde urlArray(), for at det skal virke: var urlArray = ["img/button1.gif","img/button1_aktiv.gif","img/button2.gif","img/button2_aktiv.gif","img/button3.gif","img/button3_aktiv.gif","img/button4.gif","img/button4_aktiv.gif","img/button5.gif","img/button5_aktiv.gif","img/button6.gif","img/button6_aktiv.gif","img/button7.gif","img/button7_aktiv.gif","img/button8.gif","img/button8_aktiv.gif","img/button9.gif","img/button9_aktiv.gif","img/button10.gif","img/button10_aktiv.gif","img/button11.gif","img/button11_aktiv.gif","img/button12.gif","img/button12_aktiv.gif"];
Derefter er der lidt problemmer med index'et i arrayet, da du starter med tallet 1 og jeg troede i starten det var 0 du startede med. Desuden byttede jeg om på hvad der var det aktive-billede og det inaktive, så de to funktioner kommer derfor til at se sådan ud: function MouseOverRoutine(num) { document.images["button"+num].src = urlArray[(num-1)*2+1]; } function MouseOutRoutine(num) { document.images["button"+num].src = urlArray[(num-1)*2]; }
Jeg vil lige høre dig, nu jeg har fat i dig. Ved du hvorfor der er forskel i pixelmål fra IE til Mozilla? Jeg har lavet en mouseoverting i css - til den tekst der kommer frem når man markere et af de billeder vi lige har lavet mouseover til.
Men - i IE passer teksten ind på baggrunden, men i mozilla er den skubbet længere ned, så den ikke længere passer ind på baggruden, men står nærmest nede i menubillerne.
Og endnu engang tak for en "fuldt til døren" besvarelse.
der er som sådan ikke forskel på pixelmålene, men mere opfattelsen af css'en som er forskellig. Tit skabes sådan nogle problem af de to browseres forskellige opfattelse af margin, padding og den slags (ikke fordi de altid er forskellig, men det hænder jo ;-)
Jeg kan umiddelbart ikke sige hvad du skal rette medmindre jeg ser siden du prøver det af på, så hvis du evt. kunne oploade eksemplet på den der http://fjappe.adsl.dk/site/ side, kunne det være jeg ville kigge på det (kan ikke love jeg finder ud af noget, men ellers kan du vel starte et nyt spørgsmål).
Grunden til jeg sætter div#links til position:relative er at de små span-bokse vil blive positioneret efter den og ikke siden (eller et andet relativt element). Så var det egentlig bare at lave en anden placering, og så laver jeg dem om til inline-elementer istedet for block, da span's alligevel normalt er inline-elementer.
Da inline-elementer er elementer uden de forskellige boks-egenskaber (som margin,padding og width/height), så kan vi godt droppe dem - og dog. For IE laver her, i mine og efter standardens øjne, en fejl ved at width har en indvirkning på inline-elementer, hvilket faktisk er forkert.
Men løsningen var bare at sætte en tilpas bredde på - firefox er ligeglad ;-) Håber det virker nu (bedre i hvert fald)
Du kan se forskellen her i dette spørgsmål: http://eksperten.dk/spm/462438 Men det tager lang tid at lære css bare nogenlunde, og hvis man virkelig skal gå ind i emnet ville det tage flere års læsning af w3c - og det kan jeg heller ikke selv påstå at have gjort. Men du lærer ret meget af at støde i den slags problemmer og fifle lidt med mulige løsninger - så lærer du efterhånden hvad der typisk kan gøres :-)
Jeg som var så stolt af min css hover effekt. Hehe, men ja, jeg lærte da en del da jeg legede med det. Selvom det også var et spørgsmål for mig her på eksperten.
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.
