Avatar billede dehaas Nybegynder
18. april 2005 - 20:20 Der er 19 kommentarer og
2 løsninger

Skift billede når man trykker på det

Hej,

Jeg har aldrig fær beskæftiget mig med JavaScript, og har derfor brug for at færdigt script.

Den skal skifte det billede man trykker på til at nyt, når man trykker på det.
Avatar billede mikkelk Nybegynder
18. april 2005 - 20:26 #1
<img src="etbillede.jpg" onclick="this.src='etandetbillede.jpg';">
Avatar billede mikkelk Nybegynder
18. april 2005 - 20:34 #2
Det var iøvrigt et svar :-) det glemmer jeg altid.
Avatar billede dehaas Nybegynder
18. april 2005 - 20:41 #3
Hmm... altså, den henter det første billede rigtigt nok, men den skifter ikke billedet når man trykker på det.
Avatar billede mikkelk Nybegynder
18. april 2005 - 20:42 #4
jo den gør...har lige testet det :-)
Har du den helt rigtige henvisning til billede nr. 2?
Avatar billede mikkelk Nybegynder
18. april 2005 - 20:44 #5
Prøv at smid din kode her
Avatar billede dehaas Nybegynder
18. april 2005 - 20:46 #6
Hmm... jeg arbejder i Macromedia Dreamweaver, og den sætter rød streg under onclick="this.src="

jeg er helt sikker på at stien er rigtig.
Avatar billede mikkelk Nybegynder
18. april 2005 - 20:49 #7
Ok. Kender desværre intet til Macromedia Dreamweaver, men den kode jeg har givet burde virke. Kan man ikke få MD til at vise koden?
Avatar billede mikkelk Nybegynder
18. april 2005 - 20:51 #8
Tjek evt. at MD ikke roder rundt i " og '
Avatar billede dehaas Nybegynder
18. april 2005 - 21:04 #9
sorry, det var min fejl, dit script virker helt fint. Men har lige et tillægs spørgsmål, skal naturligvis nok afsætte lidt flere point.

Der skal bruges til menuknapper, og de skal dermed skifte tilbage til det originale billede, når man trykker på et nyt menupunkt.

se evt. http://www.bavianfan.dk/beta/beta , jag har sat JavaScriptet ind på de 2 første knapper

Hvordan laver jeg så dette?
Avatar billede mikkelk Nybegynder
18. april 2005 - 21:44 #10
<script>
    imgArr = new Array(2);
    imgAltArr = new Array(2);
imgArr[1] = 'menu1.gif';
imgAltArr[1] = 'menu1alternativ.gif';
imgArr[2] = 'menu2.gif';
imgAltArr[2] = 'menu2alternativ.gif';
function imgSkift(id){
    for(i=1;i< imgArr.length ;i++){
    oImg = document.getElementById("menuKnap" + i)
    if(i == id){
        if(oImg.src == imgAltArr[i]){
        oImg.src = imgArr[i];
        } else {
        oImg.src = imgAltArr[i];
        }
    } else {
        oImg.src = imgArr[i];
    }
    }
}
</script>
<img src="menu1.gif" id="menuKnap1" onclick="imgSkift(1);">
<img src="menu2.gif" id="menuKnap2" onclick="imgSkift(2);">
Avatar billede mikkelk Nybegynder
18. april 2005 - 21:45 #11
Det skal så bare udvides...
Bare læg et ekstra nummer til alle steder når du tilføjer nye menupunkter...
Avatar billede mikkelk Nybegynder
18. april 2005 - 21:47 #12
Håber du får det til at virke :-)
Ellers vil jeg da gerne lige rette en stump kode til så den passer helt 100% til din side, men har ikke tid før i morgen aften.

Smutter nu og er først tilbage imorgen.
Avatar billede mikkelk Nybegynder
18. april 2005 - 21:48 #13
Held og lykke og god fornøjelse med det :-)
Avatar billede dehaas Nybegynder
19. april 2005 - 20:37 #14
Hmm... nu har jeg prøvet mig lidt frem, og fået lavet dit script om, så der nu ser sådan ud.

<script>
    imgArr = new Array(10);
    imgAltArr = new Array(10);
