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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need to plot and attach pixels to a scrolling image

    I have an img of a map of Europe in a div. I want to plot routes between cities in Europe as dotted lines. The image is scrollable and I want the routes to scroll with the image. So the routes should be attached to the image. Furthermore, when drawing routes outside of the viewable area, the routes should be clipped so they don't show up outside of the image. but when the image is scrolled, the routes should appear. Can anyone help me with this?

    Here's a link to the dev site: http://railsacrosseurope.com/turn

    Here is my code:
    CSS:
    Code:
    body
    {
        background-image: url('bgdesert.jpg');
        position: absolute;
    }
    
      div#main
      {
        color: red;
        height: 400px;
        width: 760px;
        border: 3px 3px;
      }
      div#map
      {
        height: 320px;
        width: 620px;
        /* background-image: url('/images/map_europe.jpg');*/
        border: 3px 3px;
        overflow: auto;
        float: left;
      }
      .Ink {
        position: absolute;
        background-color: #fff;
        border-top: 1px solid transparent;
        width: 1px;
        height: 1px;
      }
    HTML
    Code:
    <div id="main">
      <div id="map"><img id="map-img" src="<?php echo $config->url->absolute->public; ?>/images/map_europe.jpg" alt="none" /></div>
    </div>
    FBJS (Facebook JS)
    Code:
    function PlotPixel(x, y, c) {
        var pixel = document.createElement('div');
        pixel.setClassName('Ink');
        pixel.setStyle('borderTopColor', c);
        pixel.setStyle('left', x + 'px');
        pixel.setStyle('top', y + 'px');
        parentObj = document.getElementById('map');
        parentObj.appendChild(pixel);
    }

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #map {
      position:relative;overflow:auto;width:600px;height:400px;
    }
    
    #map IMG{
      position:relative;
    }
    
    .dot0 {
      width:1px;height:1px;background-Color:#FFCC66;
    }
    .dot1 {
      width:1px;height:1px;background-Color:#336600;
    }
    
    /*]]>*/
    </style>
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function zxcPlot(id,cls){
     var obj=document.getElementById(id);
     this.obj=zxcES('DIV',{position:'relative',zIndex:'2'});
     obj.insertBefore(this.obj,obj.firstChild);
     this.clone=zxcES('DIV',{position:'absolute'},this.obj);
     this.cls=cls||''
     var obj=zxcES('DIV',{position:'absolute',left:'0px',top:'0px'});
    }
    
    
    zxcPlot.prototype.Line=function(obj,srt,fin){
     var w=fin[0]-srt[0],h=fin[1]-srt[1],hyp=Math.sqrt(w*w+h*h),xr=w/hyp,yr=h/hyp;
     for (var ary=[],z0=0;z0<hyp;z0++){
      ary[z0]=[z0*xr+srt[0],z0*yr+srt[1]];
      var dot=zxcES(this.clone.cloneNode(false),{left:z0*xr+srt[0]+'px',top:z0*yr+srt[1]+'px'},obj);
     }
     return ary;
    }
    
    zxcPlot.prototype.Plot=function(ary,cls){
     this.clone.className=cls||this.cls;
     for (var pary=[],z0=0;z0<ary.length;z0+=2) if(ary[z0+1]) pary.push([ary[z0],ary[z0+1]]);
     var obj=zxcES('DIV',{position:'absolute',left:'0px',top:'0px'},this.obj);
     for (var z1=0;z1<pary.length;z1++){
      if (pary[z1+1]) this.Line(obj,pary[z1],pary[z1+1])
     }
     return obj;
    }
    
    function zxcES(ele,style,par,txt){
     if (typeof(ele)=='string') ele=document.createElement(ele);
     for (key in style) ele.style[key]=style[key];
     if (par) par.appendChild(ele);
     if (txt) ele.appendChild(document.createTextNode(txt));
     return ele;
    }
    
    
    /*]]>*/
    </script></head>
    
    <body onload="P=new zxcPlot('map','dot0');" >
     <div id="map">
       <img id="map-img" src="http://railsacrosseurope.com/public/images/map_europe.jpg" alt="none" />
    
     </div>
    <input type="button" name="" value="Route 1"
     onclick="P.Plot([305,65,270,95,295,145,288,180,282,208,293,243],'dot1');"
    />
    <input type="button" name="" value="Route 2"
     onclick="P.Plot([320,325,347,495]);"
    />
    
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #map {
      position:relative;overflow:auto;width:600px;height:400px;
    }
    
    #map IMG{
      position:relative;
    }
    
    .dot0 {
      width:1px;height:1px;background-Color:#FFCC66;
    }
    .dot1 {
      width:1px;height:1px;background-Color:#336600;
    }
    
    /*]]>*/
    </style>
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function zxcPlot(id,cls){
     var obj=document.getElementById(id);
     this.obj=zxcES('DIV',{position:'relative',zIndex:'2'});
     obj.insertBefore(this.obj,obj.firstChild);
     this.clone=zxcES('DIV',{position:'absolute'},this.obj);
     this.cls=cls||''
     var obj=zxcES('DIV',{position:'absolute',left:'0px',top:'0px'});
    }
    
    
    zxcPlot.prototype.Line=function(obj,srt,fin){
     var w=fin[0]-srt[0],h=fin[1]-srt[1],hyp=Math.sqrt(w*w+h*h),xr=w/hyp,yr=h/hyp;
     for (var ary=[],z0=0;z0<hyp;z0++){
      ary[z0]=[z0*xr+srt[0],z0*yr+srt[1]];
      var dot=zxcES(this.clone.cloneNode(false),{left:z0*xr+srt[0]+'px',top:z0*yr+srt[1]+'px'},obj);
     }
     return ary;
    }
    
    zxcPlot.prototype.Plot=function(ary,cls){
     this.clone.className=cls||this.cls;
     for (var pary=[],z0=0;z0<ary.length;z0+=2) if(ary[z0+1]) pary.push([ary[z0],ary[z0+1]]);
     var obj=zxcES('DIV',{position:'absolute',left:'0px',top:'0px'},this.obj);
     for (var z1=0;z1<pary.length;z1++){
      if (pary[z1+1]) this.Line(obj,pary[z1],pary[z1+1])
     }
     return obj;
    }
    
    function zxcES(ele,style,par,txt){
     if (typeof(ele)=='string') ele=document.createElement(ele);
     for (key in style) ele.style[key]=style[key];
     if (par) par.appendChild(ele);
     if (txt) ele.appendChild(document.createTextNode(txt));
     return ele;
    }
    
    
    /*]]>*/
    </script></head>
    
    <body onload="P=new zxcPlot('map','dot0');" >
     <div id="map">
       <img id="map-img" src="http://railsacrosseurope.com/public/images/map_europe.jpg" alt="none" />
    
     </div>
    <input type="button" name="" value="Route 1"
     onclick="P.Plot([305,65,270,95,295,145,288,180,282,208,293,243],'dot1');"
    />
    <input type="button" name="" value="Route 2"
     onclick="P.Plot([320,325,347,495]);"
    />
    
    
    </body>
    
    </html>
    vwphillips:

    You are right on. Position: relative for the parent div was the solution.

    And hey: Thanks for that reminder about God's love. That's the only thing that keeps me going most days!

    Thank you!


  •  

    Posting Permissions

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