Jump to content
confused and dazed

Highlighting A Button With A Mouseover Event

Recommended Posts

Hello Internet. I have been doing some looking around and there are some really complicated ways of doing mouseover events but I really don't think I need anything all that complicated. I would like to simply highlight a button when you place the mouse over the button. I know I have to use a mouseover event but everything seems like more than I need and I can't find ANYTHING that simply highlights a single button. Please help.

Share this post


Link to post
Share on other sites

I did that once with pictures, not really the standard buttons. This is the code I used for pictures:

<a href="index.php" onmouseover="SetImage('Home','images/homemouseover2.jpg');return false;" onmouseout="SetImage('Home','images/home2.jpg');return false;"><img src="images/home2.jpg" id="Home" alt="" border="0" style="width:91px;height:39px;"></a>

you can replace index.php by any link you like,the first setimage is the image I used when you have your mouse over the imshr,the next setimage is the image I used when you get your mouse out over the image,The img src is basically the image you want to have on start up (so basically the mouseout image) As you can see I also used width and height values, you can delete them or change them to whatever you like. Let me know if it works out

Share this post


Link to post
Share on other sites

SetImage() is not a standard Javascript function, so you have to provide that too. As Ingolme said, however, the use of Javascript is superfluous for a simple rollover.

Share this post


Link to post
Share on other sites

Hey interneters...I took a look at the link provided and did the examples and played around with it a little while. It does a good job with :hover and <a href> for links and providing effects for links but for other elements there are no examples. I tried integrating buttons into the code but nothing worked. Any suggestions?

Share this post


Link to post
Share on other sites

O.K. I found a some code that kind of works. the only part of this code that works is changing the text to italic. The change of backgound and font color does not work. Any suggestions? <html><STYLE TYPE="text/css"> .over {color:navy; background: white; font-style: italic} .down {color:navy; background: white; font-style: italic}</STYLE><INPUT TYPE="Button" style="Background: Navy; color:white;" ONMOUSEOVER="this.className='over';" ONMOUSEOUT="this.className='';" ONMOUSEDOWN="this.className='down';" ONMOUSEUP="this.className='over';" VALUE="Click Me" ONCLICK="this.value='Ouch - You Clicked Me!'"></html>

Share this post


Link to post
Share on other sites

I believe the reason is that the Onmouseover command won't overwrite any styles determined by css. Since you told it the background-color and color of the text the only thing left it could change was the italics. I messed with the code a bit to get it working.

<STYLE TYPE="text/css">#test {color:white; background-color:navy; font-style:normal;}#test:hover {color:navy; background-color: white; font-style: italic;}.down {color:navy; background-color: white; font-style: italic;}</STYLE><INPUTTYPE="Button" id="test" ONMOUSEDOWN="this.className='down';" VALUE="Click Me" ONCLICK="this.value='Ouch - You Clicked Me!'" />

Krewe

Share this post


Link to post
Share on other sites

Then you changed something by mistake because it works in all my browsers, IE, Firefox, Chrome and Opera.If it is working in all four for me there should be no reason it doesn't work for you. Here is my entire HTML document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title></head><body><STYLE TYPE="text/css">#test {color:white; background-color:navy; font-style:normal;}#test:hover {color:navy; background-color: white; font-style: italic;}.down {color:navy; background-color: white; font-style: italic;}</STYLE><INPUTTYPE="Button" id="test" ONMOUSEDOWN="this.className='down';" VALUE="Click Me" ONCLICK="this.value='Ouch - You Clicked Me!'" /></body></html>

Share this post


Link to post
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Ummmmm O.K. I guess there is more to this than I realized... Can you give me the "for dummies" version of what this public information is all about and why there is a need to draw content/information from www.w3.org/1999/xhtml. Remember that I purposely named myself confused and dazed because as of 5 or 6 weeks ago I had no clue that you could click on view on a browser, go to the source link, and see a bunch of "stuff"... That "stuff" being the words (code) that run the webpage. I knew there were programmers and people who wrote code to make webpages but I had no clue what it actually looked like and where it could be found. Having said all that - I now understand much more than I ever thought I would but there are some basic principles that I still do not have. One of which is that it appears there are public sites that you can draw information/content from but I don't understand why you would need to. OR why it has been set up this way. AND most importantly for me at this moment - why I need it to change the CSS declarations (font color and background color) already set by my button element.

Share this post


Link to post
Share on other sites

Those four lines you put in your post are just protocol lines.Just tells the browser really what is happening, before it really happens. Secondly. What I did in my code was just take out the in-line css styling.I haven't learned much of JavaScript yet and what it can and can not change, so instead of using onmouseover and onmouseoff I just changed it to a simple pseudo-class. I took the inline style you wanted and put it into an ID tag (Probably more appropriate to use a class instead of id...) named test.Then in the Button Input I just put id="test", that way the button would take the characteristics described in #test.Next, I took out the In-Line Style, Onmouseover and Onmouseoff bits of code. Instead of replace them with the #test:hover{ } css code.The #test:hover{ } part completely replaces Onmouseover and off perfectly. When your mouse hovers over that id/button it will work the same.Last, I kept .down the same because it worked for me from the start. Hope that explains what I did well... If It doesn't make since I can try to rephrase.~krewe

Share this post


Link to post
Share on other sites

Browsers use the <!DOCTYPE> declaration to figure out how to render the document. This is not its intended purpose, but since back then browsers rendered things wrongly, they allow old sites to keep rendering the same way by using an old doctype or no doctype.

Share this post


Link to post
Share on other sites

So www.w3.org tells the browser how to render the document but its an old style of rendering? I dont really understand how that works. Are you saying most browsers can render a document by using old rendering methods but you have to point the browser to the old style of rendering by using a website like www.w3.org to do it? Second - I did notice was that once I declared this older doctype it messed up the rest of my page and moved stuff all around - but the buttons worked real nice. I am guessing that you would have predicted this - Ingolme. So I guess I am stuck now - I would like to have buttons that work this same way but not changing the rendering of the rest of my page. How can I accomplish this?

Edited by confused and dazed

Share this post


Link to post
Share on other sites

The URL inside the <!DOCTYPE> declaration doesn't really matter. There aren't really any instructions in that URL, it's more like a name. In the old rendering mode (called "quirks mode") the browser behaves the way it used to in the early 2000s. Different browsers behaved in different ways because they weren't following the standardsIf you want the browser to render in quirks mode, it's best not to use a <!DOCTYPE> at all. If you want to render in standards compliant mode (in which all browsers should, technically, render the same way), use any of the declarations listed here or the special HTML 5 doctype: <!DOCTYPE html> Even in Standards compliant mode, Internet Explorer provides some problems, but they're minimal compared to the quirks mode differences. But to put things clear: Selecting the rendering mode based on the <!DOCTYPE> declaration is not a W3C recommendation, it was an idea browser vendors came up with to not mess up old sites when they updated their rendering engine to comply with standards.

Share this post


Link to post
Share on other sites

O.K. I think I get it now. The url listed simply displays the rules you are choosing to render under. The url itself does not actually do anything. I think I get that now. This is all great stuff... Hey are you a professor or teacher? You have a calm professor like approach to your answers.O.K. so selecting a rendering mode is not recommended. I can't imagine that what I am attempting to do is outside the scope of typical programming and needs a specific rendering mode to accomplish the task I want. Or is there no other way but to declare a mode in this case? If so can you direct me to the specific one so I can read up on it?

Edited by confused and dazed

Share this post


Link to post
Share on other sites

I'm not a professor or teacher, just a student at university.You should always render using standards compliant mode, that means always using a <!DOCTYPE>. Quirks mode is only for very old websites. The URL in the doctype declaration doesn't really mean anything, it's just a name, an identifier. It doesn't necessarily have to link anywhere. The rendering rules are inside the browser itself. When I say that doctype detection is not a W3C "recommendation" I mean that it's not a standard. It means that browsers are kind of "breaking the rules" to allow very old websites to render using a different engine.

Share this post


Link to post
Share on other sites

"You should always render using standards compliant mode, that means always using a <!DOCTYPE>. Quirks mode is only for very old websites."O.K. I will read up on the <!DOCTYPE> to determine what should be best for me. The URL in the doctype declaration doesn't really mean anything, it's just a name, an identifier. It doesn't necessarily have to link anywhere. The rendering rules are inside the browser itself.I beleive we are saying the same thing here. I am saying that the url listed only tells you how the older rendering is done. The url does not actually do anything. Like I said I think we are saying the same things here. Do you have any recomendations on how to accomplish overwriting CSS styles that have been set inline? Or is there a way to set the style outside the line? I would like to change the background color and text color on mouse over. I read up on pseudo-classes but I cant seem to make sense of how to use it for my purpose.

Share this post


Link to post
Share on other sites
O.K. I found a some code that kind of works. the only part of this code that works is changing the text to italic. The change of backgound and font color does not work. Any suggestions?
<html><STYLE TYPE="text/css">.over {color:navy; background: white; font-style: italic}.down {color:navy; background: white; font-style: italic}</STYLE><INPUT  TYPE="Button" style="Background: Navy; color:white;" ONMOUSEOVER="this.className='over';" ONMOUSEOUT="this.className='';" ONMOUSEDOWN="this.className='down';" ONMOUSEUP="this.className='over';"  VALUE="Click Me" ONCLICK="this.value='Ouch - You Clicked Me!'"></html>

well, the styles are the same, so not sure what you are doing to try and test. And the CSS for background should be background-color. the psudo class is not hard to use, and is preferable to cumbersome JS for something so simple.http://www.w3schools...f/sel_hover.asp
<html><head><style type="text/css">#target {  height: 200px;  width: 200px;  color: navy;  background-color: white;}#target:hover{  color:red;  background-color: orange;  font-style: italic;}</style></head><body>  <p id="target">This is some text</p></body></html>

Edited by thescientist

Share this post


Link to post
Share on other sites

Looking through this, most of this can be done using :hover and :focus, the area about what is required onmousedown (which is triggered when any button is clicked) is a bit vague, if you want it to remain with background-color: white, text blue, then you would probably use the onclick to change class, to prevent the previous pseudo class (hover, focus) from coming into play, to return it to background-color: blue, text white. like so

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title> <script type="text/javascript">/*<![CDATA[*//*---->*/ /*--*//*]]>*/</script>  <style type="text/css"> .my_button {background-color: navy; color:white;} /*set default styling */ .my_button:hover, #my_button:focus, .my_button_click {color:navy; background: white; font-style: italic} /*set styling for hover (mouseover), focus, and onclick ??  */ </style></head><body><input type="button"  class="my_button" value="Click Me" onClick="this.value='Ouch - You Clicked Me!';this.className='my_button_click'";> </body></html>

Edited by dsonesuk

Share this post


Link to post
Share on other sites

thescientist - I tried the code you provided "verbatim" and it does not work for some reason. the phrase is there but no styling is present and the hover does not work. Any thoughts? dsonesuk - I tried the code you provided "verbatim" and it works. I removed the onclick function to set the style because as you said it was not clear what I was asking for. This did work. However, it messed up the styling I have on the page. It moved a bunch of stuff around. I guess this is because i have not set any DOCTYPE initially. So does this mean I have to pick a DOCTYPE and sort of start over with all of my styling?

Edited by confused and dazed

Share this post


Link to post
Share on other sites

Well! if adding doctype means it will follow standard compliant mode, and fix the issues you are have now, what? is the problem, you might have to adjust a few styling setting, but it should not be a rip it up and start again situation.

Share this post


Link to post
Share on other sites
thescientist - I tried the code you provided "verbatim" and it does not work for some reason. the phrase is there but no styling is present and the hover does not work. Any thoughts?
odd, I wrote it on the fly, but I just checked it out in Chrome and it worked. Here it is as valid markup, if that makes a difference.
 <!DOCTYPE html><head><meta charset="UTF-8"><title>test</title><style type="text/css">#target {  height: 200px;  width: 200px;  color: navy;  background-color: white;}#target:hover{  color:red;  background-color: orange;  font-style: italic;}</style></head><body>  <p id="target">This is some text</p></body></html>

Edited by thescientist

Share this post


Link to post
Share on other sites

? Dazed did my example not work for you? Because it worked perfect for me and it did everything you wanted.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...