Re: Creating a grid overlay over an image in CSS
- From: kaczmar2@xxxxxxxxxxx
- Date: 7 Aug 2006 10:30:49 -0700
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 <head> and
</head> tags 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;top: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 <body> and </body> tags, 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 <head> section, I've specified 'grid.gif', this is
a transparent gif image which is repeated to give the appearance of a
grid. In the <body> section, 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
kaczmar2@xxxxxxxxxxx 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
.
- References:
- Creating a grid overlay over an image in CSS
- From: kaczmar2
- Re: Creating a grid overlay over an image in CSS
- From: Den Odell
- Creating a grid overlay over an image in CSS
- Prev by Date: Re: Why eliminate <br>?
- Next by Date: Re: Why eliminate <br>?
- Previous by thread: Re: Creating a grid overlay over an image in CSS
- Next by thread: Re: Creating a grid overlay over an image in CSS
- Index(es):
Relevant Pages
|
