By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,678 Members | 1,146 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,678 IT Pros & Developers. It's quick & easy.

Image on Image help

P: n/a
I'm a newbiwe trying to position one small image on top
of a larger one. Based on various examples, I'm trying the
solution below. Only problem is that it doesn't work :-(
Both x and y in the example below always seem to be 0.

Any pointers would be appreciated.

Jim Buzbee
<html>
<body>

<br/>
<br/>
<br/>

<img src="relief.jpg" width="640" height="320" id="base"/>
<img src="overlay.gif" width="10 height="10" id="overlay"/>

<script>
document.getElementById('overlay').style.position= "absolute";

y = document.getElementById('base').style.top;
x = document.getElementById('base').style.left;
document.getElementById('overlay').style.top = y + 160;

document.getElementById('overlay').style.left = x + 320;
</script>

</body>
</html>

--
--------------------------------------------------------------------------------
Jim Buzbee "I was gratified to be able to
jb*****@nyx.net answer promptly, and I did. I
http://batbox.org said I didn't know." Mark Twain
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Jim Buzbee wrote:
I'm a newbiwe trying to position one small image on top
of a larger one. Based on various examples, I'm trying the
solution below. Only problem is that it doesn't work :-(
Both x and y in the example below always seem to be 0.
Because you have not defined them.

<img src="relief.jpg" width="640" height="320" id="base"/>
<img src="overlay.gif" width="10 height="10" id="overlay"/>

<script>
document.getElementById('overlay').style.position= "absolute";

y = document.getElementById('base').style.top;
x = document.getElementById('base').style.left;
document.getElementById('overlay').style.top = y + 160;

document.getElementById('overlay').style.left = x + 320;
</script>

</body>
</html>


<style type="text/css">
..base{position: absolute;top: 0px;left: 0px;}
..overlay{position: absolute;top: 160px;left: 320px;}
</style>
<div>
<img src="relief.jpg" width="640" height="320" id="base"/>
<img src="overlay.gif" width="10 height="10" id="overlay"/>
</div>

Is a start.

no javascript needed.
--
Randy

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.