Bilde som link og hover

[kristofo]

Hei!

Har et enkelt spørsmål:

 

Jeg vil få til å ha et bilde som link, og når musa "hover" over bildet, skal det vises et annet bilde. Hvordan kan jeg gjøre dette i html og css?

 

Takker for enkelt svar!

[SimDaDim]

bruk javascript og "mouse hover"

[kristofo]

bruk javascript og "mouse hover"

7816401[/snapback]

 

Takker for svar, men grunnen til at jeg spurte om html og css er at jeg prøver å unngå å bruke javascript på siden. Er det ikke mulig å få til uten?

[Anders Moen]

Det er mulig!

 

HTML:
<a href="enside.php" class="navn_pa_klasse">link tekst</a>

CSS:
navn_pa_klasse {
display: block;
width: 300px;
height: 100px;
background-image: url(bilde.gif);
}

[Svinat]

Bruk koden til Andy-Pandy slik:

 

navn {

display: block;

width: ;

height: ;

background: url(sti/til.bildet) #FFF no-repeat;

}

 

navn:hover {

background: url(sti/til/det/andre.bildet) #FFF no-repeat;

}

[Anders Moen]

Å ja!

Jeg glemte å sette på hover i CSS koden. Haha!

[Wizendraw]

Ideelt sett skal pseudo-klassene til a-elementet brukes slik:

 

a:link {
(Dette er basisutgaven av elementet, slik du ser det når du ikke har gjort noe med det.)
}
a:visited {
(Gir seg vel selv. Har du vært inne på siden som linkes, så er det denne utgaven som synes.)
}
a:hover {
(Holder du musa over, så...)
}
a:active {
(Utseendet til linken i det du trykker på den, afaik.)
}

 

Rekkefølgen er viktig. En fin huskeregel er love & hate (takk til Mikael Berg for å ha postet den en gang =)

[Anders Moen]

Ideelt sett skal pseudo-klassene til a-elementet brukes slik:

 

a:link {
(Dette er basisutgaven av elementet, slik du ser det når du ikke har gjort noe med det.)
}
a:visited {
(Gir seg vel selv. Har du vært inne på siden som linkes, så er det denne utgaven som synes.)
}
a:hover {
(Holder du musa over, så...)
}
a:active {
(Utseendet til linken i det du trykker på den, afaik.)
}

 

Rekkefølgen er viktig. En fin huskeregel er love & hate (takk til Mikael Berg for å ha postet den en gang =)

7819264[/snapback]

Eller så kan han også bare gjøre dette:

a:link, a:active, a:visited {
(Dette er basisutgaven av elementet, slik du ser det når du ikke har gjort noe med det.)
}
a:hover {
(Holder du musa over, så...)
}

Hvis for eksempel link, active og visited ikke skal ha noen forskjeller selvfølgelig

[Vibeke S]

Hvis man bruker eksemplene ovenfor vil teksten du skriver inn i linken være synlig oppå bildet, i tillegg vil det ta litt tid fra man holder pila over til hover-bildet lastes.

 

Derfor er det bedre å ha både link- og hover-bilde i samme fil, les en bra og enkel tutorial på hvordan du gjør dette på epleweb.com.