PDA

View Full Version : Image coordinates?

HardMario
10-13-2002, 07:46 PM
I was wondering if it is possible to blit an image, a gif in this case, onto another image (gif again) at specified x and y coordninates. Is this possible with Javascript, or even regular HTML, and if so how do you do it? Thanks.
beetle
10-13-2002, 08:18 PM
I'm pretty sure what you are after is doable, but explain this word to me....'blit'

Typo? Is it english? :D
Bosko
10-13-2002, 08:42 PM
It's a win32 thing for drawing images.
HardMario
10-13-2002, 10:08 PM
Yeah, it is basically just the drawing of a 2d image, in this case a GIF.
beetle
10-13-2002, 10:10 PM
Ok.....

but in your sentence you used 'blit' as a verb...which neither of you has described it as....

:confused:
adios
10-13-2002, 11:04 PM
It's possible - and easy - using just HTML and CSS:

http://hotwired.lycos.com/webmonkey/html/97/25/index2a.html?tw=authoring

You'll need JS to alter this dynamically. A rudimentary example, using webreference's nice coordinate-getter (http://www.webreference.com/dhtml/diner/realpos1/index.html):


<html>
<head>
<title>untitled</title>
<style type="text/css">

#newthread {
position: relative;
left: 100px;
top: 100px;
z-index: 1;
}

#buddy {
position: absolute;
left: 300px;
top: 300px;
z-index: 99;
}

form {
position: absolute;
left: 380px;
top: 300px;
font: 200 12px "comic sans ms";
}

</style>
<script type="text/javascript" language="javascript">

function DL_GetElementLeft(eElement)
{
var nLeftPos = eElement.offsetLeft;
var eParElement = eElement.offsetParent;
while (eParElement != null)
{
nLeftPos += eParElement.offsetLeft;
eParElement = eParElement.offsetParent;
}
return nLeftPos;
}

function DL_GetElementTop(eElement)
{
var nTopPos = eElement.offsetTop;
var eParElement = eElement.offsetParent;
while (eParElement != null)
{
nTopPos += eParElement.offsetTop;
eParElement = eParElement.offsetParent;
}
return nTopPos;
}

function moveOver(el_id, dest_el_id, x_offset, y_offset) {
var el = document.getElementById(el_id);
var dest_el = document.getElementById(dest_el_id);
x_offset = x_offset ? x_offset : 0;
y_offset = y_offset ? y_offset : 0;
var dest_el_left = DL_GetElementLeft(dest_el);
var dest_el_top = DL_GetElementTop(dest_el);
el.style.left = String((dest_el_left + x_offset) + 'px');
el.style.top = String((dest_el_top + y_offset) + 'px');
}

var x = y = 0;

</script>
</head>
<body>
<img id="newthread" border"0" src="http://www.codingforums.com/images/newthread.gif">
<img id="buddy" border"0" src="http://www.codingforums.com/images/buddy.gif">

<form name="f">x-offset:<select
onchange="x=parseInt(options[selectedIndex].text);moveOver('buddy','newthread',x,y)">
<option>0</option><option>25</option><option>55</option><option>88</option>
<option>400</option><option>-100</option>
</select>&amp;nbsp;
y-offset:<select
onchange="y=parseInt(options[selectedIndex].text);moveOver('buddy','newthread',x,y)">
<option>0</option><option>2</option><option>4</option><option>12</option>
<option>48</option><option>-100</option>
</select>
</form>

</body>
</html>


Not sure if that helps...
HardMario
10-14-2002, 12:39 AM
Thanks, I think that can help me do what I want.