mouseover change image and text color.

Discussion in 'Javascript' started by Amy, May 19, 2006.

  1. Amy

    Amy Guest

    <style>
    div.helpBtn{ font:bold 73% verdana; color:#995F8D; text-align:left;
    width:79px; height:24px; margin:0px; padding: 5px 0px 0px 27px;
    background: url(/jsp/images/pms/housekeeping/helpBtn_off.gif)
    no-repeat; }
    div.helpBtnOn{ font:bold 73% verdana; color:#BB59DE; text-align:left;
    width:79px; height:24px; margin:0px; padding: 5px 0px 0px 27px;
    background: url(/jsp/images/pms/housekeeping/helpBtn_on.gif)
    no-repeat; cursor:pointer; }
    </style>

    <div class="helpBtn" onmouseOver="this.className='helpBtnOn'"
    onmouseOut="this.className='helpBtn'" onClick="popWin()">HELP</div>


    This is the code I have for an image and text. They appear as such that
    the HELP word is on top on the image. Notice the image is set as
    background in the div.

    On mouseover, the image changes as well as the text color. On mouseout,
    return to original image and text color. The problem is, this does not
    always work well. Sometimes the image 'disappear' when mouseover,
    leaving only text.

    I wonder, if there is a better way of doing this?

    Appreciate any thoughts.
     
    Amy, May 19, 2006
    #1
    1. Advertising

  2. Amy

    Guest

    Amy wrote:
    > <style>
    > div.helpBtn{ font:bold 73% verdana; color:#995F8D; text-align:left;
    > width:79px; height:24px; margin:0px; padding: 5px 0px 0px 27px;
    > background: url(/jsp/images/pms/housekeeping/helpBtn_off.gif)
    > no-repeat; }
    > div.helpBtnOn{ font:bold 73% verdana; color:#BB59DE; text-align:left;
    > width:79px; height:24px; margin:0px; padding: 5px 0px 0px 27px;
    > background: url(/jsp/images/pms/housekeeping/helpBtn_on.gif)
    > no-repeat; cursor:pointer; }
    > </style>
    >
    > <div class="helpBtn" onmouseOver="this.className='helpBtnOn'"
    > onmouseOut="this.className='helpBtn'" onClick="popWin()">HELP</div>
    >
    >
    > This is the code I have for an image and text. They appear as such that
    > the HELP word is on top on the image. Notice the image is set as
    > background in the div.
    >
    > On mouseover, the image changes as well as the text color. On mouseout,
    > return to original image and text color. The problem is, this does not
    > always work well. Sometimes the image 'disappear' when mouseover,
    > leaving only text.
    >
    > I wonder, if there is a better way of doing this?




    You could try the css "hover" pseudo class and the internet explorer
    workarounds that go with it. Google "pure css menu" to get started.

    ....but the javascript should work. It works fine for me in Firefox
    1.5.0.3 and Safari 1.3. When doesn't it work?

    Peter
     
    , May 20, 2006
    #2
    1. Advertising

  3. Amy

    Amy Guest

    It does work. . but the result is not very consistent. As I mentioned,
    the image tend to 'disappear' for a while when mouseover. Some other
    time it works just fine.
     
    Amy, May 20, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Matt Adams
    Replies:
    0
    Views:
    892
    Matt Adams
    Aug 26, 2003
  2. slinky

    mouseover to change button color

    slinky, Jul 13, 2007, in forum: ASP .Net
    Replies:
    1
    Views:
    2,859
    nahid
    Jul 13, 2007
  3. Replies:
    7
    Views:
    378
    Mick White
    Feb 2, 2005
  4. Replies:
    2
    Views:
    194
    Danny
    Jan 8, 2006
  5. apparker
    Replies:
    10
    Views:
    373
    apparker
    Apr 3, 2007
Loading...

Share This Page