putting a ruler on a snapshot

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View


I have created an html code which includes some snapshots. These
snapshots are actually some geometrical shapes with specific
dimensions. What I would like to do is to add something like a ruler
on the x-axis of the snapshot, and another one on its y-axis (same
like when you're viewing a graph). I need to create and put this ruler
on top of the image. It's not already included in the snapshot.

Can you help me?


Re: putting a ruler on a snapshot

Quoted text here. Click to load it

Make a couple of images that are transparent PNG or GIF with a ruler
and a transparent background.
Place these over the top of your image, using CSS. Look into position:
relative, dimension units (this is a good time to use pixels) and z-

Also you could add rulers to the image itself, doing this
automatically server-side with ImageMagick

Re: putting a ruler on a snapshot

In article

Quoted text here. Click to load it

You are welcome to use the background image I made for


The crucial element it is in is:

<p style="position: absolute; top: 0; left: 0; background: #fff
url(pics/ruler_vertical_500.png) repeat-y; height: 100%; width: 20px;
margin: 0;"></p>

where you can see it gets repeated down. It is an image pretty well
exactly 500px high with obvious gradations and should repeat to form a
continuous ruler.

It might pay you to read this URL and also:


to get a handle on positioning.

You might find some difficulty in getting two measuements and there are
a number of solutions. Here is one:


No matter what pic you out instead of the candle, the rulers will
measure it. Think of the pair of divs as a unit, one to hold the
vertical background ruler and the other the horiz.


Re: putting a ruler on a snapshot

Quoted text here. Click to load it

Actually, sorry about the stuff before this. It probably is not
needed... I grabbed the url for my ruler and then started thinking about
your requirements more as I typed!


Site Timeline