Søg
Avatar billede mbl Juniormester
27. juni 2002 - 10:43 Der er 10 kommentarer og
1 løsning

3 knapper i en

Jeg har set at man kan lave en knap som har 3 visninger.
1. en rød Knap
2. Musen over. = en gul Knap
3. Tryk på gul Knap. = en rød Knap

Jeg ved så meget at det er 3 gif filer der bruges, men ikke hvordan det laves.
Avatar billede ghazaleh Nybegynder
27. juni 2002 - 10:51 #1
Dette er koden til to knapper som jeg har lavet. Når man kører musen hen over skifter den fra den ene gif fil til den anden (Denne knap submitter samtidig en form)

                        <a href="http://www.ghazaleh.dk/index.php?i=kommentarer" onmouseover="movepic('tilbageknap','/billeder/tilbage.jpg')" onmouseout="movepic('tilbageknap','/billeder/tilbagegul.jpg')"><img src="/billeder/tilbagegul.jpg" name="tilbageknap" alt="Tilbage" border="0" /></a>
Avatar billede nikolajdu Nybegynder
27. juni 2002 - 10:54 #2
<img src="roed.gif" onmouseover="this.src='gul.gif'" onmouseout="this.src='roed.gif'" onmousedown="this.src='roed.gif'">
Avatar billede ghazaleh Nybegynder
27. juni 2002 - 10:54 #3
hvis du vil have en rød knap når man klikke på den så kan du lave det med:

onclick="movepic('tilbageknap','/billeder/tilbageroed.jpg')"

men jeg glemte også at vedlægge den javascript-funktion som jeg kalder. Den ser sådan ud:

<script language="javascript">
function movepic(img_name,img_src) {
document[img_name].src=img_src;
}
</script>
Avatar billede lequet Nybegynder
27. juni 2002 - 10:56 #4
Det kan gøres så simpelt som dette :

<img src="red.gif" onMouseOver="this.src='gul.gif'" onMouseOut="this.src='red.gif'" onClick="this.src='red.gif'">

Men det kræver at dine billeder helst ikke er for store, da den skal loade den gule når musen første gang føres over
Avatar billede o-zone Nybegynder
27. juni 2002 - 10:56 #5
Du kan opnå effekten med de tre javascript events onMouseOver, onMouseOut og onClick.
Ovenstående eksempel gør brug af en funktion "movepic()", som vist ikke er med i eksemplet ... jeg prøver lige at flikke noget sammen ...
Avatar billede lequet Nybegynder
27. juni 2002 - 10:56 #6
Damn, for langsomt :)
Avatar billede nikolajdu Nybegynder
27. juni 2002 - 10:56 #7
hov hov....
Avatar billede nikolajdu Nybegynder
27. juni 2002 - 10:58 #8
nu prøver jeg for 3. gang at poste det jeg har forsøgt at skrive, men aldrig kommer ind på siden.......

"jeg burde nok også lige bruge 'onclick' i stedet...."
Avatar billede o-zone Nybegynder
27. juni 2002 - 11:00 #9
he he he ... der er rift om de nemme spørgsmål :-)

Så kan jeg da tilføje, at du kan preloade billederne, ved at oprette Image objekter, og så bare sætte XXX.src = preloadedKnap.src

Oprettelsen af et Image objekt kan f.eks. se således ud:

var preloadedKnap = new Image(); knap.src='gul.gif';
Avatar billede o-zone Nybegynder
27. juni 2002 - 11:17 #10
Her er et bud med preload :) (selvom det er lidt sent ude :-/ )
---8<----------
<html>
<body>
<script language="javascript">
    var groenKnap = new Image(); groenKnap.src='groen.gif';
    var gulKnap = new Image(); gulKnap.src='gul.gif';
    var roedKnap = new Image(); roedKnap.src='roed.gif';
</script>

Her er en knap: <img src="groen.gif" border=0 onMouseOver="this.src=gulKnap.src; return false;" onMouseOut="this.src=groenKnap.src; return false;" onClick="this.src=roedKnap.src; return false;">
</body>
</html>
---8<----------

Hvis du gerne vil have knappen til at udføre noget andet også, så skal du tilføje det under onClick=
Det kunne f.eks. se således ud:
onClick="this.src=roedKnap.src; document.formNavn.submit(); return true;"
Avatar billede mbl Juniormester
27. juni 2002 - 12:42 #11
Tak til alle. Svar fra o-zone er det som nok kommer nærmest.
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
27/0916:43 Nomad Tracking Car Af fleknes i Apps til Android
25/0916:15 Internet forsvinder hele tiden Af TTA i Internetforbindelser
23/0920:49 Fejl på Tv2 Play Af Bukse i Browsere
23/0918:11 VB, Lægge 2 celler sammen og skrive den i cellen ved side af Af MC3390 i Excel
21/0910:39 DBA er ikke hvad det tidligere var - desværre! Af ErikHg i Fri debat
White papers
Flere white papers »