Et problem med bildelenker og CSS (hoover)

[Chasseur]

Hei!

 

Jeg jobber med en side, og huker at dere en gang tipset meg om en metode hvor man lag alle bildene i en fil, og så annga koordinatene til det bildet du ville hvise i CSS eller HTML filen. Så hvis dere bare hviser hvordan koden ville blitt, med om oss delen, hvor fargebildet skal være hoover bildet.

 

Bredde: 131px

høyde: 110px

Endret 21. september 2005 av Eirikeb

[Lokaltog]

Litt HTML:

 

<a class="omoss">

<a class="kalender">

 

CSS:

.omoss{background:url(bilde.png) no-repeat 0 110px}
.omoss:hover{background:url(bilde.png) no-repeat 0 0}
.kalender{background:url(bilde.png) no-repeat 131px 110px}
.kalender:hover{background:url(bilde.png) no-repeat 131px 0}

 

Og så videre.

 

Edit: glemte :hover.

Endret 21. september 2005 av Lokaltog

[Chasseur]

Litt HTML:

 

<a class="omoss">

<a class="kalender">

 

CSS:

.omoss{background:url(bilde.png) no-repeat 0 110px}
.omoss:hover{background:url(bilde.png) no-repeat 0 0}
.kalender{background:url(bilde.png) no-repeat 131px 110px}
.kalender:hover{background:url(bilde.png) no-repeat 131px 0}

 

Og så videre.

 

Edit: glemte :hover.

Ich liebe dich. (eller noe i den duren).

 

Hjertelig takk!

 

Edit, eller ikke. I det jeg copypasted koden din,, og la selføgelig til </a>, kom det ingenting. Buhu! Why? Men hvis jeg bare satte en tom img tag, (<img ="">) fikk jeg litt, men bare litt av hooveren, ikke noe av vanlig bilde? Hvordan viser jeg hele bildet på starten?

Endret 21. september 2005 av Eirikeb

[potetskrell]

Kanskje et dumt spørsmål, men forandret du på bilde.png?

[Chasseur]

Kanskje et dumt spørsmål, men forandret du på bilde.png?

Jada, er rett URL. Absolutt ikke et dumt spørsmål though

 

For når jeg holder musa over i IE, så ser jeg litt av bildet poppe frem

[Lokaltog]

My bad!

 

Legg til display:block;width:131px;height:110px for alle lenkene. I tillegg må du legge til float:left eller right hvis bildene skal ligge horisontalt etter hverandre. Kanskje også en margin:0 5px for å få litt mellomrom:

 

#menu a{display:block;width:131px;height:110px;float:left;margin:0 5px}

[Steinmann]

Hva skjedde her a?

Skrev en post om akkuratt det samme igår kim, men den er borte

[Lokaltog]

Hva skjedde her a?

Skrev en post om akkuratt det samme igår kim, men den er borte

Den var så dårlig at moderatorene slettet den og mailet meg om å rette det opp i dag tidlig.

[Steinmann]

ha. ha.

[Chasseur]

Okey dokey, jeg prøvde din nye variant lokaltog, men det gikk heller dårlig.

 

.omoss{background-image:url(bilder/lenker/linker.JPG) 
no-repeat 0 110px; display:block;width:131px;height:110px;float:left;}
.omoss:hover{background:url(bilder/lenker/linker.JPG) 
no-repeat 0 0;display:block;width:131px;height:110px;float:left;}
.kalender{background:url(bilder/lenker/linker.JPG) 
no-repeat 131px 110px;display:block;width:131px;height:110px;float:left;}
.kalender:hover{background:url(bilder/lenker/linker.JPG) 
no-repeat 131px 0;display:block;width:131px;height:110px;float:left;}

 

<div id="wrap">
<div id="header">
<a href="omoss.htm" class="omoss"> </a>
<a href="kalender.htm" class="kalender"> a</a>
<a href="nyheter.htm" class="a3">a </a>
<a href="galleri.htm" class="a4"> a</a>
</div>

 

da blir det slik med musa på knappen du ser!

 

EDIT: og ikke noe bilde ellers!

Endret 23. september 2005 av Eirikeb

[funkweb]

Fjern disse "no-repeat og 0 110px;

Dem trenger du ikke.

Testet og fungerte hos meg.!!

 

.omoss {
background-image: url(bilder/lenker/linker.JPG);
display: block;
width: 131px;
height: 110px;
float:left;
}

.omoss:hover {
background:url(bilder/lenker/linker.JPG);
display: block;
width: 131px;
height: 110px;
float: left;
}

 

Osv....

[Chasseur]

Fjern disse "no-repeat og 0 110px;

Dem trenger du ikke.

Testet og fungerte hos meg.!!

 

.omoss {
background-image: url(bilder/lenker/linker.JPG);
display: block;
width: 131px;
height: 110px;
float:left;
}

.omoss:hover {
background:url(bilder/lenker/linker.JPG);
display: block;
width: 131px;
height: 110px;
float: left;
}

 

Osv....

Neinei, det går ikke!

 

De " 0 og 110px;" er der for å vise hvor i bildet som skal vises!

[funkweb]

Javel.. da er jeg nysgjerrig på hvorfor.

I prinsippet så fungerer bildet og hover..!!

 

Kunne du ikke legge ut link til siden da.!!