Topic: DOM Roll Over?

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?

<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>

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.

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

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

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.

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 ]:.

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.

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

<!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.

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.

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

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

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..)