RE: <PRELOAD> in <HEAD> section, MOUSEOVER attribute in <A> tag

Speaking as a web developer, the JavaScript for creating a rollover effect
is pretty simple.  Not only is it simple, it is alterable as well.  Often
times, one may want something else other than that 1 image to 'swap.'  Using
JavaScript is good because it is easy to alter if you choose to do so.  The
preload script seems to do the trick and that also ensures that those who
have turned scripting off do not need to preload those images.

For web designers with little technical knowledge, there are plenty of
programs that will create the scripts for them.

 - B G M


-----Original Message-----
From: www-html-request@w3.org [mailto:www-html-request@w3.org]On Behalf
Of Steve Nichols
Sent: Sunday, December 03, 2000 11:37 PM
To: www-html@w3.org; Grego1123@aol.com; lassie@penguinpowered.com
Subject: <PRELOAD> in <HEAD> section, MOUSEOVER attribute in <A> tag


JavaScript's mouseOver effect and the A:Hover effect of Cascading Style
Sheets have become so commonplace that I feel they deserve their own HTML
tags and parameters. This would eliminate unnecessary JavaScripting and
save web designers a lot of hassle. In order to achieve this, I propose the
following plan:

The first thing that must be addressed is JavaScript's ability to pre-load
images into the user's cache. This feature must be implemented in HTML in
order to achieve the same effect. For this, I propose a tag known as
<PRELOAD> which would be placed within the <HEAD>...</HEAD> section. The
tag would contain the URLs of each image that are to be stored using a
comma as the list separator. The code would look as follows:

<PRELOAD img1="/imgs/img1.jpg", img2="/imgs/img2.jpg", img3="imgs/img3.jpg">
	img1, img2 and img3 would all be used as references in the MOUSEOVER
attribute later on.

Now that we have our images stored in cache, I must discuss how the actual
mouseOver effect is to be implemented on the linked object. For this, I
propose an attribute known as MOUSEOVER that would be added to the <A> tag.
It could effect either text or graphical links by utilizing either the
images defined in the <PRELOAD> tag or a pre-defined CSS style. By using
the pre-loaded images, it would in essence be the same as the JavaScript
mouseOver effect which requires much more coding. By using the name of a
pre-defined CSS style as the parameter, it would be similar to defining
special properties to the style's A:Hover attribute and then referencing it
using the ID attribute of the <SPAN> tag. Some example code of both a
graphical link mouseOver and text link mouseOver effects would appear as
follows:

<A HREF="link.html" MOUSEOVER="img1"><IMG SRC="imgs/img0.jpg" ALT="Click
Me!></A>
	The above tag would render a graphical link that, in the event of the
user's cursor rolling over it, would be replaced by the image that was
assigned the name img1 in the <PRELOAD> tag.

<A HREF="link.html" MOUSEOVER="Style1">Text goes here.</A>
	The above tag would render a link that, in the event of the user's cursor
rolling over it, would obtain the properties of the pre-defined A:Hover
attribute of the CSS style Style1.

Not only could you use the A:Hover shortcut for text links or the
JavaScript mouseOver replacement for graphical links but you could also use
them interchangeably for increased flexibility. In this case, if a CSS
style was used as the MOUSEOVER parameter for an image, then I think the
best way to implement this would be by effecting the text of the ALT
attribute in the <IMG> tag with the style specified in the MOUSEOVER
attribute of the <A> tag. Therefore, in the event of the user's cursor
rolling over the image, it would change to the text of it's ALT attribute
and appear with the properties defined by the style's A:Hover attribute. On
the other hand, when an image URL was used as the MOUSEOVER parameter and
the <A> tag was in front of a text link, then the text would simply change
to that image when the cursor rolls over it. Some example code would appear
as follows:

<A HREF="link.html" MOUSEOVER="Style1"><IMG SRC="imgs/img0.jpg" ALT="Click
Me!"></A>
	The above tag would render a graphical link that, in the event of the
user's cursor rolling over it, would display the text defined in it's ALT
atrribute with the properties of the A:Hover property of the CSS style
Style1.

<A HREF="link.html" MOUSEOVER="img1">Text goes here.</A>
	The above tag would render a text link that, in the event of the user's
cursor rolling over it, would be replaced by the image that was assigned
the name img1 in the <PRELOAD> tag.

I'm sure I have forgotten to address some important features and/or
improvements can be made upon my proposal. Any feedback, positive or
negative (hopefully constructive), is welcomed and appreciated. Thank you
for taking your time to review this.


-$TeVe Nichols
URL: http://www.stevesite.com
ICQ: 9734254
AOL: SteveSite0
Yahoo!: SteveSite1
MSN: SteveSite

Received on Monday, 4 December 2000 08:09:21 UTC