[JS/HTML/CSS?] Verschillende onmouseover states in menu*

[D4NG3R]

Ik ben momenteel bezig met een van de eindopdrachten van mijn stage, hiervoor moet ik een website met relevante data etc samenstellen. Aangezien ik alle data en info al heb ben ik bezig met de afwerking van het design.

Wanneer je je op een pagina bevind is de knop van die pagina ingedrukt met dit effect:


Wanneer je je muis over een van de knoppen haalt krijg je dit:


Note: De O in Foto's weergeeft alleen zo vreemd in IE7 -wat hier @ stage gebruikt word-. In FF en nieuwere versies van IE is hij normaal

Het probleem is echter dat ik graag wil dat de knop van de huidige pagina (Het bedrijf) weer naar boven komt wanneer je je muis op een van de andere buttons houd. (En dat hij weer word ingedrukt als je je muis van de andere knoppen afhaalt)

Huidige code:

Javascript gedeelte:

<script language="Javascript">
 
if (document.images){
 image1 = new Image
 image2 = new Image
 image3 = new Image
 image4 = new Image
 image5 = new Image
 image6 = new Image
 image7 = new Image
 image8 = new Image
 image1.src = 'buttonhome2.png'
 image2.src = 'buttonhome_left.png'
 image3.src = 'buttonwerkzaamheden2.png'
 image4.src = 'buttonwerkzaamheden.png'
 image5.src = 'buttonfotos2.png'
 image6.src = 'buttonfotos.png'
 image7.src = 'buttonorganisatie2.png'
 image8.src = 'buttonorganisatie.png'
}
</script>

Gedeelte voor de 5 knoppen:

<a href="default_groot.htm" onMouseOver="document.mouseover.src=image1.src" onMouseOut="document.mouseover.src=image2.src"><img src="buttonhome_left.png" width="175" height="30" border="0" name="mouseover"></a>
<a href="pagina1.htm" onMouseOver="document.mouseover2.src=image3.src" onMouseOut="document.mouseover2.src=image4.src"><img src="buttonwerkzaamheden.png" width="176" height="30" border="0" name="mouseover2"></a>
<a href="pagina2.htm" onMouseOver="document.mouseover3.src=image5.src" onMouseOut="document.mouseover3.src=image6.src"><img src="buttonfotos.png" width="176" height="30" border="0" name="mouseover3"></a>
<a href="pagina3.htm" onMouseOver="document.mouseover4.src=image7.src" onMouseOut="document.mouseover4.src=image8.src"><img src="buttonorganisatie.png" width="175" height="30" border="0" name="mouseover4"></a>
<img src="buttonbedrijf2.png" width="175" height="30" border="0"></tr>

Mijn idee was om dit te gebruiken bij HTML (maar dan bij elke zin natuurlijk en de javascript voeg ik dus 2 nieuwe image locaties toe)

<a href="pagina3.htm" onMouseOver="document.mouseover4.src=image7.src" && "document.mouseoverextra.src=image9.src onMouseOut="document.mouseover4.src=image8.src" && "document.mouseoverextra.src=image10.src"><img src="buttonorganisatie.png" width="175" height="30" border="0" name="mouseover4"></a>
<img src="buttonbedrijf2.png" width="175" height="30" border="0" name="mouseoverextra">

Echter werkt dit niet .

Wat ik dus eigelijk wil is dat hij 2 afbeeldingen vervangt als je hem op 1 knop houd. Zowel de afbeelding van de knop zelf als die van de huidige pagina.

Heeft iemand een idee? Want een hele tijd googlen levert mij weinig op .

Het is niet echt een huiswerkvraag, aan het design van de website worden geen eisen gesteld. Echter werk ik dingen graag netjes af.

[TERW_DAN]

Waarom doe je dit met plaatjes? Dit kun je toch prima in puur CSS doen?, lijkt mij een heel stuk makkelijker in elk geval.


