473,387 Members | 1,691 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Image on Image help

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
1 1383
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

21
by: DraguVaso | last post by:
Hi, I have an inherited DataGrid, that does lots of extra stuff. For exemple drawing a backgroundimage in every cell. The problem is that it's taking too much time (using gdi+), so I want to do...
15
by: Anand Ganesh | last post by:
HI All, I have an Image. I want to clip a portion of it and copy to another image. How to do this? I know the bounding rectangle to clip. Any suggestions please. Thanks for your time and...
68
by: Nak | last post by:
Hi there, This might sound like a silly question but, technically could an image object be used for any image format? For example if I were to make plugins for my application, could they be...
21
by: DraguVaso | last post by:
Hi, I have an inherited DataGrid, that does lots of extra stuff. For exemple drawing a backgroundimage in every cell. The problem is that it's taking too much time (using gdi+), so I want to do...
2
praclarush
by: praclarush | last post by:
I need to take an image that was in a Array object image and have it display in a table. this is for a item list the table has four columns one for the image, one for a description, one for a price,...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.