---

Jeg forstår ikke hvordan jeg kan lave en hover effekt hvor det
praktisk skal fungere sådan, at når man holder musen over et
billede bliver det til et andet.

Jeg kan få det til at fungere med javascript, men der kan jeg
ikke få lov til at positionere ved at gøre det på den måde.

Kan det lade sig gøre med css overhoved?

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Nicolai Dahl skrev:

> Jeg forstår ikke hvordan jeg kan lave en hover effekt hvor det
> praktisk skal fungere sådan, at når man holder musen over et
> billede bliver det til et andet.

Det kan laves med background, men det virker kun i IE 6 hvis man
laver det med et link. Jeg har brugt det her (hvor der skiftes
mellem Zakarias.jpg og Zakarias1.jpg):

   http://lundhansen.dk/

ved Zakarias. Bemærk at width og height i klassen zakarias skal
være store nok til begge billeder på begge ledder (og klassen
kan selvfølgelig godt hedde noget andet blot det ændres alle
steder).


HTML:

<div style='float:left;'>
   <p><a class='zakarias' href='#'></a></p>
   </p>
</div>

CSS:

..zakarias {
   width: 356px;
   height: 356px;
   margin: 20px;
   padding: 0;
   background: url(Zakarias.jpg) no-repeat;
   display: block;
}
..zakarias:hover { background: url(Zakarias1.jpg) no-repeat; }

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

Bertel Lund Hansen skrev:

> Det kan laves med background, men det virker kun i IE 6 hvis man
> laver det med et link. Jeg har brugt det her (hvor der skiftes
> mellem Zakarias.jpg og Zakarias1.jpg):

En ulempe med den metode er at man risikerer en forsinkelse første
gang :hover-billedet skal bruges. Det kan undgås med preload af
billedet, men en mere elegant løsning er at bruge forskydning af et
baggrundsbillede - se
<http://wellstyled.com/css-nopreload-rollovers.html>

En udvidelse af den model kan ses her:
<http://alistapart.com/articles/sprites>

Eksemplerne er i mine øjne ret overbevisende:

<http://alistapart.com/d/sprites/ala-image3.html>
<http://alistapart.com/d/sprites/ala-buttons1.html>
<http://alistapart.com/d/sprites/ala-blobs2.html>
--
Bolig søges. Andel eller leje i Emdrup, Nordvest, Nørrebro, Søborg
eller Brønshøj, max 6000 pr. måned.
Kontakt pr. mail - nospam(at)gyros.dk
Jens Gyldenkærne Clausen

---

Jens Gyldenkærne Clausen skrev:

> billedet, men en mere elegant løsning er at bruge forskydning af et
> baggrundsbillede - se
> <http://wellstyled.com/css-nopreload-rollovers.html>

Den er fiks. Tak for fidusen.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

Jeg tror jeg benytter Bertels metode... det giver lidt mere frihed
med hensyn til positionering, men tak for det. Blev en del klogere :D

Jeg bliver lige nødt til at spørge, om alle billeder kaldet frem med
css bliver det med komandoen background-image eller background (altså
om der skal være background med når man har med images at gøre)

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Nicolai Dahl skrev:

> Jeg bliver lige nødt til at spørge, om alle billeder kaldet frem med
> css bliver det med komandoen background-image eller background

Nej nej, det er blot den letteste måde at lave netop dette skift på.

Man kan lægge et billede ind ovenpå baggrunden med
<img src='minlillemis.jpg' width='200' height='300' alt='Min lille mis'>

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

><a class='zakarias' href='#'></a>


> ..zakarias {
>    width: 356px;
>    height: 356px;
>    margin: 20px;
>    padding: 0;
>    background: url(Zakarias.jpg) no-repeat;
>    display: block;
> }
> ..zakarias:hover { background: url(Zakarias1.jpg) no-repeat; }

Jeg har lige to spørgsmål. Oppe i html koden... må man godt bare
skrive '#' og så betyder det at billedet bliver kodet i css
dokumentet? Eller hvordan skal det forstås.

når du skriver ..zakarias mener du så a.zakarias?

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Nicolai Dahl skrev:

> Jeg har lige to spørgsmål. Oppe i html koden... må man godt bare
> skrive '#' og så betyder det at billedet bliver kodet i css
> dokumentet?

Nej. Det er lavet som et link for at få IE 6 med, men da der ikke
er brug for et link, laver jeg bare et tomt et. Det kan man gøre
med # som egentlig betyder at browseren skal søge efter en
interne id på samme side, men da der ikke er givet nogen id,
henter det bare samme side fra toppen.

> når du skriver ..zakarias mener du så a.zakarias?

Nej. Fidusen med IE6 er at hover ikke fungerer på andet end
links. Når først det er lavet som link, kan man godt sætte hover
på klassen.

Det er muligt at det også ville virke med hover kun på
a.zakarias.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

> Det er muligt at det også ville virke med hover kun på
> a.zakarias.

Det er nemlig det. Jeg vil meget gerne have billederne til at være
links også, men efter at have siddet og knoklet med jeres koder her
til eftermiddag kan jeg stadig ikke få det til at virke. Kan det
overhoved lade sig gøre?

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Nicolai Dahl skrev:

