...

View Full Version : Need to plot and attach pixels to a scrolling image



JazzcatCB
06-25-2009, 09:37 PM
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:


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


<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)


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);
}

vwphillips
06-26-2009, 01:33 PM
<!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>

JazzcatCB
06-27-2009, 01:45 AM
<!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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum