Hulp bij CSS mouseover - Softwareontwikkeling

dinsdag 13 januari 2009 20:40

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Hallo allen,

Ik heb wat hulp nodig, ik ben mezelf CSS aan het leren via lynda.com.
Ik doe al wat amateur HTML maar wil nu verder met CSS (en misschien daarna PHP)
Ik doe alles in dreamweaver CS4 voornamelijk in design view (ik duik pas in de code als het niet goed werkt).

Ik ben nu bezig met het maken van een mouseover met CSS op de volgende manier.

Ik heb de volgende graphic. (200 bij 200px)
Afbeeldingslocatie: http://www.basandra.nl/got/d.jpg

Afbeeldingslocatie: http://www.basandra.nl/got/d.jpg

ik wil een div maken van 200x100px met deze jpeg als achtergrond en top aligned.
Daardoor zie je alleen het donker grijze vlak, dan bij mouseover moet hij naar bottom aligned gaan zodat je het witte vlak ziet.

Nou komt dit erg slecht uit het voorbeeld dat ze geven. (komt ook omdat ze dit in eens in codeview doen (dreamweaver CS4) en ik dat nog niet goed kan volgen omdat de voorbeelden van hun erg vol met code staat.

Nou ben ik het zelf aan het proberen na te maken maar dat wil nog niet lukken.
Ik heb ff een voorbeeld gemaakt van mij code, daar staat het volgende in:

code:

<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    background-color: #CCC;
}
#test {
    position:absolute;
    width:450px;
    height:100px;
    z-index:1;
    background-image: url(d.jpg);
    top: 200px;
    left: 250px;
    background-repeat: no-repeat;
    text-align: right;
}
#test a:link #test a:visited {
    background-position:top;
}
#test a:hover #test a:active {
    background-position:bottom;
    border:none
}
-->
</style></head>

<body>
<img src="d.jpg" alt="test" width="200" height="200" align="left" />
<div id="test">&lt;--- Dit vlak wil ik laten verspringen.<br />
  door middel van mouseover in CSS
</div>
<p> &lt;--Dit is de graphic die ik gebruikt heb en wil laten verspringen.</p>
<p>&nbsp;</p>
</body>

ff voor de duidelijkheid:
Google en GoT staan vol met codes maar niet de uitleg zodat ik het snap.
Ik wil alleen snappen wat er fout gaat en dan weer door met de lessen.
Jullie hoeven niet voor mij code te schrijven die dan ga pasten in mijn site, ik wil het leren.

dinsdag 13 januari 2009 20:45

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Je CSS klopt iig niet. Je kan niet een link binnen element test binnen een link binnen element test hebben.

Anyone who gets in between me and my morning coffee should be insecure.

dinsdag 13 januari 2009 20:46

Acties:

0 Henk 'm!

sopsop

[v] [;,,;] [v]

Waarom gebruik je een afbeelding en niet gewoon een background-color?

Verder geef je in je css aan dat het plaatje moet verspringen bij een a:hover. In je div staat echter geen a element.

dinsdag 13 januari 2009 20:48

Acties:

0 Henk 'm!

Herko_ter_Horst

Ja, haal die a's eens weg en zet komma's tussen afzonderlijke elementen/pseudo-elementen.

"Any sufficiently advanced technology is indistinguishable from magic."

dinsdag 13 januari 2009 21:01

Acties:

0 Henk 'm!

Henridv

code:

body {
    background-color: #CCC;
}

#test {
    position:absolute;
    width:450px;
    height:100px;
    z-index:1;
    top: 200px;
    left: 250px;
    text-align: right;
        background: url(d.jpg) no-repeat top left;
}

#test:hover {
    background-position: bottom left;
    border:none
}

Met dit stukje CSS zou het al beter moeten lukken.

Je hebt namelijk geen links staan in je broncode (<a ...> tags).

Wat gebeurt er nu:
Als de site geladen wordt is de achtergrond gepositioneerd top left
Als er gehovered wordt: bottom left

dinsdag 13 januari 2009 21:03

Acties:

0 Henk 'm!

CH4OS

It's a kind of magic

Henridv schreef op dinsdag 13 januari 2009 @ 21:01:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body {
    background-color: #CCC;
}

#test {
    position:absolute;
    width:450px;
    height:100px;
    z-index:1;
    top: 200px;
    left: 250px;
    text-align: right;
        background: url(d.jpg) no-repeat top left;
}

#test:hover {
    background-position: bottom left;
    border:none
}
Met dit stukje CSS zou het al beter moeten lukken.

Je hebt namelijk geen links staan in je broncode (<a ...> tags).

Wat gebeurt er nu:
Als de site geladen wordt is de achtergrond gepositioneerd top left
Als er gehovered wordt: bottom left

Alleen vind IE dat niet zo fijn, die kan :hover, :active, :link én :visited alléén op de anchor tag.

Dus ik vrees dat als het crossbrowser moet werken, dat een onmouseover="jsFunctie1();" en onmouseout="jsFunctie2();" beter werkt in dit geval.

In die JS functie geef je de div dan de nieuwe styling.

Al zie ik JS liever oko echt functionaliteit toevoegen, dan grafische foefjes uit te moeten voeren.

[ Voor 16% gewijzigd door CH4OS op 13-01-2009 21:05 ]

dinsdag 13 januari 2009 21:16

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

MueR schreef op dinsdag 13 januari 2009 @ 20:45:
Je CSS klopt iig niet. Je kan niet een link binnen element test binnen een link binnen element test hebben.

Sorrie een brug te ver voor me

