Bob Schwartz wrote:
Below are a couple of "real world" (my world, anyway) javascripts, could
you re-do them as per "Good", then I would have an example for
reference that I could closely relate to.
These connected to a linked JS in the <head>:
1. <a href="http://www.fotografics.it";
onclick="popUp(this.href,'elastic',500,650);return false;"> powered
by: FotoGrafics</a>
The most unobtrusive version of this one is simply:
<a href="http://www.fotografics.it";>powered by: FotoGrafics</a>
No script required. You won't get a new window for most users, only for
those that explicitly request it themselves. Otherwise, try this article:
http://www.alistapart.com/articles/popuplinks/
2. <div id="home"><a href="#" tabindex="1"
onfocus="P7_trigNV('p7NVim10')" onblur="P7_trigNV()"
onmouseover="P7_trigNV('p7NVim10')" onmouseout="P7_trigNV()"><img
src="as/im/v2_01.jpg" alt="" width="88" height="25" id="p7NVim10"
/></a></div>
Those function names suggest that this was generated with a WYSIWYG
editor. That's never a good idea.
It depends on the purpose of the functions, but if they're simply
changing presentational issues (which is what they're commonly used
for), you could use a:hover and a:focus pseudo-classes in CSS to style them.
If not, then you need to find a way to access the a element (either
using a class, an id or some other method and then attach the methods.
var a = ... // get the element.
a.addEventListener("focus", P7_trigNV, false);
(make sure you omit the parenthesis from the end of the function name.
don't use P7_trigNV(), it won't work as exptected)
Unfortunately, that won't work in IE unless you use a DOM 2 patch script
to add support for it like I do, but the script I wrote and use isn't
quite ready, as it still suffers from memory leaks and a few other small
limitations.
a.focus = P7_trigNV; works in all browsers, you can use that instead.
You shouldn't need to pass the id of the image to the function, you have
access to the a element from the event handler, so you just need to get
it's child image element.
Since I'm guessing all this function actually does is swap the image,
you don't need JS, just use CSS image rollovers. There's many
techniques available, try google.
3. <body onload="P7_setNV('p7NVim10',2);P7_trigNV()">
function init() {
P7_setNV('p7NVim10',2);
P7_trigNV()
}
Then use either of these to attach it:
document.addEventListener("load", init(), false);
(won't work in IE or firefox without a patch)
or
window.onload = init;
(non-standard, but widely supported. Limited to a single function.)
You could also look up the addEvent() script.
This one all alone on the page, with no linked JS in the <head>:
<div id="copy">
<script type="text/javascript">
var d=new Date();
yr=d.getFullYear();
if (yr!=2003)
document.write("© "+yr);
</script> Cedar Tree Books
</div>
<p id="copy">© 2005 Cedar Tree Books</p>
No script (or entity reference) required.
--
Lachlan Hunt
http://lachy.id.au/
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
