Help Align my fuzzy images

February 1, 2008 4:54 AM

How do I get my images where I want? I'm trying to overlay images on a background. Is there a fancy tool I could use that will tell me the exact coordinates? Should I not try tables and do some fancy css? Or am I going at this ass backwards? Here's what I'm talking about. It's a self link, but nothing really to see but my issue. View the source to see my attempt.
posted by bleucube to computers & internet (11 comments total)

What... uh... are you trying to do? I see a big, blocky cube and some animated gifs on top of it.

You can do
<div position="absolute" left="X" top="Y">
to place items exactly where you want on a page.
posted by unixrat at 5:08 AM on February 1, 2008

What I meant was, "what are you trying to make?"

I worked on a project recently where we create a large (large) gif and used imagemaps to slice it to how the client wanted it, down to the pixel.

There are many image map programs out there that will let you work graphically and will output the HTML for you - try those.
posted by unixrat at 5:32 AM on February 1, 2008

You should definitely consider css, lookup absolute positioning - you can specify an element's exact location.

You might also want to look at CSS Play, in particular his border art.
posted by missmagenta at 5:40 AM on February 1, 2008

@Unixrat: Basically I have the cube, the fuzzy image are suppose to make up the interior of the cube. On mouse over the image will change to link names. Like you onmouse over the first image and it will change to ABOUT, do the second one and it will change to BLOG....etc. Probably I have it just getting the rectangles to fill up the interior correctly.

An Imagemap would work, but never seen one that performed mouseover or work with animated gifs. I'll do some more searching.

For DIV position, do you know of a tool that will provide the cordinates?

Thanks!
posted by bleucube at 5:50 AM on February 1, 2008

I've use ImageReady to slice up images, and I'm 99% sure it can do mouseovers (as in, it'll output the HTML). How about using ImageReady to slice up a version of your image, and then replacing the parts you want to be GIFs with GIFs that are the same size as the slice? It's not too hard to figure out which slices are the relevant ones and which code to change. So you can look at the code, see that, say, slices 5, 6, and 7 are the ones you want animated, note their height and width, make your animated GIFs that size, and adjust the code accordingly.
posted by korres at 6:12 AM on February 1, 2008

Demo (I only did the first 3)

I used measure-it in firefox to get the co-ordinates but you should be able to do the same in any image program.
posted by missmagenta at 6:24 AM on February 1, 2008

Got it done offline. Used:



Thanks for the help!

PS... Is there a browser tool that you can use that will display pixel position in the browser? I had to guess at first and play around with the figures.

Thanks everyone!
posted by bleucube at 6:26 AM on February 1, 2008

I used the div style="position:absolute; left:286px; top:160px;"
posted by bleucube at 6:27 AM on February 1, 2008

Just fwiw unixrat's code wont work as written... it should be <div style = "position:absolute;left=Xpx;top=Ypx">
posted by missmagenta at 6:28 AM on February 1, 2008

Just FYI, mousing over does not reveal the link text at this time in Opera 9.something on Windows.
posted by Xoder at 6:28 AM on February 1, 2008

Thanks Xoder - will keep that in mine!
posted by bleucube at 7:24 AM on February 1, 2008