login  Naam:   Wachtwoord: 
Registreer je!
 Forum

div onmouseover (Opgelost)

Offline skillat2 - 13/04/2007 16:26
Avatar van skillat2HTML beginner IK heb 2 divs, nou wil ik toepassen als je met de muis over div1 of div2 heen gaat dat zowel div1 als div2 een andere background color krijgen.

In tabellen is dit een makkie natuurlijk met <tr>.. maar ik wil het graag met divs doen.

Is het mogelijk ? zoja hoe ?

<..div1..> <..div2..>
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2.    <head>
  3.       <title>onmouseover</title>
  4.    </head>
  5.    <body>
  6.       <div style="onmouseover="this.className='mouseover';" onmouseout="this.className='nomouseover'">div1</div>
  7.       <div>div2</div>
  8.    </body>
  9. </html>

5 antwoorden

Gesponsorde links
Offline ArndJan - 13/04/2007 16:43 (laatste wijziging 13/04/2007 16:43)
Avatar van ArndJan PHP interesse
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="bg_color" onmouseover="document.getElementById('bg_color').style.background='#000'">1</div>
  2. <div id="bg_color" onmouseover="document.getElementById('bg_color').style.background='#000'">2</div>
Zoiets??

Oja voor de onmouseout:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. onmouseout="document.getElementById('bg_color').style.background=''"


Dan heb je je gewone achtergrond kleur weer bij het verlaten van de items.

:cool: 
Offline skillat2 - 13/04/2007 17:31 (laatste wijziging 13/04/2007 18:59)
Avatar van skillat2 HTML beginner werkt niet.. alleen de eerste div werkt dan.
ID moet uniek zijn.. dus 2x hetzelfde kan niet.

xhtml validator geeft dit aan:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. line 40 column 21 - Warning: <div> anchor "bg_color" already defined


php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="bg_color" style="float: left;width: 200px;" onmouseover="document.getElementById(\'bg_color\').style.background=\'#FF0000\'" onmouseout="document.getElementById(\'bg_color\').style.background=\'#FFFFFF\'">
  2. 1
  3. </div>
  4. <div id="bg_color" style="float: left;width: 200px;" onmouseover="document.getElementById(\'bg_color\').style.background=\'#FF0000\'" onmouseout="document.getElementById(\'bg_color\').style.background=\'#FFFFFF\'">
  5. 2
  6. </div>
Offline ArndJan - 13/04/2007 19:23 (laatste wijziging 13/04/2007 19:24)
Avatar van ArndJan PHP interesse Dan doe je het zo:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="bg_color1" onmouseover="document.getElementById('bg_color1').style.background='#000';document.getElementById('bg_color2').style.background='#000'">1</div>
  2. <div id="bg_color2" onmouseover="document.getElementById('bg_color1').style.background='#000';document.getElementById('bg_color2').style.background='#000'">2</div>


Lijkt me vrij logisch... 
Offline phpfreak - 14/04/2007 11:39
Avatar van phpfreak PHP beginner Als je meerdere div's hebt, kan je met een functie werken, bvb
php code - Bekijk de code zonder highlighting - Klap code in 
  1. function over(ID,color){
  2. document.getElementById(ID).style.background=color;
  3. }

en in je Divs
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id='bg_color1' onmouseover="over('bg_color1','#000')">

is al een stuk korter, nu ook nog doen voor de andere divs en met onmouseout (daar kan je ook die functie voor gebruiken, enkel andere kleurcode invullen
Offline skillat2 - 15/04/2007 13:27 (laatste wijziging 15/04/2007 13:30)
Avatar van skillat2 HTML beginner
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.227s