Hang aan je onMouseover een functie die de eigenschappen van het element aanpast, of dit nu een plaatje is waar je de source van verandert of gewoon de style aanpast, dat kun je prima in een functie duwen, die je bij een onmouseover en onmouseout aanroept.

[ Voor 7% gewijzigd door TERW_DAN op 21-12-2011 11:16 ]

[D4NG3R]

TERW_DAN schreef op woensdag 21 december 2011 @ 11:16:
Waarom doe je dit met plaatjes? Dit kun je toch prima in puur CSS doen?, lijkt mij een heel stuk makkelijker in elk geval.


Hang aan je onMouseover een functie die de eigenschappen van het element aanpast, of dit nu een plaatje is waar je de source van verandert of gewoon de style aanpast, dat kun je prima in een functie duwen, die je bij een onmouseover en onmouseout aanroept.

Word wat lastig aangezien ik niet heel veel ervaring heb met CSS. In mijn geval was deze weg dus wat makkelijker aangezien ik wel ervaring heb met JS/HTML.

(Ik begin volgend jaar @ school met een extra cursus webdesign dus CSS zou dan sowieso aan bod moeten komen).

[mcDavid]

Zo simpel is het:

code:

#menu a.active {background-image: <ingedrukt>;}
#menu:hover a {background-image: <niet ingedrukt>;}
#menu a:hover {background-image: <ingedrukt>;}

[Hican]

Eens met TERW_DAN, echter als je niet sterk bent in CSS is dat wat lastiger

In jouw code zou je het op deze manier op kunnen lossen:

JavaScript:

<a href="#" onMouseOver="document.mouseover.src=image1.src;document.mouseover5.src=image3.src" onMouseOut="document.mouseover.src=image2.src;document.mouseover5.src=image1.src"><img src="<IMAGE>" width="32" height="32" border="0" name="mouseover"></a>

PS. Geef wel even een name attribute mee aan je statische image, waarnaar je dus verwijst in je 'tweede' attribute in de onMouseOver en onMouseOut.

[ Voor 7% gewijzigd door Hican op 21-12-2011 11:24 ]

[TERW_DAN]

mcDavid schreef op woensdag 21 december 2011 @ 11:23:
Zo simpel is het:

code:

#menu a.active {background-image: <ingedrukt>;}
#menu:hover a {background-image: <niet ingedrukt>;}
#menu a:hover {background-image: <ingedrukt>;}

Zo simpel is het niet, want daarmee regel je niet dat die ene knop ingedrukt lijkt te blijven.

[mcDavid]

TERW_DAN schreef op woensdag 21 december 2011 @ 11:24:
[...]

Zo simpel is het niet, want daarmee regel je niet dat die ene knop ingedrukt lijkt te blijven.

jawel, bovenste regel. Aangenomen dat de knop van de actieve pagina classname "active" heeft.
heb het niet getest overigens, kan me voorstellen dat het nog wat specificity-tweaks nodig heeft.

[ Voor 25% gewijzigd door mcDavid op 21-12-2011 11:26 ]

[D4NG3R]

Hican schreef op woensdag 21 december 2011 @ 11:23:
Eens met TERW_DAN, echter als je niet sterk bent in CSS is dat wat lastiger

In jouw code zou je het op deze manier op kunnen lossen:

JavaScript:

<a href="#" onMouseOver="document.mouseover.src=image1.src;document.mouseover5.src=image3.src" onMouseOut="document.mouseover.src=image2.src;document.mouseover5.src=image1.src"><img src="<IMAGE>" width="32" height="32" border="0" name="mouseover"></a>

PS. Geef wel even een name attribute mee aan je statische image, waarnaar je dus verwijst in je 'tweede' attribute in de onMouseOver en onMouseOut.

Dit werkt. IPV

onMouseOver "image" && "image"

dus gewoon

onMouseOver "image;image"

Thx.

/facepalm dat ik hier niet over na dacht

[ Voor 11% gewijzigd door D4NG3R op 21-12-2011 11:48 ]

[_Thanatos_]

Plus omdat je dit met plaatjes doet, moet de bezoeker al 10 plaatjes downloaden voor 1 menubalk

