468,315 Members | 1,442 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,315 developers. It's quick & easy.

Creating a grid overlay over an image in CSS

Hey there,

I have a large image in a browser window, and I would like a way to
overlay grid lines on top of the image, so a user can show the grid or
hide the grid lines. The grid would cover 100% of the image, and all I

would need is a set of horizontal and vertical lines over the image to
create a grid overlay.

Two requirements would be to:

1) show/hide the grid
2) change the spacing between the grid lines
Is there a way I can leverage some functionality in CSS to do
this? I can't use any server side 3rd party components, and I would
rather not do this using something on the server side like GDI+ through

ASP.NET.
Thanks,
Christian

Aug 3 '06 #1
3 6933
Hi Christian,

I think we can get what you want. For starters, between the <headand
</headtags of your HTML page, add this:
<style type="text/css">
..gridbox{position:relative;float:left;width:auto; }
#grid{background:transparent url(grid.gif)
repeat;width:100%;height:100%;position:absolute;to p:0;left:0;display:none;}
</style>
<script type="text/ecmascript">
function showHideGrid() {
var grid = document.getElementById('grid');
if (grid) {
if (grid.style.display == 'block') {
grid.style.display = 'none';
} else {
grid.style.display = 'block';
}
}
return false;
}
</script>
and then between the <bodyand </bodytags, something like this:
<a href="#" onclick="return showHideGrid()">Show / hide grid</a>
<div class="gridbox"><img src="test.jpg" /><div id="grid"></div></div>
I put an example up for you to see:
http://homepage.mac.com/denodell/examples/grid/grid.htm

You'll notice in the <headsection, I've specified 'grid.gif', this is
a transparent gif image which is repeated to give the appearance of a
grid. In the <bodysection, you should replace 'test.jpg' with your
own image.

If you explain in more detail how you'd like the grid spacing part of
it to work, I'll see if we can't help out with that bit too..

Good luck
Den
ka******@hotmail.com wrote:
Hey there,

I have a large image in a browser window, and I would like a way to
overlay grid lines on top of the image, so a user can show the grid or
hide the grid lines. The grid would cover 100% of the image, and all I

would need is a set of horizontal and vertical lines over the image to
create a grid overlay.

Two requirements would be to:

1) show/hide the grid
2) change the spacing between the grid lines
Is there a way I can leverage some functionality in CSS to do
this? I can't use any server side 3rd party components, and I would
rather not do this using something on the server side like GDI+ through

ASP.NET.
Thanks,
Christian
Aug 7 '06 #2
I should mention, I've only tested my solution on Safari/Mac, but it
should be fine elsewhere.

ka******@hotmail.com wrote:
Hey there,

I have a large image in a browser window, and I would like a way to
overlay grid lines on top of the image, so a user can show the grid or
hide the grid lines. The grid would cover 100% of the image, and all I

would need is a set of horizontal and vertical lines over the image to
create a grid overlay.

Two requirements would be to:

1) show/hide the grid
2) change the spacing between the grid lines
Is there a way I can leverage some functionality in CSS to do
this? I can't use any server side 3rd party components, and I would
rather not do this using something on the server side like GDI+ through

ASP.NET.
Thanks,
Christian
Aug 7 '06 #3
Den-

Thank you very much for your help in this. I should note a couple of
things:

1) The user will probably get an option to spcify the size of the grid
in pixels. ie, if they choose 20px, the length of each side of a grid
square would be 20 pixels.

I'm still working out some possible design problems. For example, we
have sizable regions on a page with icons that the user can position
withing the region. If I set the z-index of the grid to show over
these regions so the user can see the grid and thus align the icons, we
will lose our onclick() events, which we need.

Thanks again for your help and I hope this gives you more information.

Christian

Den Odell wrote:
Hi Christian,

I think we can get what you want. For starters, between the <headand
</headtags of your HTML page, add this:
<style type="text/css">
.gridbox{position:relative;float:left;width:auto;}
#grid{background:transparent url(grid.gif)
repeat;width:100%;height:100%;position:absolute;to p:0;left:0;display:none;}
</style>
<script type="text/ecmascript">
function showHideGrid() {
var grid = document.getElementById('grid');
if (grid) {
if (grid.style.display == 'block') {
grid.style.display = 'none';
} else {
grid.style.display = 'block';
}
}
return false;
}
</script>
and then between the <bodyand </bodytags, something like this:
<a href="#" onclick="return showHideGrid()">Show / hide grid</a>
<div class="gridbox"><img src="test.jpg" /><div id="grid"></div></div>
I put an example up for you to see:
http://homepage.mac.com/denodell/examples/grid/grid.htm

You'll notice in the <headsection, I've specified 'grid.gif', this is
a transparent gif image which is repeated to give the appearance of a
grid. In the <bodysection, you should replace 'test.jpg' with your
own image.

If you explain in more detail how you'd like the grid spacing part of
it to work, I'll see if we can't help out with that bit too..

Good luck
Den
ka******@hotmail.com wrote:
Hey there,

I have a large image in a browser window, and I would like a way to
overlay grid lines on top of the image, so a user can show the grid or
hide the grid lines. The grid would cover 100% of the image, and all I

would need is a set of horizontal and vertical lines over the image to
create a grid overlay.

Two requirements would be to:

1) show/hide the grid
2) change the spacing between the grid lines
Is there a way I can leverage some functionality in CSS to do
this? I can't use any server side 3rd party components, and I would
rather not do this using something on the server side like GDI+ through

ASP.NET.
Thanks,
Christian
Aug 7 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Andy | last post: by
1 post views Thread by sendhil | last post: by
5 posts views Thread by Brian Lowe | last post: by
2 posts views Thread by Carl Gilbert | last post: by
10 posts views Thread by kaczmar2 | last post: by
1 post views Thread by Frijoles | last post: by
reply views Thread by ameshkin | last post: by
9 posts views Thread by Chuck Anderson | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.