Gå til innhold

Hvordan lage meny som endrer seg på mouseover?

Frigg33

Anbefalte innlegg

Frigg33

Frigg33

Skrevet
Skrevet

Jeg holder på å lage en meny, og jeg skulle gjerne hatt det slik at når musen er over f.eks "hjem" valget på menyen, så kommer det en liten pil fram. Håper jeg forklarte det slik at dere forstår. Jeg vet ikke helt hva jeg skal søke/lete etter på nettet. Derfor er det litt vanskelig å finne fram, noen som vet hva jeg må lete etter? eller eventuelt har en link?

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
demiurgen

demiurgen

Skrevet
Skrevet

Du trenger ikke javascript for å få til det. Bare css holder i lange baner.

 

F.eks.

Du har en link, som du har satt et bakgrunnsbilde på, med en css regel på a elementet. Så lager du en ny css regel for a:hover hvor du har et annet bilde.

 

Mer komplisert trenger det ikke være.

Lenke til kommentar
lastresort

lastresort

Skrevet
Skrevet
Du trenger ikke javascript for å få til det. Bare css holder i lange baner.

 

F.eks.

Du har en link, som du har satt et bakgrunnsbilde på, med en css regel på a elementet. Så lager du en ny css regel for a:hover hvor du har et annet bilde.

 

Mer komplisert trenger det ikke være.

Låner tråden siden du fant ut av det :)

 

Sliter med det samme

Skal ha menyen på siden til å endre til et annet bilde når jeg har musen over den

 

Hvor og hvordan skal jeg sette dette opp i css og html dokumentet mitt?

Lenke til kommentar
demiurgen

demiurgen

Skrevet
Skrevet

Her er et eksempel på hvordan lage en knapp med rollover effekt med kun gtml og css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Link</title>
<style type="text/css">
a {
display: block; /* gjør at hele område blir en link og ikke bare teksten */
width: 6em; 
padding: 0.2em;
line-height: 1.4; /* sentrerer testen samtidig som det setter høyden på knappen */
background-color: #94B8E9;
border: 1px solid black;
color: #000;
text-decoration: none;
text-align: center;
}
a:hover {
background-color: #369;
color: #fff;
}
</style>
</head>

<body>
<a href="#">Link</a>
</body>
</html>

Dersom du ønsker å bruke et bilde som bakgrunn kan du legge til background-image:url(bilde.gif) på a regelen og background-image:url(bilde_over.gif) på a:hover regelen.

(Du må da selvfølgelig bytte navnet på bildet og evt mappenavn.)

I tillegg må du sette width til bredden på bilde og line-height til høyden på bilde du har.

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...