Avatar billede zliber Nybegynder
20. september 2005 - 00:05 Der er 18 kommentarer og
1 løsning

Hover effekt på billedeknap

Hej Eksperter.

Jeg har lavet nogle knapper som jeg gerne vil have er links på min hjemmeside.

Jeg kunne godt tænke mig at de nu bliver til rigtige "knapper", sådan at de "trykkes" lidt ned når jeg holder musen over.

Jeg har prøvet at hente nogle scripts rundt omkring, og har endelig fundet en løsning - Nu kommer problemet bare.

Jeg skal bruge en knap mere, en som er trykket ned. Men da mine tegne kundskaber ikke er særlig gode, håber jeg en af jer kan hjælpe mig med at finde et program som kan "sænke" knappen lidt og måske også ændre tekstfarven.

Så jeg ender med at have to af hver knap, en oppe og en nede.

Hilsen zliber.
Avatar billede heeris Nybegynder
20. september 2005 - 01:00 #1
hvis jeg forstår rigtigt, så har du brugt et input tag:
    <input type="button" value="hej hej">
Men denne type input(button) understøtter ikke tilstanden "checked", som i:
    <input type="button" value="hej hej" checked>
Det gør tilgengæld eks. typen checkbox, men det skal du jo ik bruge her.

Hvis du tilgengæld har brugt mouseover effekter, hvor du vælger hvilket billede der
skal vise når musen er over og ikke over, så kan du lave et billede der ligner det du ønkser, selv om jeg godt læste du ikke var meget for at tegne :)


teksten kan du ændre med style, eks.:
    <input type="button" value="dette er en knap" style="font-family:Arial;font-size:18px;color:#0066CC">

bemærk der ikke står "font" foran "color", men det er stadig fonten der ændre farve.
Avatar billede heeris Nybegynder
20. september 2005 - 01:03 #2
smid lige din kode for knapperene iøvrigt, så er det lidt nemmere og se jeg har misforstået noget :)
Avatar billede olebole Juniormester
20. september 2005 - 01:03 #3
<ole>

Det kan laves på forskellig måde - men jeg må lige vide, hvad det præcist er, du søger.
Er det en XP-agtig knap, du mener?
Er det en Windows-classic knap, du mener?
Er det en grafik-knap, du mener?

/mvh
</bole>
Avatar billede zliber Nybegynder
20. september 2005 - 12:16 #4
Det må høre under emnet grafikknap - Den ligner ikke noget jeg kender, det er nok derfor jeg synes den er speciel. Det er til links i menuen i venstre side af skærmen.

Se dette link:
http://www.html.dk/scripts/javascript/00001/

Jeg skal bare have at knap 2 ligner knap 1 der er trykket ned.
Avatar billede zliber Nybegynder
20. september 2005 - 23:14 #5
er der slet ikke nogen der kan hjælpe?????
Avatar billede heeris Nybegynder
20. september 2005 - 23:25 #6
med mindre olebole kender et smart fif, så vil jeg mene du er nød til at bytte om på stigen til grafikken i koden. således den knap der skal være trykket med, har samme grafik som den anden knap har, når denne får mouseover komandoen.

gir det mening?

det eks. på HTML.dk du linker til bruger 2 billeder til at lave en knap, så du skal vel bare gøre det samme, og så bytte om på billedstigerne på den anden knap.
Avatar billede olebole Juniormester
21. september 2005 - 14:25 #7
Det er, såvidt jeg kan se, et Photoshop spørgsmål ... jeg forstår det stadig ikke helt  :)
Avatar billede zliber Nybegynder
22. september 2005 - 02:13 #8
Jeg kan godt se jeg har rodet mig ud i en besværlig forklaring.
Jeg prøver at tage den helt fra bunden så alle forstår mig.

Jeg skal have hover effekt på mine knapper på hjemmesiden.
Det vil sige, de skal "synke" når man holder musepilen hen over, som om man virkelig trykker ned på en knap.
Der findes et eksempel på www.html.dk hvor de viser hvordan det virker.
Det er IKKE det der er mit problem.
Jeg kan GODT få scriptet til at virke så der skiftes mellem de to billeder.

Mit problem er... kort sagt... jeg er doven.

Jeg har fået lavet det ene billede (altså knap). Og det har kostet mig meget besvær.
Nu skal jeg altså også have en knap der er "trykket ned".
Altså jeg MANGLER mit billede nummer 2, som der skal skiftes til når man holder musen henover.
Og jeg kan IKKE finde ud af hvordan jeg får lavet billede 2, den nedtrykkede knap.

Mit problem er altså at jeg skal have lavet knap nummer 2, og jeg kan ikke finde ud af at lave min knap om så den ser "nedtrykket" ud (ikke nedtrykt :-))

Findes der et program hvor jeg kan sætte mit billede af en knap ind, og vupti så har den lavet en forsækning hele vejen, så det ligner en knap der er trykket ned, så jeg slipper for at lave det.
Avatar billede roenving Novice
22. september 2005 - 02:34 #9
Tjah, der er visse funktioner i Photoshop, som kan bruges til den slags, i dhtml skal du f.eks. gøre sådan:

<span style="padding:2px;cursor:pointer;color:red;font-weight:900;border:3px outset pink;" onmouseover="this.style.borderStyle='solid';" onmouseout="this.style.borderStyle='outset'" onmouseup="this.style.borderStyle='solid'" onmousedown="this.style.borderStyle='inset';">Tryk her</span><br>
Avatar billede heeris Nybegynder
22. september 2005 - 12:24 #10
jeg tror jeg blander mig uden om her, har helt misforstået problemet :)
Avatar billede zliber Nybegynder
22. september 2005 - 15:47 #11
Jamen det virker...

Hvordan skal jeg så skrive scriptet når der er mere end en knap?

Jeg kan få scriptet til at virke når der kun er 1 knap, men så snart jeg prøver at tilføje flere så virker INGEN af knapperne...

Scriptet jeg gætter på ser sådan ud (kun vist med 2 knapper)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">

<head>

<title>menu</title>

<script type="text/javascript">
billede1 = new Image();
billede1.src = "up_knap_forside.jpg";

billede2 = new Image();
billede2.src = "do_knap_forside.jpg";

function skiftbillede(img_name,img_src) {
document[img_name].src=img_src;
}
</script>

<script type="text/javascript">
billede1 = new Image();
billede1.src = "up_knap_bagside.jpg";

billede2 = new Image();
billede2.src = "do_knap_bagside.jpg";

function skiftbillede(img_name,img_src) {
document[img_name].src=img_src;
}
</script>

</head>

<body>

<a href="forside.htm"
onmouseover="skiftbillede('eksempel','do_knap_forside.jpg')"
onmouseout="skiftbillede('eksempel','up_knap_forside.jpg')">
<img name="eksempel" src="up_knap_forside.jpg" alt="Tilbage til forsiden"
style="border:none;" /></a>

</head>

<body>

<a href="forside.htm"
onmouseover="skiftbillede('eksempel','do_knap_bagside.jpg')"
onmouseout="skiftbillede('eksempel','up_knap_bagside.jpg')">
<img name="eksempel" src="up_knap_bagside.jpg" alt="Tilbage til forsiden"
style="border:none;" /></a>

</body>

</html>






Er det mig der er helt galt på den?
Jeg har 7-8 knapper i alt, og ikke 2 som vist i eksemplet.
Avatar billede zliber Nybegynder
22. september 2005 - 15:49 #12
</head> og <body> skal selvfølgelig ikke stå der 2 gange, så den nederste skal overses. Det var en copy/paste fejl.
Avatar billede heeris Nybegynder
22. september 2005 - 18:28 #13
nu kom der kodepå bordet, blander mig lige ingen :)

prøv med det her istedet:

<html>

<head>

<title>menu</title>

<script type="text/javascript">
billede1 = new Image();
billede1.src = "up_knap_forside.jpg";

billede2 = new Image();
billede2.src = "do_knap_forside.jpg";

billede3 = new Image();
billede3.src = "up_knap_bagside.jpg";

billede4 = new Image();
billede4.src = "do_knap_bagside.jpg";

function skiftbillede(img_name,img_src) {
document[img_name].src=img_src;
}
</script>

</head>

<body>

<a href="forside.htm"
onmouseover="skiftbillede('first','do_knap_forside.jpg')"
onmouseout="skiftbillede('first','up_knap_forside.jpg')">
<img name="first" src="up_knap_forside.jpg" alt="Tilbage til forsiden"
style="border:none;" /></a>


<a href="forside.htm"
onmouseover="skiftbillede('second','do_knap_forside.jpg')"
onmouseout="skiftbillede('second','up_knap_forside.jpg')">
<img name="second" src="up_knap_forside.jpg" alt="Tilbage til forsiden"
style="border:none;" /></a>

</body>

</html>

