Is there a way to "layer" image map areas?
I have 2 areas, say circles, overlapping each other. One is twice the area of the other.
Setting z-index style attribute does NOT appear to work.
Is there perhaps another way to achieve this?
Turns out it is extremely important the order of the area tag matter:
<img src="images/some.gif" alt="" usemap="#someMap" id="someImage" />
<map id="someMap" name="someMap">
<area shape="rect" coords="x1,y1,x2,y2,20" href="locations/state_results.php?StateName=NT"
onmouseover="MM_swapImage('someImage','','images/small_Square.gif',1)" onmouseout="MM_swapImgRestore()" >
<area shape="circle" coords="10,10,40"
href="locations/state_results.php?StateName=WA"
onmouseover="MM_swapImage('someImage','','images/bigCircle.gif',1)" onmouseout="MM_swapImgRestore()" >
</map>
It is important that the smaller area comes first.
Related
I have a image of map of a country.I want to click on a state and go to next page .How can i make some small rectangles or squares or circles on each state so that when i click them it links to respective page using html or css ??
There's a feature in HTML called Image map, which you can use like this:
<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
<area shape="rect" coords="9,372,66,397" href="http://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" >
</map>
Look at this question if you want to add further style and functionality.
I have searched and can not for the life of me figure out why these images with an image map will not work in internet explorer. here is the code. its two images in wordpress in a side bar and ie wont recognize the maps for some reason.
<img src="http://patentnow.org/wp-content/uploads/2013/10/brochure.gif" href="http://patentnow.org/brochure-landing/" usemap="#planetmap"></img>
<map name="planetmap">
<area shape=default href="http://patentnow.org/brochure-landing/" target=_blank hreflang="en">
</map>
<img src="http://patentnow.org/wp-content/uploads/2013/10/ebook2.gif" href="http://patentnow.org/ebook-download/" usemap="#planet"></img>
<map name="planet">
<area shape=default href="http://patentnow.org/ebook-download/" target=_blank hreflang="en">
</map>
I am making a website for Family Guy, I have their picture as the background of the homepage. Now, I want when I click anywhere on Stewie(on the background) to activate a hyperlink and go to Stewie's webpage and same thing goes for the others, what language could I use for that?
CSS, HTML5, JQuery?
Or if the background could be like black and the family members could be pictures but still, I want to activate the hyperlink when I go over the family member and not the empty space around their heads etc.
You should use an image map. Here is an example from W3 Schools:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
http://www.w3schools.com/tags/tag_map.asp
There are also some tools out there to assist with mapping the areas. They should be easy to Google.
I'm trying to map an image using shape="poly". It works in Chrome, but doesn't work in IE or FF, and I'm not really sure why. I've tried duplicating the first coordinates at the end, and not duplicating them. Here's the code:
<map name="passport1_map" id="passport1_map">
<area shape="poly" coords="781,512,781,558,734,558,781,512" href="javascript:toggle_popup('passport2_div')"/>
</map>
<img src="../../css/challenges/sevenWonders/passportEmptyPage1.png" Usemap="passport1_map" width="800" height="567" />
Beacuse you're linking to a map in the same document, you need an anchor: usemap="#passport1_map"
(Actually I don't think browsers support external maps any more.)
I have some code from an existing CSS map, and the part below is confusing as I think it has to do with making the rollover area (california1) more defined than a simple BOX.
My question: how does one write this themselves, and why use em and not pixels?
Example code:
#california1 .s1{height:.3em;left:14em;top:12.7em;width:.2em}
#california1 .s2{height:.5em;left:13.8em;top:12.6em;width:.2em}
#california1 .s3{height:.7em;left:13.7em;top:12.5em;width:.1em}
#california1 .s4{height:.8em;left:13.6em;top:12.4em;width:.1em}
#california1 .s5{height:.9em;left:13.5em;top:12.3em;width:.1em}
#california1 .s6{height:1em;left:13.4em;top:12.2em;width:.1em}
So to answer your first question, writing this yourself would be fairly simple -- I am viewing this out of context of the HTML, but I am guessing that each of those ".s1, .s2, etc" divs are just "segments" of the map.
EMs are used verses pixels because that will scale better than pixels when resizing a window, or viewing the site on a phone browser, etc.
em is relative to the font-size property. 1em equals current element font-size.
If you are working on a static image, try increasing your browser's text-size and see that your segments will grow, not fitting in the map anymore.
You're saying you want it more defined, I hope you're using map and area HTML elements to define the clickable parts. Use area coordinates with polyshape to best define each part of California:
<map name="california">
<area shape="poly" coords="x1,y1,x2,y2,... xn,yn" href="s1.html" alt="segment 1">
<area shape="poly" coords="..." href="s2.html" alt="segment 2">
...
<area shape="poly" coords="..." href="sn.html" alt="segment n">
</map>
Then assign it to your image with usemap:
<image usemap="#california" ... />
Here you have an example.
I don't know if its too obvious, I just hope it helps.