mouseover change image and text color.

[Amy]

<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.

[petermichaux]

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

[Amy]

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.