Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > eXtensible Image Replacement

Reply
Thread Tools

eXtensible Image Replacement

 
 
Dante
Guest
Posts: n/a
 
      12-08-2003
I was trying to improve PPK's JIR script by using XML. I have this code:
function init()
{
var x = document.getElementsByTagName('replace');
var prefix = 'http://www.quirksmode.org/dom/pix/';
var suffix = '.gif';
for (var i=0;i<x.length;i++)
{
if (x[i].getAttribute('url'))
{
var y = replace.cloneNode(true);
y.replacedHeader = x[i];
outimage = prefix + x[i].getAttribute('url') + suffix;
outalt = x[i].firstChild.nodeValue;
var replace='<img src="'+outimage+'" alt="'+outalt+'">';
y.onload = function () {
this.replacedHeader.innerHTML=replace;
};
}
}
}
I'm sure there's plenty of things wrong with it that I missed...is there?
 
Reply With Quote
 
 
 
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      12-09-2003
Dante wrote:

> I was trying to improve PPK's JIR script by using XML.


#define PPK
#define JIR

> I have this code:
> function init()
> {
> var x = document.getElementsByTagName('replace');

^
> var prefix = 'http://www.quirksmode.org/dom/pix/';
> var suffix = '.gif';
> for (var i=0;i<x.length;i++)

^
It is wise to check references before accessing the objects/properties
they refer to:

if (typeof document.getElementsByTagName != "function"
|| typeof document.getElementsByTagName != "object")
{
var x = document.getElementsByTagName('replace');
if (x)
{
...
}
}

While the first test may not be required (depending on the DOM of the
target UA), the second one is duty.

> {
> if (x[i].getAttribute('url'))


Do not use getAttribute(...) if you can avoid it, the so-called most
used browser (IE)'s implementation of the W3C-DOM is flawed on it
Use

if (x[i].url)

instead.

Also note that it is unwise not to give variables a talking name. To
know what `x' refers to, one must re-read the preceding statements.
Time is money.

> {
> var y = replace.cloneNode(true);
> y.replacedHeader = x[i];


Again, you should check if the cloneNode(...) process succeeded:

if (y)

> outimage = prefix + x[i].getAttribute('url') + suffix;


Again, drop getAttribute(...) if you can. Besides, is it intended
that `outimage'

> outalt = x[i].firstChild.nodeValue;


and `outalt' are declared global? If not, use the `var' keyword.

> var replace='<img src="'+outimage+'" alt="'+outalt+'">';
> y.onload = function () {
> this.replacedHeader.innerHTML=replace;


`innerHTML' is a proprietary property only available in the HTML DOM of
some UAs. Use standardized W3C-DOM properties and methods instead:

// Create the `img' element
var oImg = document.createElement("img");
if (oImg) // if that worked
{
// assign values to its properties
oImg.src = outimage;
oImg.alt = outalt;

// remove all child nodes from the later parent element
var o = this.replacedHeader;
while (o.childNodes.length > 0)
o.removeChild(o.firstChild);

// and append the `img' element as its child node
o.appendChild(oImg);
}

> I'm sure there's plenty of things wrong with it that I missed...is there?


Yes, there is, for suitable values of `plenty'

Have a look in the specification before you continue:
http://www.w3.org/TR/DOM-Level-2-Core/


PointedEars
 
Reply With Quote
 
 
 
 
Dante
Guest
Posts: n/a
 
      12-09-2003
I forgot to mention:

The original plan was to use document.createElement. But due to
name-spacing difficulties I modified it. Would
document.createElement('html:img') work if the html namespace was
defined?
 
Reply With Quote
 
Lasse Reichstein Nielsen
Guest
Posts: n/a
 
      12-09-2003
http://www.velocityreviews.com/forums/(E-Mail Removed) (Dante) writes:

> The original plan was to use document.createElement. But due to
> name-spacing difficulties I modified it. Would
> document.createElement('html:img') work if the html namespace was
> defined?


I have no idea. It doesn't say it should in the W3C DOM Core
specification.
However, it has
document.createElementNS(htmlNamespaceURI,"img")
If you application is HTMLonly, you don't need it, but otherwise
you should use the "NS" methods.

W3C DOM 2 Core: <URL:http://www.w3.org/TR/DOM-Level-2-Core/core.html>

?L
--
Lasse Reichstein Nielsen - (E-Mail Removed)
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Gui implementation in extensible framework Twisted Java 5 03-31-2006 03:19 PM
Building an Extensible Web Framework Lucas Tam ASP .Net 2 10-13-2005 03:55 PM
should a dialog implementation be extensible - Java 1 04-06-2005 08:09 AM
sockSvr - an extensible web server and an embedable component http://mylinuxisp.com/~vmdd_tech Java 0 05-23-2004 11:55 AM
Regarding BEEP (Blocks Extensible Exchange Protocol) Ravi Shankar Java 0 01-04-2004 03:37 AM



Advertisments