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

Hi,
I've been following this thread but not really paying alot of attention
'cause the solution was over my head.  Is this all just so the "hover"
function will work in Nutscrape? If so, why would someone go to all that
trouble for the browser that the users know (or should know) the hover
dosen't work anyway? Now, I'm a firm believer in cross-browser compatibility
(seems more so than most folks on the list), but this seems like alot of
trouble for very little reward.....
Just a thought.....
~ Paul

----- Original Message -----
From: "Andrew McFarland" <aamcf(at)aamcf.co.uk>
To: <hwg-techniques(at)hwg.org>
Sent: Tuesday, February 12, 2002 6:54 PM
Subject: 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