Hvordan lage meny som endrer seg på mouseover?

Frigg33 · 19. mai 2009

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?

cohan · 19. mai 2009

Du kan bruke ett image mouseover javascript for eksempel. Det er den løsningen jeg har pleid å bruke.

Frigg33 · 19. mai 2009

oki.. takk for tips

med litt modifikasjoner så fikk jeg denne til å funke

http://www.dynamicdrive.com/dynamicindex1/hover.htm

demiurgen · 19. mai 2009

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.

lastresort · 19. mai 2009

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?

demiurgen · 20. mai 2009

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.

Logg inn

Hvordan lage meny som endrer seg på mouseover?

Anbefalte innlegg

Frigg33

Lenke til kommentar

Videoannonse

cohan

Lenke til kommentar

Frigg33

Lenke til kommentar

demiurgen

Lenke til kommentar

lastresort

Lenke til kommentar

demiurgen

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer