Grid navigation

[SjrH]

What is the best way to accomplish navigation using an image that is divided up using a grid?

Say I had an office floorplan divided up in to 10 x 10 squares. I need each square to open a new window with info relative to that area. Also, I need each square to highlight on mouseover, and the mouse pointer should not change from the normal arrow pointer as it usually does when hovering on a link.

I've had some suggestions for using an image map, and some for using tables over a background image. What would be the benefit of these ideas? Is there a best practice for achieving this task?!

TIA

 

[Vragabond]

If they really are all square images, you could simply group them together by floating them next to each other. You could do the highlights easily if you would just do the background images rather then real images. However, I suppose that is even more confusing. You could be ingenious and use transparent pictures and change the background on hover. That would work.

Don't worry about the pointer, it can easily be changed via css. I would not recommend it though, since people do not know they can click if they have no pointer cursor.

This is a good alternative to image maps that could offer all the functionality you want:

http://www.alistapart.com/articles/imagemap/

I would personally look into simple floats at first, though it is hard to say since we cannot see your floorplan.

 

[BillyRayPreachersSon]

It depends - what do you mean by "highlight"? How would the square highlight? A border change? Background colour change? Image change? Some other change?

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[SjrH]

Sorry, I should've been more specific. The floorplan image is just one image, not individual images, the aim is to divide it into 10 x 10 sections.
Its not too large (302k) but IE resizes it as it scrolls off the bottom of the page, can that be stopped without reconfiguring IE?

The background change is simply from the white to maybe a pale yellow indication the square that is hovered over.

Really, I guess what i'm trying to achieve is laying a grid on top of an image whereby a new window is opened when you click on a square that is highlighted when hovered over!

Apologies for not describing this very well!

 

[ChrisHunt]

Here's one way of doing it, I don't know whether it's exactly "best practice", but I think it would work.

Let's say your office plan image is black-on-white and 500px square. Convert it into a transparent GIF, with white as the transparent colour, and slice it into 100 50px square images.

Now mark your page up like this:

<div id="plan">
<a href="page1.htm" target="_blank"><img src="plan0101.gif" alt="" /></a>
<a href="page2.htm" target="_blank"><img src="plan0102.gif" alt="" /></a>
...
<a href="page100.htm" target="_blank"><img src="plan1010.gif" alt="" /></a>
</div>

With some CSS like

div#plan {
   height: 500px;
   width: 500px;
   padding:0;
}

div#plan a {
   float: left;
   text-decoration: none;
   background: #FFF;
}

div#plan a:hover {
   background: #FFC;
}

div#plan img {
   height: 50px;
   width: 50px;
   border: 0;
}

Having said all that, I think the A list Apart solution posted by Vragabond is a much slicker solution.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd