SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    CSS / Javascript Question

    I have this script :

    Code:
    function rowOver(obj, highlite) {
     if (obj.className == "linkrow") {
      obj.style.backgroundColor="#" + highlite;
      obj.style.cursor='hand';
     }
    }
    function rowOut(obj, defaultcolor) {
     if (obj.className == "linkrow") {
      obj.style.backgroundColor="#" + defaultcolor;
      obj.style.cursor="auto";
     }
    }
    that works when you call it like

    Code:
    <td class="linkrow" href="javascript:void();" onClick="GotoURL('file.asp');" onMouseOver="rowOver('this','FFFFFF');" onMouseOut="rowOut('this','EFEFEF');">Click Me</td>
    And it works perfectly fine. Mousing over table cells results in making it's background color change to the defined colors (FFFFFF on mouseover and back to EFEFEF on mouseout)

    The deal, I want to try and make this work with changing out a background (using the CSS/Javascript) I have here. So how do you use Javascript to change the class' background image? What's the DOM for it?

  2. #2
    SitePoint Enthusiast vischo's Avatar
    Join Date
    Mar 2003
    Location
    Chicago, IL
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My guess would be backgroundImage, but something tells me you might have tried that.

  3. #3
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    nm, I got it.

    Code:
    function rowOver(obj,menuLvl) {
     if (obj.className == 'linkrow') {
      // obj.style.backgroundColor="#" + highlite;
      if (menuLvl == 1) {
       obj.style.backgroundImage = 'url(images/gui_left_menu_bg_on.gif)';
      } else {
       obj.style.backgroundImage = 'url(images/gui_left_menu_blue_bg_on.gif)';
      }
      obj.style.cursor='hand';
     }
    }
    function rowOut(obj,menuLvl) {
     if (obj.className == 'linkrow') {
      // obj.style.backgroundColor="#" + defaultcolor;
      if (menuLvl == 1) {
       obj.style.backgroundImage = 'url(images/gui_left_menu_bg.gif)';
      } else {
       obj.style.backgroundImage = 'url(images/gui_left_menu_blue_bg.gif)';
      }
      obj.style.cursor='auto';
     }
    }

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Also, you can define all styles in a class and call it with [object].className if you're so inclined, or if changing each style gets to be a pain (if you're swapping background, font, colors, etc. all at once a class is a good idea).

  5. #5
    SitePoint Addict
    Join Date
    Dec 2002
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or you could just forget the javascript and use css?
    put a hover attribute in there and you could gewt it to do all sorts of fun things!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •