Creating a grid overlay over an image in CSS

[kaczmar2]

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

[Den Odell]

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

[Den Odell]

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

[kaczmar2]

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