Advanced mouseover in JS question [Archive]

View Full Version : Advanced mouseover in JS question

stylin328

04-12-2005, 12:13 PM

Hey guys, Im a designer not a programmer so I need some help. Basically what I wanna do is have I guess a mouseover in javascript on an image button but the problem I have is I want to be able to bold other text. So for example,

http://xquisitegraphix.com/resources/42_B_0_TNR_SHARPPDA.html

On the button "sign me up now" I want when you hover over that button, the text to the right that starts with "By clicking the "Yes, I Want It!" button, you.." will go bold. Just in the hover state, when you click on the sign me up now button it wll submit the form data, so I just need it on the over state. Any Ideas?? Thanks a bunch

JLBeam

04-12-2005, 02:01 PM

You can do this by placing the text inside a DIV, and changing the DIV's className on MouseOver/MouseOut. Example:

<html>
<style type="text/css">
.div1 {
font-weight: normal;
}
.div2 {
font-weight: bold;
}
</style>
<body>
<img src="images/yourimage.gif" onMouseOver="getElementById('mydiv').className='div2'" onMouseOut="getElementById('mydiv').className='div1'">
<br>
<div class="div1" id="mydiv">Hello</div>
</body>
</html>

When you hover over the image, the text inside the DIV should become bold, and when you hover away from the image it should go back to normal.

Nice thing about using CSS classes like this is you can change additional attributes (like color, size, etc) if you decide you want to.

Hope this helps.

Regards,

Ivan-Funio

04-12-2005, 09:32 PM

Thank you, JLBeam

I didn't know how to make reference to some DIV tag.

stylin328

04-12-2005, 09:38 PM

awesome guys, Thanks so much.. :)