CodingForums.com - Drawing images in <div> fails

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - Drawing images in <div> fails (http://www.codingforums.com/showthread.php?t=275077)

Drawing images in <div> fails

Hi all! I,m trying to insert images to <div>. I can insert the images in <body> of the document with this code

Code:

function drawImges(table_name,id,path){



  var s_table = document.getElementsByName(table_name);

 

  var newImage = new Image(),img;

  newImage.onload=function ()  {

    img=document.createElement('IMG');

    img.id=id;

    img.src=path;

    document.body.insertBefore(img,document.body.childNodes[0]);

     }

 newImage.src= path;



}

but I need them to be in <div>, not in <body> . I’ve tried it using

Code:

s_table.appendChild (img);

Code:

s_table.insertBefore(img,s_table.childNodes[0]);

instead of

Code:

document.body.insertBefore(img,document.body.childNodes[0]);

and all my intents fail.
Looking for help, please.:)

give the div an id and do

Code:

document.getElementById("mydiv").appendChild(img);

(getElementsByName will return a collection, even if it only of one element, so without seeing the rest of your code I guess you could do s_table[0].appendChild(img); but you would have to wonder why)

Sorry, I`ve mistaken in coping my sript to the post :o, the original one do has div's name

"js/show_map.js" file

Code:

draw drawImges ("mapscreen", “img1”,”imges/001.jpg”,800,800);



function drawImges(table_name,id,path, width, height){



  var s_table = document.getElementsByName(table_name);

 

  var newImage = new Image(),img;

  newImage.onload=function ()  {

    img=document.createElement('IMG');

    img.id=id;

    img.src=path;

    document.body.insertBefore(img,document.body.childNodes[0]);



   document.getElementById(id).style.width = width + "px";

   document.getElementById(id).style.height = height + "px";

     }

 newImage.src= path;



}

HTML document

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">



<html>

<head>

<title>Fails</title>

    

<script type="text/javascript" src=js/show_map.js></script>





</script>

</head>

<body>

<div  id="screen" name=”uuuu” style="width:600px;height:500px;">

</div>

<script>

  drawImges();

</script>



</body>



</html>

I’ve changed

Code:

document.body.insertBefore(img,document.body.childNodes[0]);

for

Code:

s_table[0].appendChild(img);

and it works. The image begins in <div id="screen" name=”uuuuh” style="width:600px;height:500px;">, but it’s spread all over the body and not inside of the div’s borders, as I pretend. I want to see a portion of the picture cut by dimensions of the div (not a scaled image).
What do I do wrong?

you need to set the containing div's overflow to hidden, otherwise it will stretch to accommodate the contents.

But the whole thing seems weird to me. I'd do it more like this:

Code:

<body>

<div id="screen" name="uuuu" style="width:600px;height:500px;overflow:hidden"></div>

<script type="text/javascript">

function drawImges(thediv,id,path, width, height){

  var newImage = new Image(),img;

  newImage.onload=function ()  {

    img=document.createElement('IMG');

    img.id=id;

    img.src=path;

        img.style.width = width + "px";

        img.style.height = height + "px";

   document.getElementById(thediv).appendChild(img)

     }

 newImage.src= path;

}

drawImges("screen", "img1","imges/001.jpg",800,800);

</script>

</body>

It works :) Thank you very much :thumbsup: