Hi, i'm looking for a map whereby the user can click on there location and be directed to a page of my choice. I've found something close to my solution here: http://staff.washington.edu/larryg/Classes/R561/zz-click-man.html but i'm looking for something like this, with some hover over effects, maybe the location name appearing on hover over an area, and the area changing colour on hover namley. Any ideas? Many Thanks in advance also!! EDIT: I think i may have found a solution here: http://www.cssplay.co.uk/menu/mantis.html i'm going to have a play around with it see if i can get it to work with a map!!
I didn't look at Stu's CSS but it's usually more complicated than need be (but if it works for you, goferit). I have made many maps. I try to put the clickie parts in an unordered list because that's usually the most semantic thing. Those without CSS will see a nice list of links they can clickie on. http://stommepoes.nl/Menus/maphover.html There are also two or three maps on these forums, not too old, where someone has done the same thing for a map of Portugal and another did a map of US power centers (that was eskwire's). You can find those threads and check out their code as well. The difference you'll notice with using lists as opposed to MAP tags is that you can quite precisely set the boundries of the clickie area with the MAP. The lists' a's will always be a big square-- but usually this will not be a problem.
Hey thanks for the link, yes i think it's similar to the Stu's CSS one as that also uses lists and negative margins rather than the MAP tag. I think ill have a go using lists just a matter of creating the images and sorting out the margins i guess!
I'm not sure what he was doing with the negative margins. I set postition: relative on the ul (which holds the map), set nothing on the li's, and make the a's display: block, set the height and width needed, and set them in place with absolute positioning. But use whatever works. Try different ways/
I'm not sure i think the negative margins are there to shove the hover pics off the page when they are not being hovered over as such. Yeah i've got it working OK, only one problem i might have to reshape London !! Because maps have jagged edges, and div's are square. The problem is that London is at kind of a diagonal slant and crosses the path of the next div. I wonder if there is a way around this rather than altering the image? You can see the image here which probably explains the problem better: You see the right part of London appears next to the part above it. And as Div's have to be Square it causes a problem. Maybe using two squares for London and if either one is hovered over it activates the same image? I'm not sure how to go about it.
Two squares is one idea (one I would use if more precision is needed). But if you look at my map (using Firefox, click on one of the continents-- the focus dots will show you where the box is), you'll see that there's quite a bit of overlap. Depending on the shape, and how large/detailed the map is, most people click around the center on not on a little edge. Having the image change, or the span with a name showing up on hover helps tell people what they're about to click on if they're near the border. The only problem with using two or more a's going to the same address is if you're having the image change like I or Stu did. The one a will not effect the other, unless you use some fancy CSS combinators (which will work for everyone but IE6... and I'm afraid too many people in the UK use IE6 still). It's a trick to refer to the parent's other children when one child is hovered... If you've really really got to be very precise (meaning, if you absolutely can't fake it) then you will indeed have to use MAP. I'm not sure how accessible MAP is, but you can set very very precise coordinates for the edges. I've seen MAPs with literally hundreds of coords. Ew. Something you'd only ever want to do once. http://stommepoes.nl/screeney7.gif what you'll need is for the red to have higher precedence. If they hover in the red area, even if it's also green, the RED address and info comes up. You'll notice that the sliver of red that covers green is small, while the green which covers red is large. I think it has to do with link order... I'm thinking the red area should be a later link, and addressed later in the CSS. If there's no change in the image (no lighting up) then you can make the red part actually smaller, so it doesn't overlap the green area so much, and clips little tiny edges-- no big deal. I have red and green so large because they need to be that big if the selected part is supposed to glow or something on hover. *edit strange, I just checked mine and they're much bigger than what they were when they were on my site. The focus is larger than the width's I've set. Still, no harm done.