Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    27
    Thanks
    8
    Thanked 0 Times in 0 Posts

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

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    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)
    Last edited by xelawho; 10-04-2012 at 01:39 AM.

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    27
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Sorry, I`ve mistaken in coping my sript to the post , 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?
    Last edited by Drunklord; 10-04-2012 at 09:41 AM.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    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>

  • Users who have thanked xelawho for this post:

    Drunklord (10-05-2012)

  • #5
    New Coder
    Join Date
    Sep 2011
    Posts
    27
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Thumbs up

    It works Thank you very much


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •