[ANN] hoverMe 3.0 -- An Even More Sophisticated Image Hover Script

[Thomas 'PointedEars' Lahn]

<URL:http://pointedears.de/hoverMe>

Changes to version 2.1.1 (2006-03-05)
--------------------------------------

* Created diffs, added link[rel=Appendix] element for them.
* Created ChangeLog from diffs, added link[rel=Appendix] element for it.
* Files moved to dom/ subdirectory, established server-side redirection.
* Markup:
- Fixed Dublin Core metadata and copyright information.
- Test case is HTML 4.01 Strict now.
* Moved reusable script code to external resource (hoverMe-3.0.js).
* Use isMethod() and isMethodType() instead of plain typeof.
* ImageData():
- Use ImageData.ImagePrototype() (default: Image; fallback: Object)
* Changed JSdoc style.
* Optimized for-loops and property accesses.
* Allow empty URI references.
* Images() constructor and prototype
* preloadImages() method
* hoverMe():
- Backwards-compatible change of argument order to allow for optional
image collection object reference (default: hoverMe.images) and
optional relatedTarget check switch (default: true)
- Added relatedTarget checks (thanks to: Yann-Erwan 'Yep' Perio
et al. for pointing out the issue; Peter-Paul Koch, author of
QuirksMode.org, for the approach)
- Added FireBug support (requires printfire(), see debug.js);
thanks to Joe Hewitt for this great Firefox extension.

Tested successfully with:

* Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.0.1) Gecko/20060313
Debian/1.5.dfsg+1.5.0.1-4 Firefox/1.5.0.1
* Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20060205
Debian/1.7.12-1.1
* Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.2) Gecko/20040805
Netscape/7.2
* Mozilla/5.0 (X11; U; Linux i686; en-US; rv:0.9.4.1) Gecko/20020508
Netscape6/6.2.3
* Mozilla/4.8 [en] (X11; U; Linux 2.6.15.6-20060314.201202+0100 i686)

* Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0) [IE6 SP1, Win2k SP4]
* Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0) [standalone]
* Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0) [standalone]
* Mozilla/4.0 (compatible; MSIE 4.01; Windows NT 5.0) [standalone]

* Opera/8.54 (X11; Linux i686; U; en)
* Opera/8.52 (X11; Linux i686; U; en)
* Opera/8.51 (X11; Linux i686; U; en)
* Opera/8.5 (X11; Linux i686; U; en)
* Opera/7.50 (X11; Linux i686; U) [en]
* Opera/6.12 (Linux 2.6.15.6-20060314.201202+0100 i686; U) [en]
* Opera/6.03 (Linux 2.6.15.6-20060314.201202+; U) [en]

* Mozilla/5.0 (compatible; Konqueror/3.5;
Linux 2.6.15.6-20060314.201202+0100; X11; i686; de) KHTML/3.5.2
(like Gecko) (Debian package 4:3.5.2-2+b1)

Constructive comments are welcome.


Regards,

PointedEars, finally "laying 'the Egg'[tm]"

 

[Aaron Gray]

<URL:http://pointedears.de/hoverMe>

What is it, what does it do, I have no clue ?

Aaron

 

[Thomas 'PointedEars' Lahn]

"Thomas 'PointedEars' Lahn" [...] wrote [...]:

<URL:http://pointedears.de/hoverMe>

What is it, what does it do, I have no clue ?

Move the system pointer of a graphical framework (e.g. the mouse cursor
in Windows) over the image (provided image display is supported and not
disabled). Then Read the Source, Luke.


PointedEars

 

[Martin Honnen]

<URL:http://pointedears.de/hoverMe>

Mouse over/out the "About" causes

Error: uncaught exception: [Exception... "Component returned failure
code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMEventTarget.dispatchEvent]"
nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame ::
http://pointedears.de/scripts/test/debug.js :: printfire :: line 249"
data: no]

with Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.2)
Gecko/20040804 Netscape/7.2 (ax)

 

[Matt Kruse]

Move the system pointer of a graphical framework (e.g. the mouse
cursor in Windows) over the image (provided image display is
supported and not disabled). Then Read the Source, Luke.

Your example leaves me with no clue about what your script does. Not even a
simple description of functionality on the index page.

The code, I assume, is embedded in a .js file somewhere? Is it commented? I
don't know.

Good examples, online-viewable documented source, and good written
documentation are necessary for reusable code to be helpful to anyone but
the author. IMO.

 

[Thomas 'PointedEars' Lahn]

Your example leaves me with no clue about what your script does. Not even
a simple description of functionality on the index page.

