[JavaScript] onMouseOut werkend krijgen.

[PinjoTweaker]

Hallo,
Ik ben bezig met een site maken. Deels omdat ik gewoon een site wil maken, en deels omdat ik mijn programmeer ervaring wat wil opschroeven. Maar nou zit ik met een probleem.

Ik wil boven aan mijn pagina het een menu (bij mij "menu1" geheten). Deze geeft aan welke onderdelen er op de site zijn. Net zoiets als hierboven bij tweakers dus. Dan is er nog een tweede menu (bij mij "menu2" geheten) die aan de linker kant staat. Hierin moet informatie/nieuws/andere zooi komen over het tabje (=onderdeel) van de site waar je nu bent. Maar als je dan over een ander tabje heen gaan gaat, wil ik dat de informatie van dat onderdeel/tabje zichtbaar wordt in menu2. Tot zover geen probleem, alles lukt.
Maar nu iets crusiaals, en dat is dat als je weer van het tabje af gaat, dan moet de informatie van menu2 weer terugspringen naar het onderdeel/tabje waar je op dat moment bent. En dat lukt nog niet heel erg. Ik weet niet hoe ik in JavaScript moet opslaan in welke tab ik ben. Ik heb al gezocht naar Globale variabelen, die ook buiten de functie beschikbaar moeten zijn, maar dit werkt niet (= bij mij niet ).

Kan iemand mij op de juiste weg helpen? Ik doe het hieronder met het veranderen van kleuren, als dat dan lukt kan ik zelf wel het veranderen van tekst erin zetten enzo.

Hier de code die ik gebruik (het nuttige stuk dan):

JavaScript:

function change(color){
    var leading_color = color;
    document.getElementById('menu2').style.backgroundColor = leading_color;     
        }

function change_over(color){
    document.getElementById('menu2').style.backgroundColor = color;
    }

function change_out(){ 
    document.getElementById('menu2').style.backgroundColor = leading_color;
        }

HTML:

            <div id="menu1">
                <div class="item" style="background-color: red;" onClick="change('red')" onMouseOver="change_over('red')" onMouseOut="change_out()"><a href="#">Home</a></div>
                <div class="item" style="background-color: yellow;" onClick="change('yellow')" onMouseOver="change_over('yellow')" onMouseOut="change_out()"><a href="#">Html</a></div>
                <div class="item" style="background-color: purple;" onClick="change('purple')" onMouseOver="change_over('purple')" onMouseOut="change_out()"><a href="#">Css</a></div>
                <div class="item" style="background-color: green;" onClick="change('green')" onMouseOver="change_over('green')" onMouseOut="change_out()"><a href="#">JavaScript</a></div>
                <div class="item" style="background-color: orange;" onClick="change('orange')" onMouseOver="change_over('orange')" onMouseOut="change_out()"><a href="#">Php</a></div>              
            </div>
            
            <div id="header">
                <img src="img/banner.jpg">
            </div>
            
            <div id="menu2">
                Tips voor vandaag: <br /><br /> 
                <a href="#">hallo1</a><br />
                <a href="#">hallo2</a><br />
            </div>

Alvast bedankt

[vorlox]

Als je echt je javscript wil opvijzelen, neem dan de moeite om de lessen van Dhr. Crockford eens te volgen.
Je moet effe doorhappen want af en toe is hij saai, maar na zowel de javascript course, en de advanced javascript course dan weet je waar je moet zoeken.
Vergeet niet de bijbehorende powerpoint te downloaden.

http://video.yahoo.com/watch/111593/1710507

suc6

[steffex]

je "leading_color" bij de change_out functie is leeg! aangezien je een var "leading_color" declareerd in change is deze ook alleen maar beschikbaar in die functie.

wat je moet doen om dit aan de gang te krijgen is dit:

JavaScript:

var leading_color = null;
function change(color){
    leading_color = color;
    document.getElementById('menu2').style.backgroundColor = leading_color;        
        }

function change_over(color){
    document.getElementById('menu2').style.backgroundColor = color;
    }

function change_out(){ 
    document.getElementById('menu2').style.backgroundColor = leading_color;
        }

dit is wel basis javascript en daarnaast niet echt de meest optimale manier. dit is namelijk ook prima te realiseren met behulp van css, wat tevens blijft werken op het moment dat een bezoeker javascript heeft uitgeschakeld in de browser...

[ Voor 6% gewijzigd door steffex op 27-12-2008 21:56 ]

[PinjoTweaker]

Ik ben inderdaad niet zo goed in Js, maarja... daarom doe ik dit ook. Iniedergeval bedankt voor jullie snelle hulp. Ik zal morgen kijken of het gaat werken, want het design doe ik op mijn andere computer. Ik zal de lessen ook eens doorkijken, het is tenslotte vakantie dus tijd genoeg :d.

Ik dacht dat ik met var al aangaf dat het een globale variabele was, maar als ik hem dus buiten een functie aanmaak blijft hij daarbuiten ook beschikbaar, als ik in de functie de waarde verander. Nouja.. weer wat geleerd.

Over dat css... ik weet wel hoe ik met css de kleur verander etc. (hoewel dit alleen werkt met non-IE) van een divje, maar niet hoe ik de kleur van een ander divje verander als de eerste div wordt gehoverd (anglisisme ). Als dat zo is, dan zou dat top! zijn.

[PinjoTweaker]

Geprobeerd, en het werkt.
Bedankt allebei.
Ik volg de cursus, en ik moet wel even wennen aan alle termen die hij gebruikt, maar over het algemeen kan ik het nog volgen (de eerste)