tror dit problem er at du bare har kopieret scriptet, så de to funktioner ved ikke hvor de skal hente hvad fra.
Avatar billede zliber Nybegynder
22. september 2005 - 21:21 #14
Det du skriver til sidst tror jeg du har helt ret i - Jeg er ikke den store kode-mester.
Så jo jeg har 7 x copy pastet koden ind... Men det der gav en idé og jeg skal hjem og prøve den - Jeg er desværre ikke hjemme lige nu, men regner med at være hjemme om en times tid, så skal jeg afprøve det.

Såå hvis du sidder og brænder efter at hjælpe mere, så tag et kig ved 23-tiden, så har jeg garanteret problemer igen igen :-)
Avatar billede zliber Nybegynder
22. september 2005 - 21:23 #15
Og jeg har allerede stødt på første forundring...

Skal det hele starte med

<html>

eller med

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
Avatar billede heeris Nybegynder
22. september 2005 - 21:42 #16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

brug denne stedet, har fået den af olebole, tror han v mere om d end jeg.
jeg er nok gået iseng v 23 tiden, måske, men jg abonnere på denne streng, så jeg er obs på dg hele tiden. får sågar en sms når du poster noget :D
Avatar billede zliber Nybegynder
22. september 2005 - 23:30 #17
Jeg bukker dybt og takker mange mange gange.

I fik løst mit problem!
For at andre også kan få glæde af det vil jeg lige vise det færdige resultat der virker.

For det første skal man have et billede af en knap der er oppe og en knap der er trykket ned.

Scriptet ser sådan ud:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>
<title>Din knapside</title>

<script type="text/javascript">
billede1 = new Image();
billede1.src = "knap1_oppe.jpg";

billede2 = new Image();
billede2.src = "knap1_trykket_ned.jpg";

billede3 = new Image();
billede3.src = "knap2_oppe.jpg";

billede4 = new Image();
billede4.src = "knap2_trykket_ned.jpg";

function skiftbillede(img_name,img_src) {
document[img_name].src=img_src;
}
</script>

</head>


<body>

<a href="NAVNET-PÅ-DEN-SIDE-KNAPPEN-SKAL-LINKE-TIL.htm"
onmouseover="skiftbillede('first','knap1_trykket_ned.jpg')"
onmouseout="skiftbillede('first','knap1_oppe.jpg')">
<img name="first" src="knap1_oppe.jpg" alt="BESKRIVELSE PÅ KNAP (HOLD MUS OVER)"
style="border:none;" /></a>


<a href="NAVNET-PÅ-DEN-SIDE-KNAPPEN-SKAL-LINKE-TIL.htm"
onmouseover="skiftbillede('second','knap2_trykket_ned.jpg')"
onmouseout="skiftbillede('second','knap2_oppe.jpg')">
<img name="second" src="knap2_oppe.jpg" alt="BESKRIVELSE PÅ KNAP (HOLD MUS OVER)" style="border:none;" /></a>

</body>

</html>


Dette virker hvis man skifter forklaringerne ud med sine egne informationer.

Jeg takker mange gange for hjælpen!
Til jer der har deltaget i spørgsmålet:
Jeg er som i kan gætte ved at lave en hjemmeside, og det skulle undre mig meget, hvis der ikke skulle dukke flere spørgsmål op undervejs, og hvis i har lyst til at hjælpe, så må i fortælle mig en måde hvorpå jeg kan fortælle når der kommer nye spørgsmål. Jeg ved ikke om i må opgive jeres mail her, og jeg ved ikke om jeg må smide links her til mine kommende spørgsmål. Hvis der er en måde må i gerne sige til. Og så læg lige et svar heeris så du kan få nogle point.
Avatar billede heeris Nybegynder
22. september 2005 - 23:59 #18
:)

du ska ik bekymre dig om hjælp i fremtiden, bare smid spørgsmål som nu, så er dr en god cnange for at du rammer de samme folk. jeg ved at olebole er på tit og chekker tit de nyeste spørgsmål, og jeg begynder at få tid til det samme.
er ik meget for at skive emails i et offentligt forum, og jeg kender ik selv til en måde at kontakte folk her direkte.
Men don't sweat it Zliber, du spørg bare løs.
nu....sove ZZZzzzzz....
Avatar billede olebole Juniormester
23. september 2005 - 13:54 #19
- hold da op, der er sket noget her  :D

Ja, jeg plejer at holde øje med nye spørgsmål, men jeg deltager i så mange, at det kan være svært at holde styr på dem alle, når Ekspertens mail-system ikke fungerer. Så er det godt, der er andre, der er vågne  ;o)
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