Use Map and CSS image

I am currently working new project where polygons and image are used. Using an map of colombia to later make links of each deparment (states).

My problem is I cant get the usemap/map tag to work with my current setup.


<div class="mapImages">
                
</div>

Open in new window


.mapImages{
	background: url(../_images/mapImages.gif) no-repeat;
	width: 485px;
	height: 665px;
	no-repeat -2px;
	usemap="#myMap";
}

Open in new window


That div gets an background image (an sprite actually, but cut it off to only show the map).
I have allready done the cordinates and trying now to get
<map></map> tag to work

<img name="n00000001" src="00000001.gif" width="1218" height="772" border="0" id="n00000001" usemap="#m_00000001" alt="" />
<map name="m_00000001" id="m_00000001">
<area shape="poly" coords="204,134,204,141,198,151,189,145,187,143,187,139,187,135,201,125,204,134,204,134" href="" title="Atlántico" alt="Atlántico" />
</map>

Open in new window


If I use the code above it will work, the img now loads from the div and, THAT makes this code above fail....

Trying to do something like this.

                        <div class="mapImages">
<map name="mapImages" id="mapImages">
<area shape="poly" coords="204,134,204,141,198,151,189,145,187,143,187,139,187,135,201,125,204,134,204,134" href="" title="Atlántico" alt="Atlántico" />
</map>
               
                           </div>


Hope, it was easy to understand the problem?
LVL 1
chugarahAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

remorinaCommented:
Hi chugarah,
First of all, your CSS is invalid, as there is no such no-repeat or usemap properties, no-repeat is used within the background as already defined in your 1st line, or as background-repeat: no-repeat;

From what I understand you need to specify the image as a background then be able to assign an image map for it.

Background images can not have image maps however, this being said, there is a work around that you can do, set the image as a background for the div normally, then use a single transparent pixel as an img and give it the same dimensions as in the div then assign the image map to it, this would allow the transparent image to show the div's background and in the same time have the image map assigned.

I'm afraid this would be the only applicable solution for using an image map that acts as if it's assigned to a background image.

Below is a simple example using this technique, you should be able to click on Venezuela although the map itself is the Div's background.

Hope this helps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Letter K</title>
    <style type="text/css">
        .mapImages{
	        background: url(http://www.mapsofworld.com/colombia/maps/Colombia-Political.jpg) no-repeat;
	        width: 600px;
	        height: 708px;
        }
    </style>
</head>
<body>
    <div class="mapImages">
        <img name="n00000001" src="http://www.corolle.com/images/pixel_transparent.gif" width="600" height="708" border="0" id="n00000001" usemap="#m_00000001" alt="" />
        <map name="m_00000001" id="m_00000001">
          <area shape="poly" coords="594,173,594,474,342,230,289,141,324,70,364,76,411,37,467,60,569,90,599,111" href="" title="Atlántico" alt="Atlántico" />
        </map>
    </div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
chugarahAuthor Commented:
Hi remorina: and thanks alot for the fast answerl. I have looked at your answer and corrected the code after it. I want to say, it works greate, thanks alot :)

If you have time, do you rember where you found that fix? Just curiers, anyway it works like a charm
0
remorinaCommented:
Hi chugarah,
Thanks for the point and encouraging words.

Well, I didn't find this fix somewhere, it's just the way I would think of to achieve what you wanted to, so I just improvised  :)

Also the transparent pixel concept has helped me many times with similar requirements, especially when dealing with CSS sprites.

Cheers!

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.