By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,536 Members | 2,165 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,536 IT Pros & Developers. It's quick & easy.

mouseover change image and text color.

P: n/a
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.

May 19 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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 '06 #2

P: n/a
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.

May 20 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.