Doe dit met css, zoals hierboven beschreven. Niet zoveel van css afweten is geen excuus. Dat hóórt bij HTML, je kunt nou eenmaal niet zonder. mcDavid heeft gelijk

De verdere stap is om al die 10 plaatjes te combineren tot 1 grote plaat en dan in CSS die plaat positioneert op alle items.

Cascading Stylesheet:

#menu a { background: url(menu.png) no-repeat; }
#menu a.item1 { background-position 0 0; }
#menu a.item2 { background-position -100px 0; }
#menu a.item3 { background-position -200px 0; }
#menu a.item1.active,
#menu a.item1:hover { background-position 0 -20px; }
#menu a.item2.active,
#menu a.item2:hover { background-position -100px -20px; }
#menu a.item3.active,
#menu a.item3:hover { background-position -200px -20px; }

Zoiets. Niets spannends aan.

[D4NG3R]

_Thanatos_ schreef op woensdag 21 december 2011 @ 12:58:
Plus omdat je dit met plaatjes doet, moet de bezoeker al 10 plaatjes downloaden voor 1 menubalk

Doe dit met css, zoals hierboven beschreven. Niet zoveel van css afweten is geen excuus. Dat hóórt bij HTML, je kunt nou eenmaal niet zonder. mcDavid heeft gelijk

De verdere stap is om al die 10 plaatjes te combineren tot 1 grote plaat en dan in CSS die plaat positioneert op alle items.

Cascading Stylesheet:

#menu a { background: url(menu.png) no-repeat; }
#menu a.item1 { background-position 0 0; }
#menu a.item2 { background-position -100px 0; }
#menu a.item3 { background-position -200px 0; }
#menu a.item1.active,
#menu a.item1:hover { background-position 0 -20px; }
#menu a.item2.active,
#menu a.item2:hover { background-position -100px -20px; }
#menu a.item3.active,
#menu a.item3:hover { background-position -200px -20px; }

Zoiets. Niets spannends aan.

Nee alle afbeeldingen moeten sowieso worden gedownload omdat de leraar die het gaat nakijken elke pagina bezoekt, dus of dit nou op pagina 1 of pagina 5 gebeurt maakt weinig uit .

CSS ga ik me nog wat meer in verdiepen. De huidige methode werkt en kost voor mij (weinig) extra moeite om toe te passen. Echter is een oplossing met CSS veel beter als ik een website ga bouwen die online komt te staan.

Alsnog bedankt voor de input .

[base_]

D4NG3R schreef op woensdag 21 december 2011 @ 13:02:
[...]
Nee alle afbeeldingen moeten sowieso worden gedownload omdat de leraar die het gaat nakijken elke pagina bezoekt, dus of dit nou op pagina 1 of pagina 5 gebeurt maakt weinig uit .

Er wordt bedoeld dat je alle plaatjes samenvoegt (zowel wel als niet ingedrukt) en dat je dmv css de juiste gedeeltes op de juiste plekken laat zien, zie: http://www.alistapart.com/articles/sprites

[alex3305]

Echter is een grote plaat (tot een bepaalde grote) vele malen bandbreedte-efficiënter dan allemaal kleine plaatjes. Google doet dat bijvoorbeeld in hun market, waardoor het geheel een stuk sneller geladen kan worden.

[D4NG3R]

alex3305 schreef op woensdag 21 december 2011 @ 13:08:
Echter is een grote plaat (tot een bepaalde grote) vele malen bandbreedte-efficiënter dan allemaal kleine plaatjes. Google doet dat bijvoorbeeld in hun market, waardoor het geheel een stuk sneller geladen kan worden.

Snap ik maar deze site word straks afgelezen vanaf een USB stick. Dus bandbreedte is bij een plaatje van enkele KB's niet echt een probleem. Ik heb toegepast waar ik al (enige) kennis van had. CSS valt hier momenteel nog niet onder, al ben ik er wel mee bezig.

De bovenstaande link met sprites ga ik doornemen. Leuke stof .