What part of "Image Hover Script" did you not understand?

The code, I assume, is embedded in a .js file somewhere? Is it commented?

Yes and yes.

I don't know.

You could have found the script element referring to it. There are not so
many of them there.

Good examples, online-viewable documented source, and good written
documentation are necessary for reusable code to be helpful to anyone but
the author. IMO.

hoverMe, like all my scripts, is not for the completely clueless, and it is
not for those who are unwilling to learn the basics of client-side script
programming.


PointedEars

 

[VK]

Thomas 'PointedEars' Lahn wrote:

hoverMe, like all my scripts, is not for the completely clueless, and it is
not for those who are unwilling to learn the basics of client-side script
programming.

That's the coolest script I've seen in my life. Outstanding - I'm
speachless. I've never seen so much of code power expressed on a such
narrow space. And it's so new - amazing people did not this so obvious
yet so challenging idea.

Two small humblest notes yet:

1) You script, as I see, is supposed to fall back up to JavaScript 1.0
and further up to the Big Bang. In this case it contains an
anachronizm: while Image constructor first appeared in Netscape 3.0,
the Object constructor did not exist until Netscape 4.0 / IE 4.0 So you
presumption that if Image is not supported then it is still able to
fall to Object is wrong.
It is an excucable mistake to think that the generic Object comes first
and object variations later. But you have to account that JavaScript
development was rather chaotic and on version 2.x/3.x there were only
pieces of a real OOP inserted here and there.
The only browsers having script support and not having Image support
are Netscape 2.x and IE 3.x The need of their support is more than
questionnable as of now.

2) Note #2: what a hell was that about with this basic rollover script?
Was it a joke? Of course it was, yes? Just a springtime joke.

 

[Thomas 'PointedEars' Lahn]

<URL:http://pointedears.de/hoverMe>

Mouse over/out the "About" causes

Error: uncaught exception: [Exception... "Component returned failure
code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMEventTarget.dispatchEvent]"
nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame ::
http://pointedears.de/scripts/test/debug.js :: printfire :: line 249"
data: no]

with Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.2)
Gecko/20040804 Netscape/7.2 (ax)

Thanks, I see it also with my Netscape 7.2 now. That was a minor bug in
debug.js, rather unrelated to hoverMe. printfire(), which writes to the
FireBug error console, was taken as-is from Joe Hewitt's Web site, and
apparently he did not test with Netscapes. (Well, FireBug is a _Firefox_
extension after all.)

But as I said, you don't have to include debug.js for hoverMe (3.0). That
is only needed if you want FireBug debug messages as you hover over the
link/image. Despite the unhandled exception, the rollover effect should
work (it does in my Netscapes).

I have fixed this bug in debug.js 0.99.6.2006041619 now, however the fix
requires that you include types.js, as it provides the *ErrorHandler()
methods required, if you want to make use of printfire() from debug.js.
Hence a slight change of the test case HTML, too, and consequently of the
HTML diff.

(Another solution is that you copy printfire() from debug.js into a `script'
element in your HTML markup or into hoverMe-3.0.js [for the latter, you
must obey the GNU GPL]. I would rather not do that by default, as I
dislike duplicating source code, and the separation was done intentionally:
usually one does not want to debug hoverMe in FireBug, and so does not
include debug.js in the first place.)


Regards,
PointedEars

 

[optimistx]

"Thomas 'PointedEars' Lahn" <[email protected]> kirjoitti viestissä

....

hoverMe, like all my scripts, is not for the completely clueless, and it is
not for those who are unwilling to learn the basics of client-side script
programming.


PointedEars

I saw an small image with a text 'ABOUT'. When moving the cursor over the
image I saw a tooltip 'ABOUT'.

When clicking the image I saw an index of files with names containing
'worm'.

Nothing else.

Is this an April fool's day joke?

 

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn wrote:


That's the coolest script I've seen in my life. Outstanding - I'm
speachless. I've never seen so much of code power expressed on a such
narrow space. And it's so new - amazing people did not this so obvious
yet so challenging idea.

Thank you.

Two small humblest notes yet:

1) You script, as I see, is supposed to fall back up to JavaScript 1.0
and further up to the Big Bang.

No, it is not. JavaScript 1.1 should be the earliest version to support it.
The `typeof' operator and several other language features it uses, were not
supported before that version.

In this case it contains an anachronizm: while Image constructor first
appeared in Netscape 3.0,

The Image constructor is supported since JavaScript 1.1, Netscape 3.0.

the Object constructor did not exist until Netscape 4.0 / IE 4.0

The Object constructor is supported since JavaScript 1.0, Netscape 2.0.
JavaScript 1.1 of Netscape 3.0 merely added the toString() method to its
prototype object.

I do not know exactly about early IE versions, but since JScript 1.0 is said
to be an ECMAScript implementation, Object() should be supported since IE
3, too.

So you presumption that if Image is not supported then it is still able
to fall to Object is wrong.

You are wrong. Again.

It is an excucable mistake to think that the generic Object comes first
and object variations later. [snipped further holier-than-thou nonsense]

2) Note #2: what a hell was that about with this basic rollover script?

Compared to other, completely clueless rollover scripts, hoverMe, which
has received contributions from several competent regulars over the years
(including people here), is not basic at all. Instead it is very
efficient, easy to use now and -- I dare say -- the most important
difference to common approaches is that it is really bullet-proof.

Was it a joke? Of course it was, yes? Just a springtime joke.

Your posting would be a joke if you were not to be pitied for your
ongoing self-deconstructing demonstration of lack of basic knowledge.


PointedEars

 

[Thomas 'PointedEars' Lahn]

I saw an small image with a text 'ABOUT'. When moving the cursor over the
image I saw a tooltip 'ABOUT'.

When clicking the image I saw an index of files with names containing
'worm'.

Nothing else.

Either image display, or client-side script support, or both are disabled
with, or not (sufficiently) supported by your user agent. You should have
seen a change of color in the "ABOUT" _image_ (not text) when you moved
the pointer (hovered) on and off it, as there is an exchange of images then.
Which is basically what hoverMe is about, although other applications are
possible.

The "index of files with names containing 'worm'" is the content of the
about/ directory that is navigated to if client-side script support is not
present (and so the click event cannot be canceled). The "files with names
containing 'worm'" are worm.de.html and worm.en.html which do not contain
any worm (as you might have thought) of course, but inform visitors about
e-mails that they may have received looking as if they were from me, but
are not (in fact there was/is a worm spreading on the Net that not only
falsifies e-mail header information but also included the domain name in
the message, making it look official). Both resources are linked to from
the English and German version of my home page.

(I did say that hoverMe was not for the completely clueless, did I not?)

Is this an April fool's day joke?

Absolutely not. It would have been a little bit too late for that anyway.


PointedEars

 

[VK]

The Image constructor is supported since JavaScript 1.1, Netscape 3.0.

The Object constructor is supported since JavaScript 1.0, Netscape 2.0.
JavaScript 1.1 of Netscape 3.0 merely added the toString() method to its
prototype object.

I do not know exactly about early IE versions, but since JScript 1.0 is said
to be an ECMAScript implementation, Object() should be supported since IE
3, too.

I guess the JavaScript history is on the same sorry path as other
events happened long ago enough. People who did not see it do write
about it based on documents of other people who did not see it neither.
JavaScript 1.0 had Object and prototype? Object appeared before Image?
Whatever, I guess - after sime time. We look at Crucifixion paintings
with people dressed in Renaissance costumes and it doesn't bother us
too much, does it? Six centuries later it is the same ancient sh** -
was it a toga or a cowl.

 

[Randy Webb]

Thomas 'PointedEars' Lahn said the following on 4/16/2006 9:42 AM:

<URL:http://pointedears.de/hoverMe>

<snip>
<link
rel="Contributors"
href="mailto:[email protected]"
title="Yann-Erwan 'Yep' Perio (first person to point out the
relatedTarget issue to me)">

That above link tag looks almost hypocritical considering your history
of complaining about invalid email addresses from posters yet you
include one on your page?

Constructive comments are welcome.

Warning: reference to undefined property Object.prototype.addProperties
Source file: http://pointedears.de/scripts/types.js
Line: 341

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.1)
Gecko/20060111 Firefox/1.5.0.1

But all in all, it looks like an overly convoluted way of doing an image
rollover.

With the comments removed, it is still 206 lines to do an image rollover?

 

[Randy Webb]

Thomas 'PointedEars' Lahn said the following on 4/16/2006 2:22 PM:

What part of "Image Hover Script" did you not understand?

What part of "Common Sense" do *you* not understand? You post an ANN for
a library that is poorly documented that is supposed to be for image
rollovers yet nowhere in the page does it explain that?

Yes and yes.

Yes and poorly.

You could have found the script element referring to it. There are not so
many of them there.

Good idea for a library - make the code easy to get to.

Exactly and his fails miserably.

hoverMe, like all my scripts, is not for the completely clueless, and it is
not for those who are unwilling to learn the basics of client-side script
programming.

That library is only for a list of people who I will leave nameless.

 

[Stephen Chalmers]

hoverMe, like all my scripts, is not for the completely clueless, and it is
not for those who are unwilling to learn the basics of client-side script
programming.

Leaving only those who prefer inevitably to use code of their own
devising, assumg that they aren't too pre-occupied inventing something
else unrelated, like perhaps a friction-reducing device, perhaps
circular in shape, maybe centrally-pivoted with any number of
additional refinements.

 

[Thomas 'PointedEars' Lahn]

hoverMe, like all my scripts, is not for the completely clueless, and it
is not for those who are unwilling to learn the basics of client-side
script programming.

Leaving only those who prefer inevitably to use code of their own
devising, [...]

No, there have been several amateurs who had quickly learned to use previous
versions of hoverMe just by looking at the (obviously self-explanatory)
example code of the test case, and thanked me personally for providing an
easy to use bullet-proof hover script of which they actually understood
at least the basics (although I share the credit with the contributors,
without them it would not have been possible this way). And that was
before hoverMe went library, when consequently the source code was more
complicated to apply to ones actual needs. I doubt it will be much
different with this version, quite the opposite.

Perhaps you misunderstood my statement, as you have cited it off context.
I am not against documentation; the contrary is true. However, I am (among
other developers) not convinced that (script) code should be written for
the kind of completely clueless people I described; that would not do the
Net, them, or me anything good. Especially as nobody is paying me for the
free time I am willing to invest in software development.


PointedEars

 

[Matt Kruse]

What part of "Image Hover Script" did you not understand?

By description alone, I would think an "image hover script" would make an
image hover over something.
In reality, your code just does image swapping, as has been done 4 billion
times since it first became possible.

Yes and yes.

It is commented quite poorly, if that is indeed the documentation.

hoverMe, like all my scripts, is not for the completely clueless, and
it is not for those who are unwilling to learn the basics of
client-side script programming.

Maybe I am not 1337 enough to be hip to your unnecessarily complex code to
accomplish an extraordinarily simply task, but I think at least a few
criticisms are justified. After all, you did "announce" this script to the
group. You put it up, I assume, as a script which you think people should
use to solve a given problem and to solicit feedback. So I have some
comments:

1. You should at _least_ give a high-level summary of what the purpose of
your code is. I saw the mouse-over image-swap effect and had to guess that
this was the purpose of your code. Perhaps it's capable of more complex
things. One would never know.

2. Even if you're targeting people who are not "completely clueless" to use
your code, a documented interface should be available. Expecting people to
read source code to discover a hidden interface is absurd.

3. Again, your interface for accomplishing a simple task is entirely
unnecessary. I read through your code and I understand it, but I wouldn't be
tempted to use code with such an obfuscated, undocumented interface.

4. Do you _really_ think this code is practical? Really?

You are extremely critical and judgemental of others on this group on a
regular basis, so I don't think I'm out line in being critical of your
library. And I also don't think I'm naive about the amount of time and
effort it takes to document a script library, provide examples, etc. You are
welcome to visit JavascriptToolbox.com and see that I practice what I preach
(I hope!).

If you want to provide something that is truly useful to others, I think you
should take some advice about how to present it. IMO

 

[Lasse Reichstein Nielsen]

What part of "Image Hover Script" did you not understand?

What it means.

I have no clue what an "image hover script" does. Any script that
runs through the mouseover event handler is an image hover script
in my book. Traditional effects are changing the image or showing
a larger version somewhere else on the screen or showing a tooltip.

How this script is supposed to help me is not at all obvious.
It gives me so little information that I don't even get curious
what it does.

/L

 

[Lasse Reichstein Nielsen]

JavaScript 1.0 had Object and prototype?

It had Object. Try this script in Netscape 2 (I have 2.02 installed):
x = new Object();
x.o = 42;
alert(x.o);
It alerts 42 as expected.

"Object.prototype" (and "Object.prototype.toString") didn't appear
until JavaScript 1.1 in Netscape 3 (I have 3.04 installed). "Image"
appeared at the same time.

Object appeared before Image?

Since "Image" was not in Netscape 2, then yes.

Whatever, I guess - after sime time. We look at Crucifixion paintings
with people dressed in Renaissance costumes and it doesn't bother us
too much, does it? Six centuries later it is the same ancient sh** -
was it a toga or a cowl.

The difference is that we can have our own crucifixion running on our
modern machines and see for ourselves, without having to read
renaissance papers about them.

/L