RE: Down to One Question: Javascript (was Two Questions: One Java script, One Tab

Hi,

Sorry I've come into this discussion rather late. I'll just summarize what 
I think the problem is, then I'll give a solution.

The following code doesn't seem to work as required:

<.font style="font: antique olive, arial" color="white" 
onMouseOver="javascript:color='black'"
onMouseOut="javascript:color='white'">Home<./font>

Here is my solution. If you prefer to see the example, jump straight to 
http://aamcf.co.uk/temp/style_object

Step one: lets simplify it. I'm not sure if mouseover's are supported in 
FONT elements, so lets use <.a> for the moment.

<.a href="/"
     style="font: antique olive, arial"
     color="white"
     onMouseOver="javascript:color='black'"
     onMouseOut="javascript:color='white'"
 >Home<./a>

We've got a style attribute and a color attribute. That is potentially 
awkward, so we'll combine them into one style attribute.

<.a href="/"
     style="font: antique olive, arial; color: white"
     onMouseOver="javascript:color='black'"
     onMouseOut="javascript:color='white'"
 >Home<./a>

We're not too concerned about the font used (it's not changing in this 
example, so we'll remove any reference to it.

<.a href="/"
     style="color: white"
     onMouseOver="javascript:color='black'"
     onMouseOut="javascript:color='white'"
 >Home<./a>

Lets drop the javascript: and onmouseout - we can put them back in later.

<.a href="/"
     style="color: white"
     onMouseOver="color='black'"
 >Home<./a>

Using the JavaScript keyword 'this' refers to the object running the 
JavaScript code, and every object has a style object, where the properties 
are the styles of the object.

<.a href="/"
     style="color: white"
     onMouseOver="this.style.color='black'"
 >Home<./a>

This works, so we can add the onMouseOut and javascript: again, using a 
similar format. The font goes back in too.

<.a href="/"
     style="color: white; font: 'antique olive', arial"
     onMouseOver="javascript: this.style.color='black'"
     onMouseOut="javascript: this.style.color='white'"
 >Home<./a>

And it's still working. :-)

At this point we could put the FONT element back in, but we don't need to. 
You were using CSS within the font element, so we can just use a SPAN, 
which has the advantage of not being deprecated.

<.span
     style="color: white; font: 'antique olive', arial"
     onmouseover="javascript: this.style.color='black'"
     onmouseout="javascript: this.style.color='white'"
 >Home<./span>

This works as I think the original was supposed to. There are still a 
couple of ways it could be improved though. Using style attributes is not 
good for code maintainability, so we'll stick the styles into a stylesheet, 
and add a generic font. We should also pull the JavaScript into an external 
function. Why? Well, at the moment, if someone uses a browser where the 
style object cannot be accessed or does not exist there will be an error. 
We could add error catching to the onmouseover attributes, but it would be 
messy.

Here is the function we will use:

<.script type="text/javascript">
function changeme(elem, colr){
if (elem.style) {elem.style.color = colr}
}
</script>

This tests to see if the style object exists and only tries to change the 
color property if it does. This avoids JavaScript errors in older browsers. 
Incidentally, you can use this technique to modify any property set by CSS. 
Always good for a laugh that is :-)

We call the function like this:

<.span
     style="color: white; font: 'antique olive', arial"
     onmouseover="javascript: changeme(this,'black')"
     onmouseout="javascript: changeme(this,'white')"
 >Home<./span>

I've put it all together on http://aamcf.co.uk/temp/style_object

Andrew

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA