---

Her på siden http://www.checkthisout.dk/ har jeg forsøgt at lave en hover
effekt på ? tegnet i det nederste hø. farvefelt , men det virker ikke .
Jeg forstillede mig blot, at det skulle blive større ved hover.
Hvad er det jeg gør forkert ?
Jeg ville også gerne lave en hover effekt på en hel div , sådan at farven
f.x. blev en anden, eller der var et billede istedet for en farve - Kan man
det ?
--
Venlig hilsen
Charlotte Nielsen

---

C. Nielsen wrote in dk.edb.internet.webdesign.html:
> Her på siden http://www.checkthisout.dk/ har jeg forsøgt at lave en hover
> effekt på ? tegnet i det nederste hø. farvefelt , men det virker ikke .
> Jeg forstillede mig blot, at det skulle blive større ved hover.
> Hvad er det jeg gør forkert ?
> Jeg ville også gerne lave en hover effekt på en hel div , sådan at farven
> f.x. blev en anden, eller der var et billede istedet for en farve - Kan man
> det ?
> --
> Venlig hilsen
> Charlotte Nielsen
>

Før slutningen af head tilføjer du :

<script>
function onOverBox4() {
box4.style.backgroundColor = ny farve;
// her kan du også manipulere størrelse og placeringen gennem box4.style
}
function onOutBox4() {
// her sætter du de style attributer du har ændret, tilbage til de oprindelige
}
</script>
</head>
...
<div class="box4" id="box4" onmouseover="onOverBox4"
onmouseout="onOutBox4()">
<h2><a href="privat.htm" class="ex">?</a></h2>
</div>

Du kan også definere en CSS style for når musen er over boxen kan befinde sig
i, f.eks.
..overBox4 {
background-color = farve når mus over;
// andre style definitioner
}
Du kan så skifte mellem dem sådan:
<div class="box4" id="box4" onmouseover="this.className='overBox4'"
onmouseout="this.className='box4'">
<h2><a href="privat.htm" class="ex">?</a></h2>
</div>

Håber det er forståeligt og kan bruges




--
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

---

C. Nielsen wrote:
> Her på siden http://www.checkthisout.dk/ har jeg forsøgt at lave en
> hover effekt på ? tegnet i det nederste hø. farvefelt , men det virker
> ikke . Jeg forstillede mig blot, at det skulle blive større ved hover.
> Hvad er det jeg gør forkert ?
> Jeg ville også gerne lave en hover effekt på en hel div , sådan at farven
> f.x. blev en anden, eller der var et billede istedet for en farve - Kan
> man det ?

..box4 a:hover {
color: black;
font-size : 4.6em;
}
--
Mvh Marianne
design af: www.dhejne.dk - www.ragdollys-cat-link.dk
www.singingwolfs.dk - www.formdinfremtid.dk - www.royalmontana.dk

---

C. Nielsen skrev:

> Jeg ville også gerne lave en hover effekt på en hel
> div , sådan at farven f.x. blev en anden, eller der var
> et billede istedet for en farve - Kan man det?

Ja, prøv at se http://html-faq.dk/2026.asp og
http://html-faq.dk/1012.asp

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

---

"Allan Vebel" <spam@do.not> skrev
> C. Nielsen skrev:
>
>> Jeg ville også gerne lave en hover effekt på en hel
>> div , sådan at farven f.x. blev en anden, eller der var
>> et billede istedet for en farve - Kan man det?
>
> Ja, prøv at se http://html-faq.dk/2026.asp og
> http://html-faq.dk/1012.asp

Det er bare så skønt at komme hjem og så er der 3 svar på en løsning. Tak
for forslagene.
Jeg vil gerne prøve styre alt design fra css-arket, så jeg har valgt ikke at
bruge script løsningen.
?-tegnet , virker nu . Det var <H2> jeg havde focuseret på ,da ?-tegnet er
en H2 , og ikke hele boxen som helhed.
Jeg har læst om links og skift et billed med CSS på html - men jeg kan ikke
blive klog på hvad det er der driller.
Nu er det box3 - den turkise firkant - der skulle gerne være et andet
billede når musen er henover - men hvordan ?
Siden er her http://www.checkthisout.dk/

--
Venlig hilsen
Charlotte Nielsen

---

C. Nielsen wrote:
> "Allan Vebel" <spam@do.not> skrev
>> C. Nielsen skrev:
>>
>>> Jeg ville også gerne lave en hover effekt på en hel
>>> div , sådan at farven f.x. blev en anden, eller der var
>>> et billede istedet for en farve - Kan man det?
>>
>> Ja, prøv at se http://html-faq.dk/2026.asp og
>> http://html-faq.dk/1012.asp
>
> Det er bare så skønt at komme hjem og så er der 3 svar på en løsning. Tak
> for forslagene.
> Jeg vil gerne prøve styre alt design fra css-arket, så jeg har valgt ikke
> at bruge script løsningen.
> ?-tegnet , virker nu . Det var <H2> jeg havde focuseret på ,da ?-tegnet er
> en H2 , og ikke hele boxen som helhed.
> Jeg har læst om links og skift et billed med CSS på html - men jeg kan
> ikke blive klog på hvad det er der driller.
> Nu er det box3 - den turkise firkant - der skulle gerne være et andet
> billede når musen er henover - men hvordan ?
> Siden er her http://www.checkthisout.dk/