sopsop schreef op dinsdag 13 januari 2009 @ 20:46:
Waarom gebruik je een afbeelding en niet gewoon een background-color?

Verder geef je in je css aan dat het plaatje moet verspringen bij een a:hover. In je div staat echter geen a element.

dit is maar een voorbeeld, straks zal dit een plaatje zijn.

Herko_ter_Horst schreef op dinsdag 13 januari 2009 @ 20:48:
Ja, haal die a's eens weg en zet komma's tussen afzonderlijke elementen/pseudo-elementen.

die a´s weghalen ok maar dan ben je me kwijt

Henridv schreef op dinsdag 13 januari 2009 @ 21:01:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body {
    background-color: #CCC;
}

#test {
    position:absolute;
    width:450px;
    height:100px;
    z-index:1;
    top: 200px;
    left: 250px;
    text-align: right;
        background: url(d.jpg) no-repeat top left;
}

#test:hover {
    background-position: bottom left;
    border:none
}
Met dit stukje CSS zou het al beter moeten lukken.

Je hebt namelijk geen links staan in je broncode (<a ...> tags).

Wat gebeurt er nu:
Als de site geladen wordt is de achtergrond gepositioneerd top left
Als er gehovered wordt: bottom left

Ok nu begint bij mij het kwartje te vallen.
Het voorbeeld bij Lynda.com gaat over een contact button en ik wil alleen een achtergrond plaatje laten verspringen zonder link.
Vandaar geen a:link,a:active,a:visited. En #test:hover zonder de a: omdat er geen spraken is van een link.

Die recht en links uitlijning, is dat beter of verplicht?

GJtje schreef op dinsdag 13 januari 2009 @ 21:03:
[...]
Alleen vind IE dat niet zo fijn, die kan :hover, :active, :link én :visited alléén op de anchor tag.

Dus ik vrees dat als het crossbrowser moet werken, dat een onmouseover="jsFunctie1();" en onmouseout="jsFunctie2();" beter werkt in dit geval.

In die JS functie geef je de div dan de nieuwe styling. Al zie ik JS liever oko echt functionaliteit toevoegen, dan grafische foefjes uit te moeten voeren.

Normaal doe ik dit ook met swamp image maar wil dit ook leren via CSS. Dat ziet er ook erg mooi uit.

dinsdag 13 januari 2009 21:36

Acties:

0 Henk 'm!

Henridv

Verwijderd schreef op dinsdag 13 januari 2009 @ 21:16:
[...]
Ok nu begint bij mij het kwartje te vallen.
Het voorbeeld bij Lynda.com gaat over een contact button en ik wil alleen een achtergrond plaatje laten verspringen zonder link.
Vandaar geen a:link,a:active,a:visited. En #test:hover zonder de a: omdat er geen spraken is van een link.

Die recht en links uitlijning, is dat beter of verplicht?

Welke uitlijning bedoel je?
Die rechtse (text-aligng: right) staat daar omdat je de tekst rechts in het div element wilt hebben, standaard is de text-align left zoals hier op het forum.

Die left in background heb ik erbij gezet omdat je background anders niet zo 'mooi' versprong, in jou code gaat die afbeelding namelijk van center naar left dacht ik.

dinsdag 13 januari 2009 21:51

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Henridv schreef op dinsdag 13 januari 2009 @ 21:36:
[...]

Welke uitlijning bedoel je?
Die rechtse (text-aligng: right) staat daar omdat je de tekst rechts in het div element wilt hebben, standaard is de text-align left zoals hier op het forum.

Die left in background heb ik erbij gezet omdat je background anders niet zo 'mooi' versprong, in jou code gaat die afbeelding namelijk van center naar left dacht ik.

Ok duidelijk, $_/-\o_$

Ik heb het nu door wat ik verkeert deed/dacht en kan weer verder met de lessen.

Voorbeeld van waar ik mee bezig ben (1e opzet)

woensdag 14 januari 2009 09:01

Acties:

0 Henk 'm!

Henridv

Verwijderd schreef op dinsdag 13 januari 2009 @ 21:51:
[...]

Ok duidelijk, $_/-\o_$

Ik heb het nu door wat ik verkeert deed/dacht en kan weer verder met de lessen.

Voorbeeld van waar ik mee bezig ben (1e opzet)

Dat ziet er inderdaad al mooier uit

Misschien houdt je best nog rekening met dit hier:

GJtje schreef op dinsdag 13 januari 2009 @ 21:03:
[...]
Alleen vind IE dat niet zo fijn, die kan :hover, :active, :link én :visited alléén op de anchor tag.

Je zou je CSS code op deze manier dan kunnen opstellen:

code:

#klopper {
    height: 316px;
    width: 259px;
}

#klopper a {
    display: block;
    height: 316px;
    width: 259px;
    background-image: url(beneden/images/test_04.jpg);
    background-repeat: no-repeat;
    background-position:top left;
    text-decoration: none;
}
#klopper a:hover {
    background-position:top right;
    border: none
}

En de HTML code dan:

code:

<table align="center" border="0" cellpadding="0" cellspacing="0">
  <tbody><tr>
    <td colspan="2" id="logo">&nbsp;</td>
    <td rowspan="3" id="mainWindow">&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="2" id="leftSpace">&nbsp;</td>
    <td id="klopper"><a href="blabla">&nbsp;</a></td>
  </tr>
  <tr>
    <td id="botomSpace">&nbsp;</td>
  </tr>
</tbody></table>

De :hover staat nu wel op een a tag, waardoor dit waarschijnlijk ook moet werken in IE (heb het wel niet getest).