onmouseout

Status
Niet open voor verdere reacties.
pankmeister

pankmeister

Gebruiker
Lid geworden
15 jul 2008
Berichten
106
In mijn script maak ik gebruik van javascript om de achtergrondkleur van de div te veranderen.
De standaard achtergrondkleur van de div is grijs (dit staat in het style atribuut van de div zelf).
Op de div maak ik gebruik van de onmouseover en onmouseout functie van javascript om de achtergrond kleur te veranderen.
Nu heb ik in mijn onmouseover functie staan dat hij de achtergrondkleur van de div moet veranderen in groen, en heb ik in de onmouseout functie geschreven dat hij de achtergrondkleur van de div moet veranderen in grijs omdat zonder deze functie alle menu's een groene achtergrondkleur blijven hebben, wat niet de bedoeling is.
Nu vroeg ik mij af als het niet mogelijk was om op de een of andere manier javascript te laten weten wat de originele achtergrondkleur was, zodat ik dit niet expliciet opnieuw moet vermelden in de onmouseout functie.
 
Met document.defaultView.getComputedStyle(x, '').getPropertyValue("background-color"); krig ik blijkbaar de kleur in rgb waarden, weet iemand hoe ik deze in hexadecimale vorm kan krijgen?
 
Hey pankmeister, hier heb je geen javascript voor nodig. Dit kan veel simpeler met CSS wat ook nog eens in mindere mate afhankelijk is van browser implementatie. Zeker voor simpele effecten als dit.

Als je dit als basis gebruikt:
HTML: 
<html>
<head>
<style>
div.menu_div
{
  border: /*doe maar wat*/   <---------------- Dit is een syntax fout als je er niks mee doet. Weghalen als je geen border wilt
}

div.menu_div a
{
  display: block; /*Elke link zal hierdoor de volledige breedte van de parent div worden en een eigen regel in beslag nemen */
  background-color: #999999; /*Grijs voor normale achtergrond kleur */
}

div.menu_div a:hover
{
  background-color: #00FF00; /*Groen voor de mouseover state */
}
</style>
</head>

<body>
<div class="menu_div">
  <a href="1.html">Link 1</a>
  <a href="2.html">Link 2</a>
  <a href="3.html">Link 3</a>
</div>
</body>
</html>


Dan krijg je denk ik ongeveer wat je wilt. Ookal zijn de kleuren die ik heb gekozen waarschijnlijk niet wat je wilt. Je kunt de container en de links zelf stijlen zoals je wilt.


/edit: Als je meer over CSS wilt weten is http://w3schools.com/css/default.asp een goede plaats om te beginnen.


/
 
Laatst bewerkt:
Glest zei:
Hey pankmeister, hier heb je geen javascript voor nodig. Dit kan veel simpeler met CSS wat ook nog eens in mindere mate afhankelijk is van browser implementatie. Zeker voor simpele effecten als dit.

Als je dit als basis gebruikt:
HTML: 
<html>
<head>
<style>
div.menu_div
{
  border: /*doe maar wat*/   <---------------- Dit is een syntax fout als je er niks mee doet. Weghalen als je geen border wilt
}

div.menu_div a
{
  display: block; /*Elke link zal hierdoor de volledige breedte van de parent div worden en een eigen regel in beslag nemen */
  background-color: #999999; /*Grijs voor normale achtergrond kleur */
}

div.menu_div a:hover
{
  background-color: #00FF00; /*Groen voor de mouseover state */
}
</style>
</head>

<body>
<div class="menu_div">
  <a href="1.html">Link 1</a>
  <a href="2.html">Link 2</a>
  <a href="3.html">Link 3</a>
</div>
</body>
</html>


Dan krijg je denk ik ongeveer wat je wilt. Ookal zijn de kleuren die ik heb gekozen waarschijnlijk niet wat je wilt. Je kunt de container en de links zelf stijlen zoals je wilt.


/edit: Als je meer over CSS wilt weten is http://w3schools.com/css/default.asp een goede plaats om te beginnen.


/
Klik om te vergroten...

Het probleem is, als het met css moet dat het inline moet gebeuren.
Het is namelijk zo dat 1 menu standaard de groene kleur heeft en met een hover grijs moet worden en de andere menus standaard grijs zijn en met een hover groen moeten worden.
Mij lijkt het niet mogelijk om een hover inline te schrijven?
 
Johantrax zei:
Nog niet van classes gehoord (in css-context)?
Klik om te vergroten...

Jawel, maar het probleem is dat het niet mogelijk is iets in het header gedeelde aan te passen. Dit gedeelde staat vast voor de gehele site.
Iedere pagina van de site haalt hieruit de basis css, wat nodig is voor de layout van de pagina.
Echter de dingen wat vaststaan op de pagina, en niets met layout te maken hebben moeten in de pagina zelf komen, zodat de layout van de pagina gemakkelijk kan veranderen.
 
Laatst bewerkt:
Ik neem aan dat je menu op elke pagina voor komt, dus dat is zoiezo iets wat je in je header (of een extern css bestand) wilt zetten. Je moet dus gewoon je header weizigen (of extern css bestand).

Javascript is echt een slechte oplossing voor iets als dit:eek:
 
Glest zei:
Ik neem aan dat je menu op elke pagina voor komt, dus dat is zoiezo iets wat je in je header (of een extern css bestand) wilt zetten. Je moet dus gewoon je header weizigen (of extern css bestand).

Javascript is echt een slechte oplossing voor iets als dit:eek:
Klik om te vergroten...

Het is eigenlijk voor een kalender, wat niet op elke pagina voorkomt.
Maar is het mogelijk om een onmouseout te wijzigingen van de onmouseover ongedaan te laten maken door te kijken in de style van de div zelf ipv ze opnieuw te moeten defineren in de onmouseout functie? Indien niet zal ik het met css oplossen.
 
Wat je wilt kan met javascript, maar geloof me, CSS is de beste oplossing. Zelf als het alleen voor een kalender is zou je nog steeds de CSS in de header moeten toevoegen. Als je de header van je pagina niet kan wijzigen per pagina heb je een ontwerp foutje in je site.

Wat ik zou doen is een kalender.css maken met alle CSS die specifiek voor de kalender is. Als je met php werkt en je pagina door één functie inelkaar gezet wordt dan kun je die functie aanpassen om een extra argument te nemen voor tekst die in de header toegevoegd moet worden.

Als je meer vertelt over hoe je website skelet in elkaar zit kunnen we je daarbij vast ook helpen.:thumb:
 
als je perse naar javascript wil:

zorg ervoor dat je een variabele definieert buiten je functies om, zodat beide functies er toegang tot hebben.

in je onmouseover neem je dan als eerste de huidige waarde van je div, en plaatst deze in die variabele. Daarna pas wijzig je de waarde van je div.
In de onmouseout geef je de div dan gewoon opnieuw de waarde die in je variabele zit.


Maar inderdaad, js is hier geen ideale oplossing voor...
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan