SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict mserms's Avatar
    Join Date
    Jun 2001
    Location
    Scotland
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamically drawing lines on top of images and tables

    Hopefully I can describe what I'm trying to do.

    I'm setting up rollovers on a fairly large image that display the contents (text and another image) of a table. These contents have been stored in a layer which gets displayed when required. This is fine, but I'd like to also have a plain white, straight, line to be drawn between the rollover part of the main image and the displayed image.

    I'm not really a JavaScript programmer so I'm not sure if this is do-able or how.

    Any help greatly appreciated.

    Ta,

  2. #2
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two approaches

    Hello,

    I have two answers for you.

    The first is very simple. Just create an image and change the color of it... and then use width and height ... top and left to position it properly.
    Technically it doesn't even have to be an image.

    var oD=document.createElement('DIV');
    var oS=oD.style;
    oS.backgroundColor='#FFFFFF';
    oS.pixelWidth=2;
    var oI= document.getElementById('*note*').style
    oS.pixelHeight = oI.pixelHeight;
    // Make the div the same size as the image it's going over (*note* is the id of the image)
    oS.position='absolute';
    oS.pixelLeft=oI.pixelLeft+(oI.pixelWidth/2);
    // Put it in the middle of the image (change as req)
    oS.pixelTop=oI.pixelTop;
    document.body.appendChild(oD);

    This is a simple way of doing it dynamically.
    you can then use the visibility of the element to hide and show it.

    otherwise we *could* use directX direct Animation to dynamically draw the objects. This could also work well, so let me know if you want more information on this.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  3. #3
    SitePoint Addict mserms's Avatar
    Join Date
    Jun 2001
    Location
    Scotland
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm. Maybe I'm getting out of my depth here. I really don't know much JavaScript...

  4. #4
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, i wasn't trying to confuse you!



    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---


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
  •