> Det er nemlig det. Jeg vil meget gerne have billederne til at være
> links også, men efter at have siddet og knoklet med jeres koder her
> til eftermiddag kan jeg stadig ikke få det til at virke. Kan det
> overhoved lade sig gøre?

Ja. Du skal bare indsætte din linkadresse i stedet for #.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

> Ja. Du skal bare indsætte din linkadresse i stedet for #.

HTML
<body>

   <a class='forum' href='#'></a>

</body>

CSS
..forum {
   background: url("images/topmenu/forumlille.png") no-repeat;
}

..forum:hover {
   background: url("images/topmenu/forumstor.png") no-repeat;
}


burde det her så ikke virke?

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Nicolai Dahl <deterbaremigdererher@hotmail.com> skrev :

><body>
>
>   <a class='forum' href='#'></a>
>
></body>
>
>CSS
>.forum {
>   background: url("images/topmenu/forumlille.png") no-repeat;
>}
>
>.forum:hover {
>   background: url("images/topmenu/forumstor.png") no-repeat;
>}
>
>
>burde det her så ikke virke?

Nej.

Der mangler noget indhold i linket, forstået på den måde at der
skal stå eller andet mellem <a class='forum' href='#'> og </a>,
det kan så være &nbsp;

Men det er ikke helt nok, da et baggrundsbillede kun fylder dem
størrelse som indholdet har, så vi må lave det om til et
blokelement og give det størrelsen på billedet.

..forum {
   background: url("images/topmenu/forumlille.png")
no-repeat; display: block; width: 200px; height: 200px
}

--
Kerim
»Søger nogen en anden religion end Islam, skal den ikke modtages
af Ham, og han skal i det kommende liv være blandt taberne.«
(Sura 3, vers 87)

---

"Kerim Ellentoft" <kerim@mail.tele.invalid> skrev i en meddelelse
news:vjrgu29cb30volpdvnnbgdr5v393tq8ckn@dtext.news.tele.dk...
> Nicolai Dahl <deterbaremigdererher@hotmail.com> skrev :
>
>><body>
>>
>> <a class='forum' href='#'></a>
>>
>></body>
>>
>>CSS
>>.forum {
>> background: url("images/topmenu/forumlille.png") no-repeat;
>>}
>>
>>.forum:hover {
>> background: url("images/topmenu/forumstor.png") no-repeat;
>>}
>>
>>
>>burde det her så ikke virke?
>
> Nej.
>
> Der mangler noget indhold i linket, forstået på den måde at der
> skal stå eller andet mellem <a class='forum' href='#'> og </a>,
> det kan så være &nbsp;
>
> Men det er ikke helt nok, da et baggrundsbillede kun fylder dem
> størrelse som indholdet har, så vi må lave det om til et
> blokelement og give det størrelsen på billedet.
>
> .forum {
> background: url("images/topmenu/forumlille.png")
> no-repeat; display: block; width: 200px; height: 200px
> }
>
> --
> Kerim
> »Søger nogen en anden religion end Islam, skal den ikke modtages
> af Ham, og han skal i det kommende liv være blandt taberne.«
> (Sura 3, vers 87)

ja ja ja millioner tror på gud, jesus, muhammed, allah og og havd de nu
hedder
og millioner tror på små grønne mars mænd men hvem har nogensinde set nogen
af ?? INGEN
og det er der heller aldrig nogen der kommer til.

og dem som mener at islam er den eneste og sande religion skulle have
stukket
en STOR, FED OG TYK amerikansk raket op i røven, hvor på der står :
FUCK MUHAMMED.

(René 1962, vers 1 og 2)
Ateist ikke troende

---

oz3lx,René skrev:

> ja ja ja millioner tror på gud, jesus, muhammed, allah og og havd de nu
> hedder

Denne her gruppe handler om webdesign hvilket du bedes
respektere.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

Bertel Lund Hansen skrev:

> Denne her gruppe handler om webdesign hvilket du
> bedes respektere.

Han bliver sikkert træt af det en dag, vi ved jo hvor han
bor

Har han ikke noget mere fornuftigt at tilføje gruppen, er
der sikkert en der tager affære en dag.

--
Allan Vebel
http://html-faq.dk

---

Nicolai Dahl skrev:

>    <a class='forum' href='#'></a>

Du linker til samme side.

> .forum {
>    background: url("images/topmenu/forumlille.png") no-repeat;
> }

Du mangler

   display: block;

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

Allan Vebel skrev:

> Har han ikke noget mere fornuftigt at tilføje gruppen, er
> der sikkert en der tager affære en dag.

Brug filteret og lad ham hvile i fred. TDC tager desværre ikke
misbrug som det oz3lx,René leverer seriøst.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Nicolai Dahl skrev:

> Jeg forstår ikke hvordan jeg kan lave en hover effekt
> hvor det praktisk skal fungere sådan, at når man holder
> musen over et billede bliver det til et andet.

Jeg har skrevet lidt om det på http://html-faq.dk/1012.asp,
(Hvordan skifter man et billede med css?)

Se også http://html-faq.dk/2026.asp, (Formatering af links)

> Kan det lade sig gøre med css overhoved?

Ja, der er virkelig mange muligheder.

--
Allan Vebel
http://html-faq.dk