[ Voor 8% gewijzigd door D4NG3R op 21-12-2011 13:14 ]

[base_]

http://www.alistapart.com is interessante stof mbt css, xhtml en javascript

[alex3305]

base_ schreef op woensdag 21 december 2011 @ 13:14:
http://www.alistapart.com is interessante stof mbt css, xhtml en javascript

Eens, maar soms nog vrij lastig voor de beginnende webprogrammeur .

[Cartman!]

D4NG3R schreef op woensdag 21 december 2011 @ 13:10:
Snap ik maar deze site word straks afgelezen vanaf een USB stick. Dus bandbreedte is bij een plaatje van enkele KB's niet echt een probleem. Ik heb toegepast waar ik al (enige) kennis van had. CSS valt hier momenteel nog niet onder, al ben ik er wel mee bezig.

Het gaat er toch om dat jij iets beheerst? Met hedendaagse technieken loop je behoorlijk achter dus dat is wat iedereen hier wil zeggen. Bandbreedte genoeg of niet doet er dus niet toe, techniek van nu gaat het om.

De bovenstaande link met sprites ga ik doornemen. Leuke stof .

Goedzo.

offtopic:
Je zegt dat je nog een cursus webdesign gaat doen, je beseft dat code typen geen design is he?

offtopic:
Een stageplek waar je html/css moet leren waar ze IE7 draaien...waar gaan we heen... een koksschool met botte messen?

[ Voor 7% gewijzigd door Cartman! op 22-12-2011 18:11 ]

[D4NG3R]

Cartman! schreef op donderdag 22 december 2011 @ 18:09:

offtopic:
Je zegt dat je nog een cursus webdesign gaat doen, je beseft dat code typen geen design is he?

offtopic:
Een stageplek waar je html/css moet leren waar ze IE7 draaien...waar gaan we heen... een koksschool met botte messen?

offtopic:
Opleiding systeembeheer. De website is slechts een van de stageopdrachten. Ik doelde meer op webdevelopment trouwens, design inderdaad niet .

[Cartman!]

Prima, dan heb je meteen geleerd dat je ook browsers moet updaten naar de nieuwste versie

[OkkE]

http:// do websites need to look exactly the same in every browser .com/

[D4NG3R]

Cartman! schreef op donderdag 22 december 2011 @ 22:54:
Prima, dan heb je meteen geleerd dat je ook browsers moet updaten naar de nieuwste versie

Ik mag dit jammergenoeg niet beslissen voor mijn stagebedrijf. En met een kleine 800 werkplekken is zomaar even updaten geen optie . (Volgend jaar word Win7 uitgerold dus sowieso een nieuwere browser versie). Hiernaast zou ik zelf nooit bij zo'n verouderde browser blijven (Sowieso al geen IE).

(Ik gebruik trouwens FF Portable (9.0) om alsnog te testen of het fatsoenlijk functioneerd).

OkkE schreef op vrijdag 23 december 2011 @ 08:04:
http:// do websites need to look exactly the same in every browser .com/

.

[ Voor 5% gewijzigd door D4NG3R op 23-12-2011 09:02 ]

[marko77]

D4NG3R schreef op vrijdag 23 december 2011 @ 08:38:
[...]

Ik mag dit jammergenoeg niet beslissen voor mijn stagebedrijf. En met een kleine 800 werkplekken is zomaar even updaten geen optie . (Volgend jaar word Win7 uitgerold dus sowieso een nieuwere browser versie). Hiernaast zou ik zelf nooit bij zo'n verouderde browser blijven (Sowieso al geen IE).

(Ik gebruik trouwens FF Portable (9.0) om alsnog te testen of het fatsoenlijk functioneerd).
[...]

.

Ik zou het toch andersom zien, als je een site goed kunt maken voor IE7, kun je het vele malen makkelijker ook voor de andere browsers. Progressive enhancement anyone?

Feit is dat er nog veel opdrachtgevers zijn die IE7 wel willen ondersteunen, en wie betaalt bepaalt