Sådan:
#box1 a, #box2 a, #box3 a, #box4 a{
width:220px;
height:220px;
color: white;
float: left;
font-size:1.6em;
font-weight: bold;
letter-spacing : 0.2em;
text-align: center;
line-height: 180px;
text-decoration:none;
}
#box1 a{background-color: #48f558;}
#box2 a{background: url(../images/baggrunde/blomster_blaa1_220x220.gif);}
#box3 a{background:#1ECAEC;}
#box3 a:hover {background: url(../images/baggrunde/oje_220x220.gif); }
#box4 a{background-color: #8b151a;}
#box4 a:hover {color:#fff; font-size:2.4em;}

og

<div id="box1">
<a href="http://www.checkthisout.dk/kunst/oversigt.htm">Kunst
</div>

<div id="box2">
<a
href="http://www.checkthisout.dk/test/lone_seeberg/side_1.htm">Test
</div>

<div id="box3">
<a class="h2" href="http://www.checkthisout.dk/illu/oversigt.htm">Illu
</div>

<div id="box4">
<a href="http://www.checkthisout.dk/privat.htm">?
</div>

Tror det virker :)

--
Mvh Marianne
design af: www.dhejne.dk - www.ragdollys-cat-link.dk
www.singingwolfs.dk - www.royalmontana.dk

---

Jacob Ask skrev:

> Og hvis du vil undgå at billedet "flimrer" første gang musen
> kører over det:
>
> #boxX {
> width:xx;
> height:yy;
> backgrund-image:url(hover-billede);
> }
>
> #boxX a {
> display:block;
> height:yy;
> width:xx;
> background-image:url(baggrunds-billede);
> }
>
> #boxX a:hover { background-image:url(hover-billede); }


Hvorfor ikke bare:

#boxX a:hover { background-image: none; }

-?

Hvis hover-billedet allerede ligger som baggrund på boksen
nedenunder, burde det give samme effekt (dog ikke testet)

En anden måde at opnå det samme på er ved at forskyde et
baggrundsbillede i dobbelt størrelse ved :hover. Jeg kan ikke
huske adressen til det på stående fod, men jeg har givet et link
for nylig i et svar til Bertel.
--
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

---

On Mar 15, 11:09 pm, "tidemann" <tidem...@2Youtdcadsl.dk (Slet 2You)>
wrote:
> C. Nielsen wrote:
> > "Allan Vebel" <s...@do.not> skrev
> >> C. Nielsen skrev:
>
> >>> Jeg ville også gerne lave en hover effekt på en hel
> >>> div , sådan at farven f.x. blev en anden, eller der var
> >>> et billede istedet for en farve - Kan man det?
>
> >> Ja, prøv at sehttp://html-faq.dk/2026.aspog
> >>http://html-faq.dk/1012.asp
>
> > Det er bare så skønt at komme hjem og så er der 3 svar på en løsning. Tak
> > for forslagene.
> > Jeg vil gerne prøve styre alt design fra css-arket, så jeg har valgt ikke
> > at bruge script løsningen.
> > ?-tegnet , virker nu . Det var <H2> jeg havde focuseret på ,da ?-tegnet er
> > en H2 , og ikke hele boxen som helhed.
> > Jeg har læst om links og skift et billed med CSS på html - men jeg kan
> > ikke blive klog på hvad det er der driller.
> > Nu er det box3 - den turkise firkant - der skulle gerne være et andet
> > billede når musen er henover - men hvordan ?
> > Siden er herhttp://www.checkthisout.dk/
>
> Sådan:
> #box1 a, #box2 a, #box3 a, #box4 a{
> width:220px;
> height:220px;
> color: white;
> float: left;
> font-size:1.6em;
> font-weight: bold;
> letter-spacing : 0.2em;
> text-align: center;
> line-height: 180px;
> text-decoration:none;}
>
> #box1 a{background-color: #48f558;}
> #box2 a{background: url(../images/baggrunde/blomster_blaa1_220x220.gif);}
> #box3 a{background:#1ECAEC;}
> #box3 a:hover {background: url(../images/baggrunde/oje_220x220.gif); }
> #box4 a{background-color: #8b151a;}
> #box4 a:hover {color:#fff; font-size:2.4em;}
>
> og
>
> <div id="box1">
> <a href="http://www.checkthisout.dk/kunst/oversigt.htm">Kunst
> </div>
>
> <div id="box2">
> <a
> href="http://www.checkthisout.dk/test/lone_seeberg/side_1.htm">Test
> </div>
>
> <div id="box3">
> <a class="h2" href="http://www.checkthisout.dk/illu/oversigt.htm">Illu
> </div>
>
> <div id="box4">
> <a href="http://www.checkthisout.dk/privat.htm">?
> </div>
>
> Tror det virker :)
>
> --
> Mvh Marianne
> design af:www.dhejne.dk-www.ragdollys-cat-link.dkwww.singingwolfs.dk-www.royalmontana.dk

