asked on

Is there a way to correct this CSS image map?

I am creating a CSS-based image map of the United States using image sprites and I can't seem to target one area due to it's odd position. If you mouse-over "Nevada", you'll notice you can't highlight it unless you hover over around Arizona. I've left the boarders visible to help you see how I have it set up. If you have any other methods other than what I'm using, I am open to ideas, but no Flash please.

You can view it here: http://hgfdirect.com/lp/test-map/

Any help is appreciated.

mwochnick

look at what they did at bofa.com for their branch locator
http://locators.bankofamerica.com/locator/locator/LocatorAction.do - once it loads you can view the source - they have the abiltiy to define the map and hover per state

you can use this technique to define any shape you want for the map arear
I copied the beginning of the relevant code here so you can find it - the map area included is for alaska,

<div id="footprint">
	<div id="footprint-map">
		<div id="footprint-map-cover">&nbsp;</div>

		<img src="https://shared.via.infonow.net/images/transparent.gif" id="footprint_imagemap" width="450" height="280" alt="United States Map" usemap="#footprint_Map" />

		<div id="footprint-balloon">
			<div id="footprint-balloonTop">

				<div id="footprint-balloon-corner-NW"></div>
				<div id="footprint-balloon-corner-NE"></div>
			</div>
			<div id="footprint-balloonMiddle">
				<div id="footprint-balloon-side-W"></div>
				<div id="footprint-balloon-side-E"></div>
				<div id="footprint-balloonHead">
					<div id="footprint-balloonClose" title="Close this balloon" onclick="footprintMapAction('', 'o');" onmousedown="this.style.backgroundPosition='-18px 0'" onmouseup="this.style.backgroundPosition='0 0'"><a href="javascript: void(0);" onclick="footprintMapAction('', 'o');"><img src="https://shared.via.infonow.net/images/transparent.gif" id="closeX" width="18" height="18" alt="Close this balloon" /></a></div>
				</div>

				<div id="footprint-balloonPanels">
					<div id="stateName"></div>
					<div id="countBranches"></div>
					<div id="countATMs"></div>
					<div id="browseLocations" style="display:none;"><a rel="nofollow" href="javascript: void(0);" id="balloonBrowse">Browse locations &raquo;</a></div>
				</div>
			</div>
			<div id="footprint-balloon-beak"></div>

			<div id="footprint-balloonBase">
				<div id="footprint-balloon-corner-SW"></div>
				<div id="footprint-balloon-corner-SE"></div>
			</div>
			<!--[if lte IE 6.5]><iframe></iframe><![endif]-->
		</div>
	</div>

	<div id="imageCache"></div>

</div>

<map name="footprint_Map">
	<area href="#" id="AK" alt="AK" title="AK" onmouseover="return footprintMapAction('ak', 'o');" onfocus="return footprintMapAction('ak', 'o');" onclick="return footprintMapAction('ak', 'd');" shape="poly" coords="99,254, 97,253, 95,253, 92,251, 89,248, 83,242, 81,243, 80,245, 78,247, 73,244, 73,242, 68,244, 67,236, 63,220, 60,208, 58,203, 54,201, 52,202, 44,201, 42,201, 39,201, 39,200, 33,198, 32,200, 28,200, 25,202, 23,204, 22,207, 20,208, 17,208, 16,211, 18,213, 20,217, 23,217, 23,222, 20,222, 20,219, 19,219, 11,222, 14,224, 14,227, 17,229, 21,230, 24,227, 25,233, 22,233, 21,235, 20,236, 17,234, 16,237, 12,241, 14,245, 14,246, 17,249, 20,249, 22,252, 21,253, 22,255, 25,254, 28,257, 33,254, 31,258, 31,261, 25,265, 23,268, 20,268, 17,271, 13,272, 12,273, 11,274, 10,273, 10,274, 9,274, 8,275, 6,275, 5,275, 5,276, 4,276, 4,277, 4,278, 4,277, 5,277, 6,277, 6,276, 7,276, 8,275, 9,275, 10,275, 10,274, 11,274, 12,274, 13,274, 20,271, 25,269, 34,263, 41,255, 42,254, 39,254, 46,244, 48,243, 48,245, 46,246, 45,251, 46,250, 45,252, 46,252, 50,249, 52,248, 53,246, 52,245, 57,244, 62,247, 67,245, 69,246, 72,246, 77,249, 80,250, 82,252, 84,254, 89,258, 90,259, 96,262, 101,260, 101,257, 99,254" />

Open in new window

Tom Beck

Can you break up the image map into smaller rectangles and just have multiple rectangles trigger the same hover effect for a particular area.
states.jpg

ASKER CERTIFIED SOLUTION

mwochnick

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

philipseo

ASKER

Thanks! I actually used a hybrid of just manually making polygon hotspots (was trying to avoid that) and a jquery function that highlights everything specified in an image-map (http://davidlynch.org/js/maphilight/docs/). Appreciate the help!