On Aug 16, 11:02 pm, 0m4r <omar.adob...@gmail.com> wrote:
> Hello,
> I'm quite new with Javascript and so actually I'm trying to learn
> something about it.
> I want to "extend" the Image DOM element, so I wrote this Javascript
> code:
>
> === MyImg.js ===
> function MyImg(imgsrc){
> this.src = imgsrc;}
>
> MyImg.prototype = new Image();
> === /MyImg.js ===
>
> Then I put this code int an HTML page:
>
> === index.html ==
> [...some HTML header stuff...]
> <script language=..... >
The language attribute is deprecated, type is required.
> function load(){
>
> var container = document.getElementById("test1");
> var container1 = document.getElementById("test2");
>
> var gImg = new MyImg("Image1.jpg");
> var gImg1 = new MyImg("Image2.jpg");
>
> container.appendChild(gImg);
> container.appendChild(gImg1);
appendChild expects its argument to be a HTML element that implements
the Node interface. For some browsers, your use of new Image() on the
prototype chain fits the bill, in others, not. It is a risky strategy
that is bound to fail a good percentage of the time.
> container1.innerHTML = gImg.src + "<br>" + gImg1.src;
> </script>
> </head>
> <body onload="load">
In order to execute the function referenced by 'load', you need to add
the call operator:
<body onload="load()">
> <div id="test1"/>
That is invalid HTML. For div elements, the closing tag is required.
> <div id="test2"/>
> </body>
> </html>
> === /index.html ===
>
> and here is the result I have back:
In some browsers you will get a syntax error due to the previously
mentioned issue with appendChild.
> === generated HTML code ===
> <div id="test1">
> <img src="Image2.jpg"/>
I'll bet there isn't a browser out there that returns that as HTML.
Firefox returns:
<div id="test1">
<div id="test2">file:///Users/rogreen/Desktop/Image2.jpg<br>file:///
Users/rob/Desktop/Image2.jpg</div><img src="Image2.jpg"></div>
> </div>
> <div id="test2">
> Image2.jpg<br/>Image2.jpg
> </div>
[...]
>
> Where I'm wrong? Could anybody help me?
Use valid HTML. If you want to build DOM Image elements, then do
that.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>foo</title>
<script type="text/javascript">
function load(){
var container = document.getElementById("test1");
var container1 = document.getElementById("test2");
var gImg = new Image();
gImg.src = "Image1.jpg";
var gImg1 = new Image();
gImg1.src = "Image2.jpg";
container.appendChild(gImg);
container.appendChild(gImg1);
container1.innerHTML = gImg.src + "<br>" + gImg1.src;
}
</script>
</head>
<body onload="load()">
<div id="test1"></div>
<div id="test2"></div>
</body>
Similar Threads