Og hvis du vil undgå at billedet "flimrer" første gang musen kører
over det:

#boxX {
width:xx;
height:yy;
backgrund-image:url(hover-billede);
}

#boxX a {
display:block;
height:yy;
width:xx;
background-image:url(baggrunds-billede);
}

#boxX a:hover { background-image:url(hover-billede); }

på #boxX a skal der nok lidt padding til for at få centreret teksten.

Dette går at boksen har hover-billedet som baggrund og derved bliver
det loaded når siden indlæses. Ovenpå dette kommer så a med baggrund
og hoverbillede.

Mvh
Jacob Ask

---

En tilføgelse. Med display:block på a får du også hover-effekten til
at virke på hele kassen, og ikke kun når du er over teksten.

/ask

---

On Mar 16, 9:06 am, Jens Gyldenkærne Clausen <j...@gyros.invalid>
wrote:
>
> Hvorfor ikke bare:
>
> #boxX a:hover { background-image: none; }
>
> -?
>
> Hvis hover-billedet allerede ligger som baggrund på boksen
> nedenunder, burde det give samme effekt (dog ikke testet)

Det er self rigtigt, om ikke anden kan man for at være sikker angive
baggrundsfarve til transparent (igen ved hover).

---

"Jacob Ask" <jacobask@gmail.com>
On Mar 16, 9:06 am, Jens Gyldenkærne Clausen <j...@gyros.invalid>
wrote:
>
> Hvorfor ikke bare:
>
> #boxX a:hover { background-image: none; }
>
> -?
>
> Hvis hover-billedet allerede ligger som baggrund på boksen
> nedenunder, burde det give samme effekt (dog ikke testet)

Det er self rigtigt, om ikke anden kan man for at være sikker angive
baggrundsfarve til transparent (igen ved hover).

Jubii, det virker nu. ( se her : http://www.checkthisout.dk )

Jeg har ikke fået display:block med, men det gør åbenbart ingen forskel ?
Heller ikke dette med #boxX a:hover { background-image: none; } og
transparent , hvad er fordelen ved dette ?, ligger baggrundsbilledet ikke
allerede i cachen, så det burde da ikke belaste download tiden ? eller er
det en helt anden årsag.

Tak for hjælpen.
--
Venlig hilsen
Charlotte

---

C. Nielsen wrote:
> "Jacob Ask" <jacobask@gmail.com>
> On Mar 16, 9:06 am, Jens Gyldenkærne Clausen <j...@gyros.invalid>
> wrote:
>>
>> Hvorfor ikke bare:
>>
>> #boxX a:hover { background-image: none; }
>>
>> -?
>>
>> Hvis hover-billedet allerede ligger som baggrund på boksen
>> nedenunder, burde det give samme effekt (dog ikke testet)
>
> Det er self rigtigt, om ikke anden kan man for at være sikker angive
> baggrundsfarve til transparent (igen ved hover).
>
> Jubii, det virker nu. ( se her : http://www.checkthisout.dk )
>
> Jeg har ikke fået display:block med, men det gør åbenbart ingen forskel ?
> Heller ikke dette med #boxX a:hover { background-image: none; } og
> transparent , hvad er fordelen ved dette ?, ligger baggrundsbilledet ikke
> allerede i cachen, så det burde da ikke belaste download tiden ? eller er
> det en helt anden årsag.
>
> Tak for hjælpen.

Du burde fjerne disse fra css´en, så du ikke får dobbeltkonfekt!!

#box1 {
width:220px;
height:220px;
color: #66ffff;
background-color: #48F558;
float: left;
}

#box2 {
width:220px;
height:220px;
color: #66ffff;
background-color:inherit;
background-image: url(../images/baggrunde/blomster_blaa1_220x220.gif);
float: left;
}

#box3 {
width:220px;
height:220px;
color: #66ffff;
background-color:inherit;
background-image: url(../images/baggrunde/oje_220x220.gif);
float: left;
clear:left;
}

#box4 {
width:220px;
height:220px;
color: #66ffff;
background-color: #8B151A;
float: left;
}

og hvis du vil ha´ teksten længere ned, kan du sætte line-height til 200px;

--
Mvh Marianne
design af: www.dhejne.dk - www.ragdollys-cat-link.dk
www.singingwolfs.dk - www.royalmontana.dk