General discussion

Locked

Dynamically moving txt a top of an image

By jlawson ·
I need to move a red dot on a graphic map that looks at a database. When a change occurs in the db location fields the web based page must move the dot.

This conversation is currently closed to new comments.

5 total posts (Page 1 of 1)  
| Thread display: Collapse - | Expand +

All Comments

Collapse -

Dynamically moving txt a top of an image

by juanja In reply to Dynamically moving txt a ...

You can achieve this by getting the coordinates from the database, and then position the image(circle) over the map with a <div>.
Copy the code below into an html file, and then open the file with the browser. I placed four buttons for you to understand how to move the image. However, when you implement it with the database, write the initial values of PixelLeft and Top in the style section with ASP or something.
You can modify the code to support netscape (layers instead of Divs ).

Justreplace circle.gif and map.gif with your images.

<HTML>
<HEAD>
<style>
<!--
#circle{
position:absolute;
left:100px;
top:100px;
}
-->
</style>
</HEAD>
<BODY bgcolor="#CCCCCC">
<!--
This are optional arguments you can include in the style of the circle div/layer
Just in case you want to know
width:450px;
height:98px;
background-color:lightyellow;
layer-background-color:lightyellow;
border:1.5px solid green;
font: 12px Verdana;
line-height:20px;
-->
<div id="circle" >
<center>
<img src="circle.gif">
</center>
</DIV>
<input type="button" value="Move Left" name="moveleft" onclick="document.all.circle.style.pixelLeft=20;">
<input type="button" value="Move Right" name="moveright" onclick="document.all.circle.style.pixelLeft=200;">
<input type="button" value="Move Up" name="moveright" onclick="document.all.circle.style.top=1;">
<input type="button" value="Move Down" name="moveright" onclick="document.all.circle.style.top=300;">
<img src="map.gif" height="300">
</body>
</html>

Hope this helps!
Don't forget to rate my answer

Collapse -

Dynamically moving txt a top of an image

by jlawson In reply to Dynamically moving txt a ...

Poster rated this answer

Collapse -

Dynamically moving txt a top of an image

by juanja In reply to Dynamically moving txt a ...

You can achieve this by getting the coordinates from the database, and then position the image(circle) over the map with a <div>.
Copy the code below into an html file, and then open the file with the browser. I placed four buttons for you to understand how to move the image. However, when you implement it with the database, write the initial values of PixelLeft and Top in the style section with ASP or something.
You can modify the code to support netscape (layers instead of Divs ).

Justreplace circle.gif and map.gif with your images.

<HTML>
<HEAD>
<style>
<!--
#circle{
position:absolute;
left:100px;
top:100px;
}
-->
</style>
</HEAD>
<BODY bgcolor="#CCCCCC">
<!--
This are optional arguments you can include in the style of the circle div/layer
Just in case you want to know
width:450px;
height:98px;
background-color:lightyellow;
layer-background-color:lightyellow;
border:1.5px solid green;
font: 12px Verdana;
line-height:20px;
-->
<div id="circle" >
<center>
<img src="circle.gif">
</center>
</DIV>
<input type="button" value="Move Left" name="moveleft" onclick="document.all.circle.style.pixelLeft=20;">
<input type="button" value="Move Right" name="moveright" onclick="document.all.circle.style.pixelLeft=200;">
<input type="button" value="Move Up" name="moveright" onclick="document.all.circle.style.top=1;">
<input type="button" value="Move Down" name="moveright" onclick="document.all.circle.style.top=300;">
<img src="map.gif" height="300">
</body>
</html>

Hope this helps!
Don't forget to rate my answer

Collapse -

Dynamically moving txt a top of an image

by jlawson In reply to Dynamically moving txt a ...

Poster rated this answer

Collapse -

Dynamically moving txt a top of an image

by jlawson In reply to Dynamically moving txt a ...

This question was closed by the author

Back to Web Development Forum
5 total posts (Page 1 of 1)  

Related Discussions

Related Forums