Is there a way to correct this CSS image map?

Posted on 2011-05-03
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:

Any help is appreciated.
Question by:philipseo
    LVL 12

    Expert Comment

    look at what they did at for their branch locator - 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="" 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="'-18px 0'" onmouseup="'0 0'"><a href="javascript: void(0);" onclick="footprintMapAction('', 'o');"><img src="" 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
    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

    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

    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 ( Appreciate the help!

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Suggested Solutions

    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    729 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

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now