imgArr[1] = 'grafik\03.jpg';
imgAltArr[1] = 'grafik\03_hover.jpg';
imgArr[2] = 'grafik\04.jpg';
imgAltArr[2] = 'grafik\04_hover.jpg';
imgArr[3] = 'grafik\05.jpg';
imgAltArr[3] = 'grafik\05_hover.jpg';
imgArr[4] = 'grafik\06.jpg';
imgAltArr[4] = 'grafik\06_hover.jpg';
imgArr[5] = 'grafik\07.jpg';
imgAltArr[5] = 'grafik\07_hover.jpg';
imgArr[6] = 'grafik\08.jpg';
imgAltArr[6] = 'grafik\08_hover.jpg';
imgArr[7] = 'grafik\09.jpg';
imgAltArr[7] = 'grafik\09_hover.jpg';
imgArr[8] = 'grafik\10.jpg';
imgAltArr[8] = 'grafik\10_hover.jpg';
imgArr[9] = 'grafik\11.jpg';
imgAltArr[9] = 'grafik\11_hover.jpg';
imgArr[10] = 'grafik\12.jpg';
imgAltArr[10] = 'grafik\12_hover.jpg';
function imgSkift(id){
    for(i=1;i< imgArr.length ;i++){
    oImg = document.getElementById("menuKnap" + i)
    if(i == id){
        if(oImg.src == imgAltArr[i]){
        oImg.src = imgArr[i];
        } else {
        oImg.src = imgAltArr[i];
        }
    } else {
        oImg.src = imgArr[i];
    }
    }
}
</script>
<img src="grafik\03.jpg" id="menuKnap1" onclick="imgSkift(1);">
<img src="grafik\04.jpg" id="menuKnap2" onclick="imgSkift(2);">
<img src="grafik\05.jpg" id="menuKnap3" onclick="imgSkift(3);">
<img src="grafik\06.jpg" id="menuKnap4" onclick="imgSkift(4);">
<img src="grafik\07.jpg" id="menuKnap5" onclick="imgSkift(5);">
<img src="grafik\08.jpg" id="menuKnap6" onclick="imgSkift(6);">
<img src="grafik\09.jpg" id="menuKnap7" onclick="imgSkift(7);">
<img src="grafik\10.jpg" id="menuKnap8" onclick="imgSkift(8);">
<img src="grafik\11.jpg" id="menuKnap9" onclick="imgSkift(9);">
<img src="grafik\12.jpg" id="menuKnap10" onclick="imgSkift(10);">

men det virker ikke, de hvad der sker på http://www.bavianfan.dk/beta/beta
Avatar billede mikkelk Nybegynder
19. april 2005 - 20:43 #15
Jeg tror fejlen ligger i dine \ - som skal vende den anden vej :-)

<script>
    imgArr = new Array(10);
    imgAltArr = new Array(10);
imgArr[1] = 'grafik/03.jpg';
imgAltArr[1] = 'grafik/03_hover.jpg';
imgArr[2] = 'grafik/04.jpg';
imgAltArr[2] = 'grafik/04_hover.jpg';
imgArr[3] = 'grafik/05.jpg';
imgAltArr[3] = 'grafik/05_hover.jpg';
imgArr[4] = 'grafik/06.jpg';
imgAltArr[4] = 'grafik/06_hover.jpg';
imgArr[5] = 'grafik/07.jpg';
imgAltArr[5] = 'grafik/07_hover.jpg';
imgArr[6] = 'grafik/08.jpg';
imgAltArr[6] = 'grafik/08_hover.jpg';
imgArr[7] = 'grafik/09.jpg';
imgAltArr[7] = 'grafik/09_hover.jpg';
imgArr[8] = 'grafik/10.jpg';
imgAltArr[8] = 'grafik/10_hover.jpg';
imgArr[9] = 'grafik/11.jpg';
imgAltArr[9] = 'grafik/11_hover.jpg';
imgArr[10] = 'grafik/12.jpg';
imgAltArr[10] = 'grafik/12_hover.jpg';
function imgSkift(id){
    for(i=1;i< imgArr.length ;i++){
    oImg = document.getElementById("menuKnap" + i)
    if(i == id){
        if(oImg.src == imgAltArr[i]){
        oImg.src = imgArr[i];
        } else {
        oImg.src = imgAltArr[i];
        }
    } else {
        oImg.src = imgArr[i];
    }
    }
}
</script>
<img src="grafik/03.jpg" id="menuKnap1" onclick="imgSkift(1);">
<img src="grafik/04.jpg" id="menuKnap2" onclick="imgSkift(2);">
<img src="grafik/05.jpg" id="menuKnap3" onclick="imgSkift(3);">
<img src="grafik/06.jpg" id="menuKnap4" onclick="imgSkift(4);">
<img src="grafik/07.jpg" id="menuKnap5" onclick="imgSkift(5);">
<img src="grafik/08.jpg" id="menuKnap6" onclick="imgSkift(6);">
<img src="grafik/09.jpg" id="menuKnap7" onclick="imgSkift(7);">
<img src="grafik/10.jpg" id="menuKnap8" onclick="imgSkift(8);">
<img src="grafik/11.jpg" id="menuKnap9" onclick="imgSkift(9);">
<img src="grafik/12.jpg" id="menuKnap10" onclick="imgSkift(10);">
Avatar billede dehaas Nybegynder
19. april 2005 - 20:46 #16
ja, sørme så. Nu virker der jo helt perfekt. Manga gange tak for din store hjælp
Avatar billede mikkelk Nybegynder
19. april 2005 - 20:49 #17
Det var så lidt :-)
Avatar billede dehaas Nybegynder
19. april 2005 - 21:02 #18
Hvis du stadig er der, kunne jeg godt bruge lidt mere hjælp :P

Hvordan lyder syntaksen, hvis jeg vil have at billedet skifter når jeg tager musen over billedet?
Avatar billede mikkelk Nybegynder
19. april 2005 - 21:10 #19
Du erstatter bare onclick med onMouseOver
Avatar billede dehaas Nybegynder
19. april 2005 - 21:11 #20
okay... mange tak endnu engang :D
Avatar billede mikkelk Nybegynder
19. april 2005 - 21:12 #21
Så lidt :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester