W3C home > Mailing lists > Public > www-html@w3.org > December 2000

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

From: Steve Nichols <webmaster@stevesite.com>
Date: Sun, 03 Dec 2000 20:36:31 -0800
Message-Id: <4.3.1.0.20001203185213.02854a68@stevesite.com>
To: www-html@w3.org, Grego1123@aol.com, lassie@penguinpowered.com
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 Sunday, 3 December 2000 20:31:34 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 27 March 2012 18:15:44 GMT