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>
Related
Images work on normal page but the amp-version the images doesn't show.
here is a HTML code of a picture, I use WordPress and upload via media library and insert:
<img class="aligncenter wp-image-312" src="http://mysiteexample.com/wp-content/uploads/2016/11/review-1024x768.jpg" alt="Stanley Review" width="256" height="192" />
"
Is there a script I need to insert or something for it to work on amp?
Thanks for your time, I appreciate it.
Use amp-img instead of img for the amp version of your site.
<a href="#">
<amp-img src="http://mysiteexample.com/wp-content/uploads/2016/11/review-1024x768.jpg" width="256" height="192" layout="responsive" alt="Stanley Review"></amp-img>
</a>
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.
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 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.)