---

Jeg har forsøgt at lave hover på et billede med css, men af en
eller anden grund hakker billedet, når man kører musen over - dog
ikke altid. Hvad er der galt?

http://www.arno.dk/pages/css-test.html

/Malene

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

---

Malene Arno wrote:
> Jeg har forsøgt at lave hover på et billede med css, men af en
> eller anden grund hakker billedet, når man kører musen over - dog
> ikke altid. Hvad er der galt?
>
> http://www.arno.dk/pages/css-test.html

Der er ikke noget billede på den side.

Og kildekoden validerer i øvrigt heller ikke - der er ikke defineret type på
dit stylesheet.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://hjem.get2net.dk/egin

---

Malene Arno skrev:

>ikke altid. Hvad er der galt?

>http://www.arno.dk/pages/css-test.html

Der er kun en tom side.

I koden kan jeg se et link uden nogen linktekst.

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

---

> Der er kun en tom side.

Underligt .. jeg kan sagtens se den i min egen browser og en
kammerat, jeg lige har spurgt kunne også se den ...

Måske var det mens jeg sad og lavede om på det?

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

---

Malene Arno skrev:

>> Der er kun en tom side.

>Underligt .. jeg kan sagtens se den i min egen browser og en
>kammerat, jeg lige har spurgt kunne også se den ...

Opera 7.5 viser en tom side. IE 5.0 viser et billede der får
farve på ved hover.

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

---

Malene Arno skrev:

>Underligt .. jeg kan sagtens se den i min egen browser og en
>kammerat, jeg lige har spurgt kunne også se den ...

Billedet ses kun i IE.

Grunden til at det ikke vises i andre browsere, skyldes en fejl i
IE.

IE tilgiver gerne fejl, men det gør de fleste andre browsere
ikke.

Du har sat width og height på et a-tag og da a er et inline
element, så er det ikke tilladt.

Du er nødt til at lave det om til et block element.

Nu:

<style type="text/css" media="all">
a { background-image: url(../24efter.jpg); width: 454px; height:
295px }
a:hover { background-image: url(../24efter1.jpg); width: 454px;
height: 295px }
</style>

Lav det om til:

<style type="text/css" media="all">
a {display: block; background-image: url(../24efter.jpg); width:
454px; height: 295px }
a:hover {display: block; background-image: url(../24efter1.jpg);
width: 454px; height: 295px }
</style>
--
Knud

---

Knud Gert Ellentoft wrote in dk.edb.internet.webdesign.html:
> Lav det om til:
>
> <style type="text/css" media="all">
> a {display: block; background-image: url(../24efter.jpg); width:
> 454px; height: 295px }
> a:hover {display: block; background-image: url(../24efter1.jpg);
> width: 454px; height: 295px }
> </style>

Mange tak skal du ha - jeg kigger på det senere! Så ser vi, om jeg
kan få det til at virke som jeg vil.

/Malene

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

---

Malene Arno skrev i <news:40ccbbf7$0$23872$14726298@news.sunsite.dk>:

> Jeg har forsøgt at lave hover på et billede med css, men af en

ser kun en tom hvid side

Jane
--
æbleskrog.dk

---

"Malene Arno" <malene@arno.dk> skrev i en meddelelse
news:40ccbbf7$0$23872$14726298@news.sunsite.dk...
> Jeg har forsøgt at lave hover på et billede med css, men af en
> eller anden grund hakker billedet, når man kører musen over - dog
> ikke altid. Hvad er der galt?
>
> http://www.arno.dk/pages/css-test.html
>
> /Malene
>
Det er jo to rimeligt store billeder, det ene fylder 40KB og det andet 10KB,
så det vil jo kunne ske at browseren lige skal bruge en kort tænkepause for
at hive billedet frem fra cachen hvor det vel kommer fra. Der er ingen
synderlig kvalitetsforskel på de to billeder, så du kunne starte med at
komprimere det store ned til 10KB også og se om det hjælper noget. Derudover
kunne man måske lave noget med layers hvor farvebilledet ligger som baggrund
permanent bagved og linket så skiftevis har baggrundsbillede og intet
baggrundsbillede. På den måde vil linkets sort/hvid baggrundsbillede dække
for farvebilledet indtil der kommer hover. Jeg ved ikke rigtigt om det gør
nogen forskel, for browseren skal stadigvæk tegne billedet, og det kan også
være det er det der er for krævende til at det kan gøres på under 1/20 sek
hvilket så betyder at der kommer et glimt med noget der ser forkert ud.
Spørgsmålet er så i det hele taget hvordan langsomme computere vil vise det,
om de nogensinde vil være i stand til at vise det ordentligt, det skal man
også lige tænke på. Jeg har nogle knapper med hover hvor der bliver vist et
stykke gradient grafik i hele knappens bredde, først havde jeg lavet det til
at være 1px bred, dette betød at grafikken skulle tegnes 120 gange, det
hakkede på en 450MHz computer, da jeg lavede grafikken 5px bred i stedet så
det kun skulle tegnes 24 gange hakkede det ikke længere. CPU-kraft har noget
at sige her.

Mvh
Peter

---

Malene Arno wrote:
> Jeg har forsøgt at lave hover på et billede med css, men af en
> eller anden grund hakker billedet, når man kører musen over - dog
> ikke altid. Hvad er der galt?
>
> http://www.arno.dk/pages/css-test.html
>

I Firefox kan man ikke se billedet, da linket er inline element. Hvis du
sætter display:block; på kan man se det.

Og så til hvad der er galt.
Finten er ikke at skifte billede ud men at forskyde det samme billede.
Du laver et billede som består af både billede 1 og billede 2.
Eksempel
http://www.hintzmann.dk/testcenter/css/hover/24efter2.jpg

Bag efter tilføjer du lidt ekstra HTML-kode... et div element.
<div><a href="http://www.arno.dk">

---

Martin Hintzmann Andersen wrote:

> Finten er ikke at skifte billede ud men at forskyde det samme billede.
> Du laver et billede som består af både billede 1 og billede 2.

Jeg har lige fundet ud af at det kan gøres endnu mere kort
http://www.hintzmann.dk/testcenter/css/hover/default2.html

Man skal bare bruge background-position: 0 -295px; ved hover til at
forskyde billedet.

Så behøves man ikke et div element som wrapper.

Hintzmann c",)