Topic: DOM Roll Over? (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=10861" title="Pages that link to Topic: DOM Roll Over? (Page 1 of 1)" rel="nofollow" >Topic: DOM Roll Over? <span class="small">(Page 1 of 1)</span>\

 
WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 11-27-2002 16:36 Edit Quote

I happened upon this little piece of code here and was wondering if this was the new way that mouse overs should be handled? I have the script posted below and have it working on a page:
http://www.sinc.sunysb.edu/Stu/dcurran/mouseover/

The problem is that of course the hsrc attribute is not going to validate as XHTML 1.0, is there a method of adding this element to the doctype?

I don't think that this should give huge problems? I have just started looking at this code as of this morning, maybe I will get some more time over the week to modify it so that it can work with a given value. I don't know for sure.

If anyone has any ideas please let me know.

P.S. I haven't used Javascript in one of my pages in a very long time. I figure it still needs to be commented out using HTML comments, since the for loop did not validate due to the less than sign used. Any thoughts on that one?


code:
<script type="text/javascript">

/****************************************************
* DOM Image rollover:
* by Chris Poole
* [url=http://chrispoole.com]http://chrispoole.com[/url]
* Script featured on [url=http://www.dynamicdrive.com]http://www.dynamicdrive.com[/url]
* Keep this notice intact to use it :-)
****************************************************/

function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;

</script>



Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 11-28-2002 07:10 Edit Quote

I like the idea, but using a non-valid XHTML attribute doesn't seem like a good idea.

If such an attribute existed, it would likely be the responsibility of the browser to handle the mouseover anyway.

Some other way of specifying the secondary image source would be a good idea.

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 11-28-2002 07:16 Edit Quote

But is there a way to fix the DTD so that it makes the tag valid?

fo3nix
Obsessive-Compulsive (I) Inmate

From: england
Insane since: Nov 2002

IP logged posted posted 11-29-2002 17:01 Edit Quote

hi,

i'm the guy who made the script, glad you seem to like it

the non-valid attribute is a small problem; i'm currently working on a script that'll take advantage of multiple class values, therefore allowing the script to be used with valid markup.

however, are you really bothered about using valid markup? i mean, you should always try to make your markup valid, as it makes it more compatible for browsers, but the hsrc tag won't affect anything, or produce any errors. So, even if you do use the script, nothing bad will happen. the markup validator is just there for people who badly nest elements, etc. That's why i really don't see it as much of an issue

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 11-30-2002 04:10 Edit Quote

If our markup isn't valid, we can't ensure that our pages will work in the future.

Granted, the chances of an hsrc attribute being introduced in the future is incredibly slim (especially since <img> is being deprecated in XHTML 2.0), but there's a more theoretical side to this... you know, if I can say my page validates, it (a) makes me look better to potential employers and peers, and (b) makes me feel better about my site.

The "validation doesn't really matter" philosophy is what brought about things like the <layer> tag in the first place.

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

IP logged posted posted 11-30-2002 05:31 Edit Quote

I'm still not sold on them needing to vaildate any time in the near future.

However shouldn't you be able to add any attribute in a tag for XHTML?

I'm going by XML theories here so I could be wrong.



.:[ Never resist a perfect moment ]:.

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 12-01-2002 06:01 Edit Quote

I am pretty much with slime on A and B, I also have a C) policies in place that require standards compliance.

I do like your script a lot. This whole DOM thing is quite new to me, when I get some more time I want to actually learn about it.

I was also thinking like Bit about modifying the DOCTYPE so that it follows the correct DTD. If you have any ideas on any of this I would love to hear it.

P.S. thanks for writing the script.

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 12-03-2002 19:40 Edit Quote

One of my co-workers proposed using our own DTD and saving it to our web server with image modified as such:

code:
<!ELEMENT img EMPTY>
<!ATTLIST img
%attrs;
src %URI; #REQUIRED
[b]hsrc %URI #IMPLIED [/b]
alt %Text; #REQUIRED
name NMTOKEN #IMPLIED
longdesc %URI; #IMPLIED
height %Length; #IMPLIED
width %Length; #IMPLIED
usemap %URI; #IMPLIED
ismap (ismap) #IMPLIED
align %ImgAlign; #IMPLIED
border %Length; #IMPLIED
hspace %Pixels; #IMPLIED
vspace %Pixels; #IMPLIED
>



Does anyone see anything wrong with this, or question using this method? I don't think I know enough about this to make an informed decision.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 12-03-2002 19:50 Edit Quote

That's definitely better than just using an inexistant attribute. It's not a bad solution.

On the other hand, your page will no longer be valid XHTML. It'll be valid XML, of course, but not XHTML... it's something slightly different than XHTML. That means you can't safely call it XHTML.

In addition, you'll have to change the <!DOCTYPE ... > of your page, which will cause browsers to render it in quirks mode.

So there are problems with it. But if the clean mouseover code is worth that much to you, then go for it. =) Just don't call it XHTML.

fo3nix
Obsessive-Compulsive (I) Inmate

From: england
Insane since: Nov 2002

IP logged posted posted 12-06-2002 17:24 Edit Quote

hello again,

i've updated my script, and the new version can be found here:
http://chrispoole.com/scripts/dom_image_rollover/

it now allows for valid markup, as it takes advantage of the class attribute, instead of a made-up attribute



Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 12-06-2002 17:37 Edit Quote

Hmm... despite the valid markup, I'm not happy about how it uses the class attribute for something it's not intended for...

fo3nix
Obsessive-Compulsive (I) Inmate

From: england
Insane since: Nov 2002

IP logged posted posted 12-07-2002 23:42 Edit Quote

well, neither am i totally.. but its a better option than the script forcing you to use invalid markup imo; and will have to suffice until the object tag is more widely-supported (the img tag is being drained out with xhtml2..)



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu