login  Naam:   Wachtwoord: 
Registreer je!
 Forum

onmouseover ander object

Offline sir_green - 26/03/2011 17:32 (laatste wijziging 26/03/2011 17:32)
Avatar van sir_greenPHP interesse hello,

een simpele vraag vermoed ik, maar omdat mijn kennis van js nagenoeg nul is kom ik er niet uit.

Ik heb een div, met daarin een p-element met tekst, nu is het de bedoeling dat als ik over de div ga, de classname van de tekst veranderd.

Ik heb al iets geprobeerd maar dat werkt niet:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div onmouseover="document.menu_item.className='adres'">
  2. <h1 class="menu_item" >HOME</h1> 
  3. </div>


Weet iemand hoe ik dit op kan lossen?

Alvast bedankt!

5 antwoorden

Gesponsorde links
Offline WouterJ - 26/03/2011 19:19
Avatar van WouterJ HTML gevorderde Je kan beter een functie maken, die je dan aanroept bij mouseOver. En daarnaast werkt document.menu_item niet, je moet werken met getElementById of -wat in dit geval beter is- getElementsByClassName. In geval van ClassName zul je moeten werken met arrays:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. // Maak de functie changeClass aan.
  2. function changeClass() {
  3.  
  4.   // Maak nu een variabele aan waarin we de elementen stoppen
  5.   var elem = document.getElementsByClassName('menu_item');
  6.  
  7.   // Met de for loop lopen we elk item in de array langs.
  8.   // Dit komt omdat we aangeven dat var i 0 is. Bij var i
  9.   // wordt er telkens 1 opgeteld tot dat i groter of gelijk 
  10.   // aan elem.length (de lengte van de array) wordt.
  11.   for(var i = 0; i < elem.length; i++) {
  12.  
  13.     // Nu gaan we de code uitvoeren die we moesten doen,
  14.     // dus de className veranderen. Doormiddel van [i] 
  15.     // halen we een element uit de array. [0] geeft het eerste 
  16.     // element, ect. 
  17.     elem[i].className = 'adres';
  18.  
  19.   }
  20.  
  21. }

De HTML code wordt dan:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div onmouseover="changeClass()">
  2.   <h1 class="menu_item">Home</h1>
  3.   <h1 class="menu_item">Contact</h1>
  4. </div>
Offline sir_green - 28/03/2011 10:17
Avatar van sir_green PHP interesse Op zich werkt het idee, maar nog niet helemaal.
Je hebt zelf inderdaad al de vervolg stap aan toegevoegd om er een contact veld extra bij te maken.
Maar als ik nu over contact ga, veranderd hij de classname van home, en als ik twee keer over home ga, verandert hij eerst de classname van home, maar daarna ook die van contact.

Het is de bedoeling dat de classname alleen gewijzigd wordt als ik over het desbetreffende menu item ga.

Ik kan natuurlijk voor elke knop een nieuwe functie maken, maar ik kan me goed voorstellen als het ook eenvoudiger kan. Wie kan mij hiermee helpen?
Offline WouterJ - 28/03/2011 15:01
Avatar van WouterJ HTML gevorderde Dan zul je moeten werken met this. Je hebt dan de hele for loop niet nodig.
Offline sir_green - 28/03/2011 21:28
Avatar van sir_green PHP interesse this werkt niet. Het gaat niet om de div zelf, maar het h1 element in de div, of zie ik dit verkeerd?
Offline Jurgo - 05/04/2011 16:57
Avatar van Jurgo PHP interesse Waarom wil je de classname veranderen? Wil je bij mouseover een andere opmaakstyle?
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.181s