I need to create a map on a website that has some clickable site locations.
Ideally I want to be able to create my own basic map of the UK and then overlay some smaller ‘point’ images to represent a company’s office locations. On rollover, I’d want the location name to appear, on click I’d want to navigate to a webpage for that location.
What’s the best way to approach this?
I have no programming skills really - just CSS & HTML. I was thinking I could do it using relative positioning and CSS, but may be a bit cumbersome.
Thanks for the reply, however, I don’t want a google map. I want to be able to use an image that I can control the look of.
The map background is the easy bit. What I’m struggling with is determining the best way to place dots/points on the map that a) reveal the placename and b) are linkable.
I would say that Flash is probably the best option for this if you want it to look nice and slick, with a static image as a backup for people who don’t have Flash.
Another option would be to use some nifty CSS. I haven’t worked this out in detail, but I’m thinking something along the lines of:
[list][]Create a <div> with the dimensions of your map, and set the map as a background image
[]Create a <ul> of links to the various pages within the <div>, and include the text you want within each link
[]Give the <li>s a dimension of whatever size you want to active the link popup, and absolutely position each of them in the relevant place.
[]Give the links an offset to position them off-screen, and then remove this on li:hover. You might also need to set overflow:visible on the links if they are going to be larger than the active area of the parent <li>
[*]Style the links as desired
[/list]
As I said, that’s a general concept, and I can’t promise that it will work perfectly!
my recommendation would be to get the actual images from wherever/however and then use just css to postion the various images and other appropriate elements wherever they need to be and use the :hover psuedo class to hide/show them as required.
if you use just html and css I suspect it will be easier to maintain/edit in the future if needed.