Avatar billede encorez Nybegynder
25. april 2009 - 14:41 Der er 9 kommentarer og
2 løsninger

CSS ved mouseover

Hej
Jeg bruger scriptet i bunden til at få undermenuer frem når man klikker på hovedmenu knappen. Det virker fint men jeg vil gerne gøre lidt ekstra.

1. Når man holder musen over feltet den TD med Søg program, skal der komme en "hånd" frem. Hvordan er det koden er for det?
2. Den lidt sværre, når man har klikket på "Søg program" og undermenuen kommer frem, hvordan kan jeg så ændre den TD med "Søg program", med baggrund og farve da jeg gerne vil illustrere at det er den man har valgt? Og det skal selvfølgelig ændre sig tilbage til det oprindelig når man klikker på den igen.

Min kode:
<tr><td class="menu_knap" nowrap="nowrap" onclick="toggle_visibility('sog_program');">Søg program</td></tr>
<tr><td>
  <div id="sog_program" style="display:none;">
  <table><tr><td>Dette er sjult</td></tr></table>
  </div>
</td></tr>

Scriptet
<script type="text/javascript">
function toggle_visibility(id) {
      var e = document.getElementById(id);
      if(e.style.display == 'block')
          e.style.display = 'none';
      else
          e.style.display = 'block';
    }
</script>
Avatar billede encorez Nybegynder
25. april 2009 - 14:58 #1
mht. 1, så har jeg indsat denne  onmouseover="this.style.cursor='hand'; Det virker, men hånden kommer kun når musen holdes oven over teksten i knappen. Den tomme plads der ofte er til højre for teksten, den kommer hånden ikke.
Avatar billede zips Juniormester
25. april 2009 - 15:54 #2
Indsæt cursor:pointer; i din css under menu_knap dette giver en hånd på hele din td med class="menu_knap" da dette vel ikke behøver at være lavet i javascript.
Avatar billede encorez Nybegynder
25. april 2009 - 16:04 #3
Tak, det virker perfekt.

Så mangler jeg den vigtigste. Kan jeg styre baggrund og tekstfarve på den TD, når jeg har klikket på den?
Avatar billede zips Juniormester
25. april 2009 - 16:33 #4
Jeg er langt fra javascript mand, så jeg kan ikke hjælpe med det :-)
Avatar billede majbom Novice
25. april 2009 - 21:33 #5
e.style.backgroundColor = '#00ff00';
Avatar billede majbom Novice
25. april 2009 - 21:33 #6
e.style.color = 'ff00ff';
Avatar billede encorez Nybegynder
26. april 2009 - 09:56 #7
Tak, så fik jeg det til at virke :)

Dog med lidt modifikationer. For med den du skrev splazz, laver baggrund på det id objekt som kommer til syne, men jeg ville have baggrunden på den TD man trykker på til at skifte.
Jeg har ikke rodet meget med det før, men har lavet det sådan

I min TD man klikker på, ekstra parameter same et ID-tag
onclick="toggle_visibility('design','test');" id="test"

Sat ekstra parametre i funktionen, te
function toggle_visibility(id, te) {
      var e = document.getElementById(id);
      var t = document.getElementById(te);
      if(e.style.display == 'block')
          e.style.display = 'none';
      else
          e.style.display = 'block';
      t.style.backgroundColor = '#00ff00';

Det virker fint :) Men skulle der være noget man kan lave bedre for standardens skyld så sig til.

Kan en af jer svare på dette?
Under afvikling af noget hvor kan jeg så "kalde" funktionen toggle_visibility(id, te)?

I PHP skriver jeg dette, men det virker ikke.
else if($menu=="design_layout"){?>
    <script>toggle_visibility('design');
    </script>
    <?
}

Håber I kan hjælpe med denne. Ellers læg svar for jeres hjælp
Avatar billede encorez Nybegynder
26. april 2009 - 10:17 #8
Jeg har løst det andet problem. Det PHP script jeg kører virker men jeg afviklede det for tidligt i min kode.

Læg svar for jeres hjælp
Avatar billede majbom Novice
26. april 2009 - 14:10 #9
nå så misforstod jeg, men det vigtigste er jo osse at du fik det til at virke :)
Avatar billede zips Juniormester
26. april 2009 - 14:14 #10
Her er et svar :-)
Avatar billede majbom Novice
26. april 2009 - 19:36 #11
tak for point
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester