Jump to content

Compound Images


niche
 Share

Recommended Posts

For example, I have a file called yellow_rectangle.jpg and a file called logo.jpg. What's the most flexible way to write the script that will display logo.jpg inside yellow_rectangle.jpg?If I can move yellow_rectangle.jpg around my screen using pixel coordinates, how would I write that script? If not, what's most flexible way to move it around my screen?Thank you

Link to comment
Share on other sites

To locate something, use element.offsetLeft, element.offsetTop, element.offsetWidth, and element.offsetHeight. To position something, use element.style.top, etc.To move (that is, to have a position out of the normal flow) an element needs CSS position:absoluteIncrement/decrement coordinates 1 px at a time at a sensible interval. Compare the logo boundaries with the container boundaries so you know when to stop and go back.To keep something animated, use setInterval or setTimeout to call the animating function.

Link to comment
Share on other sites

DD is correctBased on your question I'm guessing you want to know the easiest way to do this. My suggestion is to:1. Familiarize yourself with CSS, specifically position absolute. This will allow you to statically place the images. You may also wish to learn about the z-index property which will ensure the images are stacked in the correct order.2. Learn how to modify the CSS properties using Javascript.3. Learn timing/animation functions in Javascript which you then use to control the position. If I were doing this I would avoid trying to read the CSS property that controls the image location. I've never had difficulty writing to a CSS property from javascript but reading them can be very difficult because every browser seems to use different syntax. This recently gave me some issues with Chrome.W3 schools has great tutorials and I think I've used tutorials for #1 and #3 myself. floater

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...