/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Hover på H2 og div.
Fra : C. Nielsen


Dato : 09-03-07 16:07

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





 
 
Birger Sørensen (09-03-2007)
Kommentar
Fra : Birger Sørensen


Dato : 09-03-07 17:59

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

tidemann (09-03-2007)
Kommentar
Fra : tidemann


Dato : 09-03-07 18:33

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


Allan Vebel (10-03-2007)
Kommentar
Fra : Allan Vebel


Dato : 10-03-07 16:14

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



C. Nielsen (10-03-2007)
Kommentar
Fra : C. Nielsen


Dato : 10-03-07 23:21


"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





tidemann (15-03-2007)
Kommentar
Fra : tidemann


Dato : 15-03-07 23:10

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


Jens Gyldenkærne Cla~ (16-03-2007)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 16-03-07 09:07

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

Jacob Ask (16-03-2007)
Kommentar
Fra : Jacob Ask


Dato : 16-03-07 08:44

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


Jacob Ask (16-03-2007)
Kommentar
Fra : Jacob Ask


Dato : 16-03-07 08:47


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



Jacob Ask (16-03-2007)
Kommentar
Fra : Jacob Ask


Dato : 16-03-07 13:12

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


C. Nielsen (16-03-2007)
Kommentar
Fra : C. Nielsen


Dato : 16-03-07 23:42


"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







tidemann (17-03-2007)
Kommentar
Fra : tidemann


Dato : 17-03-07 01:15

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


Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408847
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste