/ 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
5 x hover i samme div?
Fra : Poda


Dato : 19-05-11 13:55

Hejsa.

Nu har jeg søgt bredt og længe, uden at finde løsningen på min
lille opgave...:

Jeg har en div, der som udgangspunkt har et baggrundsbillede -
lad os kalde det billede for 'A'.

Umiddelbart over denne div, har jeg 5 menupunkter (eller
thumbnails ... har ikke besluttet mig endnu). Når jeg 'hover' et
af disse menupunkter, så skal hvert enkelt dels være link til en
ny side, men også - og nu kommer problematikken; billede A skal
udskiftes med en nyt billede. Om muligt, må det 'nye' billede
også være link til samme side, som selve menupunktet.

Hvert menupunkt skal altså have 2 funktioner:
1) Link til anden side
2) Udskifte billedet i div'en

2a) Bonus: Hvis billedet som vises når der er hover på et givent
menupunkt, kan forblive selvom musen forlader menupunktet OG være
link til samme side som "det forladte" menupunktet, så ville det
jo være ren blær!

Jeg ønsker IKKE at gøre brug af Java - KUN CSS!

Håber der er en derude, som kan se problematikken - og har
løsningen :D

\ Jean

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

 
 
Karl Erik Christense~ (19-05-2011)
Kommentar
Fra : Karl Erik Christense~


Dato : 19-05-11 17:00

On 19-05-2011 14:55, Poda wrote:
> Hejsa.
>
> Nu har jeg søgt bredt og længe, uden at finde løsningen på min
> lille opgave...:
>
> Jeg har en div, der som udgangspunkt har et baggrundsbillede -
> lad os kalde det billede for 'A'.
>
> Umiddelbart over denne div, har jeg 5 menupunkter (eller
> thumbnails ... har ikke besluttet mig endnu). Når jeg 'hover' et
> af disse menupunkter, så skal hvert enkelt dels være link til en
> ny side, men også - og nu kommer problematikken; billede A skal
> udskiftes med en nyt billede. Om muligt, må det 'nye' billede
> også være link til samme side, som selve menupunktet.
>
> Hvert menupunkt skal altså have 2 funktioner:
> 1) Link til anden side
> 2) Udskifte billedet i div'en
>
> 2a) Bonus: Hvis billedet som vises når der er hover på et givent
> menupunkt, kan forblive selvom musen forlader menupunktet OG være
> link til samme side som "det forladte" menupunktet, så ville det
> jo være ren blær!
>
> Jeg ønsker IKKE at gøre brug af Java - KUN CSS!
>
> Håber der er en derude, som kan se problematikken - og har
> løsningen :D
>
> \ Jean
>

Et baggrundsbillede kan ikke være et link.

Noget i stil med det du efterlyser kan ses her:
http://webdesign.ranunkelvej.com/test5/farvelink.html

Prøv at lege lidt med ideen

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign

Birger Sørensen (19-05-2011)
Kommentar
Fra : Birger Sørensen


Dato : 19-05-11 17:16

Efter mange tanker skrev Poda:
> Hejsa.
>
> Nu har jeg søgt bredt og længe, uden at finde løsningen på min
> lille opgave...:
>
> Jeg har en div, der som udgangspunkt har et baggrundsbillede -
> lad os kalde det billede for 'A'.
>
> Umiddelbart over denne div, har jeg 5 menupunkter (eller
> thumbnails ... har ikke besluttet mig endnu). Når jeg 'hover' et
> af disse menupunkter, så skal hvert enkelt dels være link til en
> ny side, men også - og nu kommer problematikken; billede A skal
> udskiftes med en nyt billede. Om muligt, må det 'nye' billede
> også være link til samme side, som selve menupunktet.
>
> Hvert menupunkt skal altså have 2 funktioner:
> 1) Link til anden side
> 2) Udskifte billedet i div'en
>
> 2a) Bonus: Hvis billedet som vises når der er hover på et givent
> menupunkt, kan forblive selvom musen forlader menupunktet OG være
> link til samme side som "det forladte" menupunktet, så ville det
> jo være ren blær!
>
> Jeg ønsker IKKE at gøre brug af Java - KUN CSS!
>
> Håber der er en derude, som kan se problematikken - og har
> løsningen :D
>
> \ Jean

Ked af at skuffe dig, men det ligger i definitionerne.
CSS - Cascading Style Sheets -, er en måde at bestemme hvordan man vil
have elemnterne vist - og der er *ikke* indbygget nogen funktionalitet.
Så når du vil have et element til at gøre noget ved et andet, er det
ikke CSS men javascript du skal have fat i.

<a href="anden_side.html"><img src="thumbnail.jpg" alt="anden side"
onmouseover="document.getElementById('imgA').src='nyt_billed.jpg';document.getElementById('linkA').href='anden_side.html';"></a>
vil gøre hvad du beder om, hvis dit billede A, er sat sådan sammen:
<a id="linkA" href="opr_link.html"><img id="imgA" src="opr_billede.jpg"
alt="valgt element"></a>

Det er ikke kønt eller anbefalelsesværdigt - javascript bør ligge i
header og kaldes som en funktion - men det skulle gerne være tæt på at
virke....

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Rune Jensen (19-05-2011)
Kommentar
Fra : Rune Jensen


Dato : 19-05-11 11:04

On 19 Maj, 18:16, Birger Sørensen <s...@bbsorensen.com> wrote:

> Så når du vil have et element til at gøre noget ved et andet, er det
> ikke CSS men javascript du skal have fat i.

Hm. Lad os sige, du har to DIVer ved siden af hinanden. Du laver så
en :hover på den første, og den anden kan så påvirkes udfra det.
Forudsat, de ligger på samme niveau, og har fælles parent.

<div id="a">Hover her</div>
<dib id="b">Baggrundsbillede her</div>

#b{
background: url(billede1.jpg);
}

#a:hover+#b{
background: url(billede2.jpg);
}


Grundlæggende:
Som udgangspunkt sæt baggrundsbillede i B til billede1

Hvis B ligger ved siden af en DIV med IDen A (og det gør den altid),
som samtidig har en :hover, så sæt background af B til billede 2.


Pseudokoden ovenfor er ikke testet, men mener nok, det skulle kunne
lykkes.

Hovedindgangen til nogensomhelst funktionalitet i CSS, ligger absolut
i :hover, :active, :focus osv. Det er det eneste man kan (hvis ikke
man vil CSS3), men ret effektivt.

Til gengæld er sådan noget også ret "dyrt" ved større sider, eftersom
CSS i princippet ikke er bygget til det. Særligt skal det testes i IE
og vistnok også Firefox, når man bruger :hover på andet end <a>. Ikke
sikker på nyeste versioner, dog.


MVH
Rune Jensen

Poda (23-05-2011)
Kommentar
Fra : Poda


Dato : 23-05-11 08:46

Rune Jensen wrote in dk.edb.internet.webdesign.html:
> On 19 Maj, 18:16, Birger Sørensen <s...@bbsorensen.com> wrote:
>
> Hm. Lad os sige, du har to DIVer ved siden af hinanden. Du laver så
> en :hover på den første, og den anden kan så påvirkes udfra det.
> Forudsat, de ligger på samme niveau, og har fælles parent.
>
> <div id="a">Hover her</div>
> <dib id="b">Baggrundsbillede her</div>
>
> #b{
> background: url(billede1.jpg);
> }
>
> #a:hover+#b{
> background: url(billede2.jpg);
> }
>
> MVH
> Rune Jensen

Hvordan får jeg dette til at spille? Jeg kan ikke lige se, hvordan jeg
får .billedholder til at vise forskellige billeder, alt efter hvad der
bliver :hoveret i de øverste 5 div's

<head>
<style>
#dyr{float:left; margin-right: 22px;}
#have{float:left; margin-right: 22px;}
#porte{float:left; margin-right: 22px;}
#natur{float:left; margin-right: 22px;}
#montage{float:left; margin-right:;}
..billedeholder #dyr{background: url(poda-hegn-hest-hestehegn.jpg);
width:940px; height:356;}
..billedeholder #have{background: url(poda-hegn-havehegn.jpg);
width:940px; height:356;}
..billedeholder #porte{background: url(poda-hegn-porte-laager.jpg);
width:940px; height:356;}
..billedeholder #natur{background: url(poda-hegn-naturpleje.jpg);
width:940px; height:356;}
..billedeholder #montage{background: url(poda-hegn-montage-service.jpg);
width:940px; height:356;}
</style>
</head>
<body>
<div id="dyr">Hegn til dyr</div>
<div id="have">Hegn til haven</div>
<div id="porte">Porte og låger</div>
<div id="natur">Natyrpleje</div>
<div id="montage">Montage og service</div>
<div style="clear:both"></div>
<div class="billedeholder"></div>
</body>

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

Rune Jensen (23-05-2011)
Kommentar
Fra : Rune Jensen


Dato : 23-05-11 17:48

On 23 Maj, 09:46, Poda <j...@detteskalslettespoda.com> wrote:

> Hvordan får jeg dette til at spille? Jeg kan ikke lige se, hvordan jeg
> får .billedholder til at vise forskellige billeder, alt efter hvad der
> bliver :hoveret i de øverste 5 div's
>
<CLIP>
> <div id="dyr">Hegn til dyr</div>
> <div id="have">Hegn til haven</div>
> <div id="porte">Porte og låger</div>
> <div id="natur">Natyrpleje</div>
> <div id="montage">Montage og service</div>
> <div style="clear:both"></div>
> <div class="billedeholder"></div>

Det kan du ikke med CSS på den måde jeg skrev. Fordi det forudsætter,
at den DIV som hovers over ligger ved siden af billedholderen i
HTMLen.

Men hvis det eneste du vil med den ekstra DIV er at bruge den til
billedholder, så kan du måske smutte det hele i en <ul> i stedet.

Noget a la dette?
http://meyerweb.com/eric/css/edge/popups/demo2b.html

Har du link til din side?


MVH
Rune Jensen

Leif Neland (19-05-2011)
Kommentar
Fra : Leif Neland


Dato : 19-05-11 21:41

Den 19-05-2011 14:55, Poda skrev:
>
> Jeg ønsker IKKE at gøre brug af Java - KUN CSS!
>
Java er nok overkill.
Men hvad med javascript?

--
Bevar P2, luk P3, der er nok P3'er i forvejen.

Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408914
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste