Jump to content
iwato

Button Behavior And Mouse Events

Recommended Posts

QUESTION: How does one change the appearance of an <input> tag -- specifically type="button"?BACKGROUND: The below set of code produces two error messages in Firebug: one going in and one coming out. At minimum, these errors tell me that I have targeted my button properly. What I do not understand is why Firebug is telling me that onHover() and mouseOut() are not functions.<head><script type="text/javascript"> function onHover() { document.getElementById("bottom_right").style.color="#FFF"; } function mouseOut() { document.getElementById("bottom_right").style.color="#FFF"; }</script></head><body><input type="button" name="bottom_right" value="Bottom Right" onclick="openWindow()" onmouseover="onHover()" onmouseout="mouseOut()"/></body

Share this post


Link to post
Share on other sites

The more efficient way would be to use the :hover attribute of CSS. But the immediate answer to the problem you presented is simple. Your input has a name but not an id. So getElementById() can't find it.Usually, when an error message tells you that something is not a function, it's because you've named it with a reserved word. I have occasionally seen this happen also when non-printing characters get into the function definition, usually at the line breaks, and usually after a copy/paste. So changing the name of the function can help. You might also try deleting all the characters at the linebreaks and replacing them with new line breaks.

Edited by Deirdre's Dad

Share this post


Link to post
Share on other sites
The more efficient way would be to use the :hover attribute of CSS. But the immediate answer to the problem you presented is simple. Your input has a name but not an id. So getElementById() can't find it.
So, I eliminated the name and replaced it with an id. It worked. Hooray and thanks! I hope the name was not important. . .Originally I tried to change the class of my button dynamically and use CSS. Unfortunately, I had never used the pseudo classes :link, :hover, :visited, and :active with anything but <anchor> tags.1) Can I really write input.SomeClass:hover? Will it work? I do not remember ever having seen how to change the appearance of a button using such a script. 2) Can I also write document.getElementById("SomeID").style.class="SomeClass"; ? Will this work?
I have occasionally seen this happen also when non-printing characters get into the function definition, usually at the line breaks, and usually after a copy/paste.
Yes, I have experienced this same phenomenon and have learned to guard against it by not pasting anything from another document until I have first changed the copied content into TXT format. It has already become a matter of habit, as it was the source of several mysterious errors elsewhere. W3C validation cured me of this problem very quickly.Roddy

Share this post


Link to post
Share on other sites

The :hover pseudo-class works on all the elements. But in order to make it work in Internet Explorer 7, you must have a Strict DTD.

Share this post


Link to post
Share on other sites
The :hover pseudo-class works on all the elements. But in order to make it work in Internet Explorer 7, you must have a Strict DTD.
This is good to know, and I always create my HTML pages with XHTML 1.0 Strict. But, what about invoking a different class? Is it alright to write: document.getElementById("SomeID").style.class="SomeClass"; ?Roddy

Share this post


Link to post
Share on other sites
This is good to know, and I always create my HTML pages with XHTML 1.0 Strict. But, what about invoking a different class? Is it alright to write: document.getElementById("SomeID").style.class="SomeClass"; ?Roddy
Ja, ist gutt.

Share this post


Link to post
Share on other sites
This is good to know, and I always create my HTML pages with XHTML 1.0 Strict. But, what about invoking a different class? Is it alright to write: document.getElementById("SomeID").style.class="SomeClass"; ?
document.getElementById("SomeID").className = "SomeClass";

Share this post


Link to post
Share on other sites
document.getElementById("SomeID").className = "SomeClass";
OK. I am now able to assign new classes to button objects with mouse events and change the appearance of buttons with the :hover pseudo class. This new knowledge makes me very happy. However, what I am unable to do is preserve the appearance of my buttons -- namely, the buttons' rounded corners. Short of using a JavaScript program like SVG-Roundies what must I do?The following pair of sample pages work together. Each uses a different approach to achieving the same button effects. Neither preserves the rounded edges of the button.SAMPLE PAGES: Mori and TennisRoddy

Share this post


Link to post
Share on other sites
Ja, ist gutt.
Hier ist das Problem das gedoppelte "t". Mach' aber weiter. Mir gefehlt es, ab und zu auf Deutsch zu schreiben.Roddy

Share this post


Link to post
Share on other sites
However, what I am unable to do is preserve the appearance of my buttons -- namely, the buttons' rounded corners.
Yep. Different browsers approach this differently, too. All buttons start out using the OS button object (or maybe it's a copy -- I don't know). As you change properties of the button, you reach a point where the browser drops that and makes it a rectangle. This is especially noticeable on a Mac, where the button changes from a 3D oval with pretty highlights to a drab rectangle. In Firefox, all you have to do is add background-color to achieve this change.All I can suggest is using a background image. Some authors don't use the button element at all, but instead create a div with a central background image and "cap" images on the left and right to create the curves. To make it a "button" they use :hover and :active and onclick handlers.You just need to decide how important it is in exchange for the extra effort.

Share this post


Link to post
Share on other sites
Hier ist das Problem das gedoppelte "t". Mach' aber weiter. Mir gefehlt es, ab und zu auf Deutsch zu schreiben.Roddy
*slinks away, utterly outclassed*

Share this post


Link to post
Share on other sites
You just need to decide how important it is in exchange for the extra effort.
I have decided for the moment that it is not worth the effort . In any case, thank you for your kind effort.Roddy

Share this post


Link to post
Share on other sites
*slinks away, utterly outclassed*
But why, I also misspelled a word.Roddy

Share this post


Link to post
Share on other sites

Mainly because I struggled to understand what you were saying. I don't really speak any language other than English, but I know select minutae of a variety, such as Russian and Japanese.

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