SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    any help with a code snippet to create an image dynamically and position it?

    I'll need to be doing this a lot and have seen many different methods using the image object, or using netscape layers (old 2002 tutorials), etc...

    What is the best (simplest) way to create a small image icon and place it on an existing page.

    Is this the way to do it? (syntax probably off)
    document.images[name].style.left=x;
    document.images[name].style.top=y;

    When creating the image, is "new image()" the right/best way to do it, and then set css to make it position absolute?

    I am having a hard time finding a good tutorial site for javascript. Any suggestions for good sites/books to get started?

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Alluvian,

    As for which is better (new Image() or document.createElement), I don't know. The following is a quick test. Both methods worked for me in Opera 9.10, Firefox 2.0 and IE 7, 6 and 5.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <style type='text/css'>
    p {
      border: 1px solid black;
    }
    .icons {
      width: 24px;
      height: 24px;
      border: none;
      margin-right: 1em;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      createIcons();
    };
    function createIcons()
    {
      var img, i = 1, e = document.getElementById('para' + i);
      while (e) {
        img = document.createElement('img');
        //img = new Image();
        img.className = 'icons';
        img.src = 'icon' + i + '.png';
        e.insertBefore(img, e.firstChild);
        e = document.getElementById('para' + (++i));
      }  
    }
    </script>
    </head>
    
    <body>
    
    <p id="para1">bla bla bla</p>
    
    <p id="para2">bla bla bla</p>
    
    </body>
    </html>
    But the real question is where in your document do you want the images? In my demo above I did it in a way that did not require positioning. But it depends on your document and where you want the images.
    Last edited by MikeFoster; May 1, 2007 at 23:21. Reason: typo

  3. #3
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They would be markers at x and y coordinates on a background image, so I don't see any way around doing some absolute positioning.

    I think your example code is enough to get me started on the project. Just wanted to make sure I was heading the right way in my head.

    Any suggested javascript reading? I would be using it mostly for form element enhancements and creating and placing images on the page.

  4. #4
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just remember to make your elements has position absolute. And if you want to put them into a box mask, set the parent to relative position with overflow : hidden (catch : coordinate calculation may change)


Bookmarks

Posting Permissions

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