how can I make this standards-compliant? [Archive]

View Full Version : how can I make this standards-compliant?

Chris

27.03.2002, 05:30

I've made a quick little script thats just a simple image mouseover, but requires no coding by the user, making it quite simple to use. Currently, it only works in IE, so how can I convert it to comply to the W3C standards??

Here's the code:

<pre id=code>
var imgOriginSrc;

function CP_imgAutoMouseOver() {
imgOriginOver=window.event.srcElement;
if(imgOriginOver.tagName=='IMG' && imgOriginOver.hsrc != null) {
imgOriginSrc = imgOriginOver.src;
imgOriginOver.src = imgOriginOver.hsrc
}
}
function CP_imgAutoMouseOut() {
imgOriginOut=window.event.srcElement;
if(imgOriginOut.tagName=='IMG' && imgOriginOut.hsrc != null) {
imgOriginOut.src = imgOriginSrc
}
}
document.onmouseover=CP_imgAutoMouseOver;
document.onmouseout=CP_imgAutoMouseOut;
</pre id=code>

then, i use the script by doing this:
<pre id=code>02171.jpg</pre id=code>for a mouseover, or remove the hsrc attribute to have no mouseover...

//----------{[url="http://chrispoole.com"]Chris Poole[/url:h3omdd1pen]}----------//
the artist also known as fo3nix

Chris

27.03.2002, 06:15

OK, i've gone some way to standardise it:

<pre id=code>
var imgOriginSrc;

function CP_imgAutoMouseOver() {
imgOriginOver=window.event.srcElement;
if(imgOriginOver.tagName=='IMG' && imgOriginOver.hsrc != null) {
imgOriginSrc = imgOriginOver.getAttribute('src')
imgOriginOver.setAttribute('src',imgOriginOver.get Attribute('hsrc'))
}
}
function CP_imgAutoMouseOut() {
imgOriginOut=window.event.srcElement;
if(imgOriginOut.tagName=='IMG' && imgOriginOut.hsrc != null) {
imgOriginOut.setAttribute('src',imgOriginSrc)
}
}
document.onmouseover=CP_imgAutoMouseOver;
document.onmouseout=CP_imgAutoMouseOut;
</pre id=code>

so, now I just need a standards-compliant version of the line:<pre id=code>window.event.srcElement</pre id=code>

can anybody help??

//----------{[url="http://chrispoole.com"]Chris Poole[/url:79mg7f2ica]}----------//
the artist also known as fo3nix

Chris

27.03.2002, 06:49

i'm solving this one myself, aren't I?!?

OK, I got this far now (i've only changed a few lines of code):

<pre id=code>
function CP_imgAutoMouseOver(e) {
imgOriginOver=e.currentTarget;
</pre id=code>

firstly, is this correct?? Also, how do i see if its TAG name is 'IMG'???

//----------{[url="http://chrispoole.com"]Chris Poole[/url:bvtedz7foo]}----------//
the artist also known as fo3nix

Rod

27.03.2002, 10:39

hi chris.

i use this in my scrollbar script mdown(e) function:

htmlel=window.event?event.srcElement:e.target;
if (htmlel.nodeType==3||htmlel.tagName.toLowerCase()= ='img') htmlel=htmlel.parentNode;

[url="http://www.e-syed.net/viewsrc/"]. viewsrc . [/url:g6q5s5ittw]

ttrenka

27.03.2002, 11:35

If I remember correctly, you might be doing this the hard way. The spec (DOM2 events, if I'm not mistaken, Paul?) says that almost any HTML element has most of the standard events already attached to them...so you could probably just do something like this:

<pre id=code>
var imgarr = document.getElementsByTagName('img') ;
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i:gz63gchhuu].getAttribute('hsrc')) {
imgarr[i:gz63gchhuu].onmouseover = function() { do mouseover switch ; } ;
imgarr[i:gz63gchhuu].onmouseout = function() { do mouseout switch ; } ;
}
}
</pre id=code>

The only possible issue I see here is that your "hsrc" attribute is not part of the spec, it's an "expando" property, and some validators might barf at it.

(note: I just wrote that off the top of my head, I don't know if it works, but it should.... :)

Tom Trenka

Chris

27.03.2002, 15:34

thanks for that ttrenka :)

however, I have sorted it myself (plus, IE doesn't like some parts of the DOM still):

<pre id=code>
var imgOriginSrc;

function CP_imgAutoMouseOver(e) {
imgOriginOver=(document.all)?event.srcElement:e.ta rget;
imgTagOver=(document.all)?imgOriginOver.tagName:im gOriginOver.nodeName;
if(imgTagOver=='IMG' && imgOriginOver.getAttribute('hsrc') != null) {
imgOriginSrc = imgOriginOver.getAttribute('src')
imgOriginOver.setAttribute('src',imgOriginOver.get Attribute('hsrc'))
}
}
function CP_imgAutoMouseOut(e) {
imgOriginOut=(document.all)?event.srcElement:e.tar get;
imgTagOver=(document.all)?imgOriginOut.tagName:img OriginOut.nodeName;
if(imgTagOver=='IMG' && imgOriginOut.getAttribute('hsrc') != null) {
imgOriginOut.setAttribute('src',imgOriginSrc)
}
}
document.onmouseover=CP_imgAutoMouseOver;
document.onmouseout=CP_imgAutoMouseOut;
</pre id=code>

tested in IE6, Moz0.9.8, NS6.1.....

//----------{[url="http://chrispoole.com"]Chris Poole[/url:s7pmk3mrhb]}----------//
the artist also known as fo3nix

ttrenka

27.03.2002, 16:02

Looking good....the only thing I would say about it is that you'll end up having to manage the events triggered by the page being viewed with your functions, simply because you attach your functions to the document object directly, as opposed to the elements that actually require and / or are activated by the event. Meaning that the addition of more functionality could, in the long run, get ugly...

And if I remember right, by attaching your functions to the document object, you basically limit those events of the document to your functions only--DOM2 Event doesn't support multiple delegates / event handlers on a single event, right? So you can't do something like this (C#.Net):
<pre id=code>
public delegate ImageSwap { code here }
public delegate LinkHover { code here }
document.onmouseover += new EventHandler(ImageSwap) ;
document.onmouseover += new EventHandler(LinkHover) ;
...
</pre id=code>

Not that this works at all, it's just an abstract example. You could "mimic" this in Javascript by writing a central EventHandler object, which you add sequential methods to and trigger (I wrote on like this not too long ago, works pretty well):
<pre id=code>
var MyNamespace = {
EventBroker : {
invokeEvent : function(iEventName, oEventArguments) {
if (this.Events[iEventName]) {
for (var i = 0; i < this.Events[iEventName].handlers.length; i++) {
this.Events[iEventName].handlers[i:fxg630ak34](oEventArguments) ;
}
return true ;
}
return false ;
} ,
addListener : function(iEventName, iFunction) {
if (!this.Events[iEventName]) {
this.Events[iEventName] = new MyNamespace.Event() ;
}
this.Events[iEventName].addHandler(iFunction) ;
return ;
} ,
removeListener : function(iEventName) {
if (this.Events[iEventName]) this.Events[iEventName] = null ;
return ;
} ,
Events : {}
} ,
Event : function(){
this.handlers = new Array() ;
this.addHandler = function(iFunction) {
this.handlers[this.handlers.length] = iFunction ;
return ;
} ;
return this ;
} ,
EventArguments : function(arr) {
this.arguments = (arr)?arr:new Array() ;
this.addArgument = function(s) {
this.arguments[this.arguments.length] = s ;
return ;
} ;
return this ;
}
} ;
</pre id=code>
Works pretty well, too.

(damn, keep finding mistakes :)
OK, last edit....

You'd use this like this:
<pre id=code>
MyNamespace.EventBroker.addListener('onmouseover', ImageSwap) ;
MyNamespace.EventBroker.addListener('onmouseover', LinkHover) ;
document.onmouseover = MyNamespace.EventBroker.InvokeEvent('onmouseover', new MyNamespace.EventArguments()) ;
...etc...
</pre id=code>

Edited by - ttrenka on 03/27/2002 14:24:45

Icestorm

27.03.2002, 16:24

aren't you looking for this [url="http://www.scottandrew.com/weblog/articles/cbs-events"]explanation about DOM events[/url:hi4nkjz32u], Tom?

:: [url="http://13thparallel.org/"]13thparallel[/url:hi4nkjz32u] ::

Edited by - icestorm on 27/03/2002 21:24:24

Chris

27.03.2002, 16:26

i've taken your comments into consideration, and decided to change the script...but it doesn't work: it says that imgarr is null or not an object ?!?

<pre id=code>
var imgOriginSrc;
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i:wu2mgmp4d7].getAttribute('hsrc')) {
imgarr[i:wu2mgmp4d7].onmouseover = function() {
imgOriginSrc = imgarr[i:wu2mgmp4d7].getAttribute('src');
imgarr[i:wu2mgmp4d7].setAttribute('src',imgarr[i:wu2mgmp4d7].getAttribute('hsrc'))
}
imgarr[i:wu2mgmp4d7].onmouseout = function() {
imgarr[i:wu2mgmp4d7].setAttribute('src',imgOriginSrc)
}
}
}
</pre id=code>

BTW: i've put the script after any images on the page...

//----------{[url="http://chrispoole.com"]Chris Poole[/url:wu2mgmp4d7]}----------//
the artist also known as fo3nix

ttrenka

27.03.2002, 16:29

Oh hey Michael!

Nope, although that article is VERY useful...no, Scott's article deals with attaching events directly to the DOM model cross-browser. The code I just posted actually has nothing to do with events (until you attach them to a real one), it's just an object set that allows you to attach multiple methods to a single DOM event if you want.

Co-worker is working on a very complex web-based conference management system (read: big nasty program) which pushes the DOM to it's limits (everything is a set of modular forms) and he needed a way of running multiple methods, none of which may be known until the request is made, triggered by a single DOM event, so I came up with that.

We've modified it a little bit since then, but the nice thing is that you can add methods wherever you need to in the document build (server-side) and still get the results you want.

Fun.

Chris

27.03.2002, 16:33

yeah - i tried that...

but, it accepts the array, because it only makes the error when you move over an image that has the hsrc attribute, therefore it runs the code imgarr[i:c0pfx0zwc2].onmouseover = function(), and returns an error...

//----------{[url="http://chrispoole.com"]Chris Poole[/url:c0pfx0zwc2]}----------//
the artist also known as fo3nix

ttrenka

27.03.2002, 16:37

Hang on a few minutes, I'm gonna set up a page and try it here.

Chris

27.03.2002, 16:42

i've got a working system online, the only problem is that it captures all onmouseover and mouseout events...

http://chrispoole.com/data/scripts/imgswapeg.htm

kewl pictures, hey?!? I got them from Publisher, BTW..

//----------{[url="http://chrispoole.com"]Chris Poole[/url:rulvpj4usv]}----------//
the artist also known as fo3nix

Edited by - fo3nix on 27/03/2002 20:43:33

ttrenka

27.03.2002, 16:48

OK, I got it....the problem was the imgarr[i:156pk3zjzb] references inside the mouse event functions....here's the correction:
(edit: screw the "isrc" attribute, I'm just adding it on the detect :)
<pre id=code>
function init() {
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i:156pk3zjzb].getAttribute('hsrc')) {
imgarr[i:156pk3zjzb].setAttribute('isrc',imgarr[i:156pk3zjzb].getAttribute('src')) ;
imgarr[i:156pk3zjzb].onmouseover = function() { this.setAttribute('src',this.getAttribute('hsrc')) ; }
imgarr[i:156pk3zjzb].onmouseout = function() { this.setAttribute('src',this.getAttribute('isrc')) ; }
}
}
}
<body onload="init();">
...
</pre id=code>
(edit: eliminated the need for the global variable through the script :)

Works just fine on IE6, haven't tested it anywhere else yet.

Edited by - ttrenka on 03/27/2002 15:05:03

Chris

27.03.2002, 17:11

thanks a lot ttrenka! and thanks to Michael for pointing out that tutorial (another great from scott andrew!)...

i've uploaded the final product, working in IE6, Moz0.9.8, and NS6.1:
http://chrispoole.com/data/scripts/imgswapeg.htm

it's pretty much essential that it works in IE, so any browser testing would be appreciated! :)

//----------{[url="http://chrispoole.com"]Chris Poole[/url:lrkhkfuz1a]}----------//
the artist also known as fo3nix

ttrenka

27.03.2002, 17:20

Looking good...although I'd still kill the imgOriginSrc variable (you could run into problems on a page with a lot of mouseover images...)

Now all you have to do is get the "hsrc" images to preload automatically and you're set! You could do it like this:
<pre id=code>
if (imgarr[i:sr6envyqpq].getAttribute('hsrc') {
var temp = new Image() ;
temp.src = imgarr[i:sr6envyqpq].getAttribute('hsrc') ;
imgarr[i:sr6envyqpq].onmouseover = function() {....}
}
</pre id=code>

ttrenka

27.03.2002, 17:22

Works in IE5.0(Win2k).