[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Is there a way to correct this CSS image map?

Posted on 2011-05-03
Medium Priority
Last Modified: 2012-05-11
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.
Question by:philipseo
  • 2
LVL 12

Expert Comment

ID: 35515531
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 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 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 id="footprint-balloon-beak"></div>

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

	<div id="imageCache"></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

LVL 38

Expert Comment

by:Tom Beck
ID: 35515533
Can you break up the image map into smaller rectangles and just have multiple rectangles trigger the same hover effect for a particular area.
LVL 12

Accepted Solution

mwochnick earned 500 total points
ID: 35515659
BTW to get the coordinates for the polygon you will need to use and image editor and find them in order around the border of your map area
here's a short tutorial

Author Closing Comment

ID: 35516605
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!

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question