I am trying to replicate the below html page using JSF. But can't find the correct JSF tag to do so.
HTML content (Required HTML):
<body>
<div class="image">
<img src="image.jpg" alt="Image" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="circle" id="circle" coords="135,596,34" href="http://www.google.co.in" alt="Circle" />
<area shape="rect" id="square" coords="192,567,249,628" href="http://www.youtube.com" alt="Square" />
</map>
</div>
</body>
JSF Page (JSF to be modified to get above HTML):
<body>
<f:view>
<h:outputText value="This is a JSF page"></h:outputText>
<br/>
<h:form>
<h:graphicImage id="image" value="image.jpg" usemap="true">
<h:commandLink action="#{managedBean.method}" id="links1" value="map1" coords="135,596,34" shape="circle"></h:commandLink>
<h:commandLink action="#{managedBean.method}" id="links2" value="map2" coords="192,567,249,628" shape="rec"></h:commandLink>
</h:graphicImage>
</h:form>
</f:view>
</body>
Please suggest the correct JSF format to replicate the above HTML page using the JSF page and it calls a method of ManagedBean when clicked on the link.
Related
I'm not a programmer/developer. I tried to put this code on the sidebar of my WordPress website, with the HTML widget. It is working on a page (with the HTML block), but not on the sidebar. I tried with two different themes. Anyone has any idea on how to make it work/a possible alternative?
<img src="wp-content/uploads/2022/05/Site2.png" usemap="#image-map" alt="test">
<map name="image-map" id="test-imgmap">
<area target="_blank" alt="test" title="" href="example1" coords="500,398,73,481" shape="rect">
<area target="_blank" alt="test" title="" href="example2" coords="71,493,493,563" shape="rect">
<area target="_blank" alt="test" title="" href="example3" coords="71,570,495,641" shape="rect">
</map>
I have a homescreen image that I need to have different sites linked to, but am still not able to make my area map work. I've tried reordering the and and double checking spelling. I have also double checked the coordinates. Thoughts?
<p><map name="epacbanner">
<area shape="rect" coords="0,336,156,489" href="https://www.google.com"
alt="contact" />
</map> <img src="/content/epac%20banner_final.png" alt="epac banner"
title="epac banner" width="960" height="322" img="" usemap="#epacbanner" />
</p>
The problem is not with your HTML but the coordinate values, as you have specified a rect the first two coordinates are the x,y position of the top left corner of the shape. You have specified 336 for the y value when your image is in fact only 322 pixels tall (height) Changing that value to 0 places a rectangle at the top left of the sample image as shown in the second example below.
<p>
<img src="http://lorempixel.com/960/322" alt="epac banner"
title="epac banner" width="960" height="322" usemap="#epacbanner" />
<map name="epacbanner">
<area shape="rect" coords="0,336,156,489" href="https://www.google.com"
alt="contact" />
</map>
</p>
<p>
<img src="http://lorempixel.com/960/322" alt="epac banner"
title="epac banner" width="960" height="322" usemap="#epacbanner" />
<map name="epacbanner">
<area shape="rect" coords="0,0,156,489" href="https://www.google.com"
alt="contact" />
</map>
</p>
Website in question (Purple tile at bottom right, green boxes are the targets.
I have the following html using area tags to select the first green box however I can't click it as a link. I am using bootstrap if it makes any difference.
<div class="col-md-4">
<img src="octa.png" usemap="#pmc">
<map name="pmc">
<area shape="rect" coords="978,482,1038,512" alt="pmc" href="www.google.com">
</map>
</div>
Any help is appreciated!
You can include multiple areas in your imagemap.
<img src="octa.png" usemap="#map" />
<map name="map">
<area shape="rect" coords="51,47,112,77" href="..." title="PMC Post" />
<area shape="rect" coords="188,47,249,77" href="..." title="Direct Download" />
</map>
you can use relative and absolute css properties
<div style="position:relative;">
<img src="src/of/img.png" />
</div>
css side
.links {
display:block;
position:absolute;
}
I am trying to make an image map in html, but for some reason it just will not work.
My code:
<img id="Image map" src="Koala.jpg" border="0" usemap="#koala" alt="" />
<map id="koala">
<area shape="rect" coords="438,370,552,583" href="http://www.google.com/" alt="Koala nose">
</map>
</ol>
Yes, it is inside an ordered list, not sure if that would contribute to anything.
The image I am referencing (Koala.jpg) is here: http://i.imgur.com/bZHlxCg.jpg
When I run the html file everything is there, except the koala is just not clickable at all.
Add name="koala" in addition to the id for Chrome and Safari to work too - http://jsfiddle.net/L4kUm/
<img id="Image map" src="http://i.imgur.com/bZHlxCg.jpg" border="0" usemap="#koala" alt="" />
<map id="koala" name="koala">
<area shape="rect" coords="438,370,552,583" href="http://www.google.com/" alt="Koala nose">
</map>
I have encountered a weird "bug" with html image maps. It looks like the browser is re-parsing the DOM in a way that I don't expect, when image maps are part of a <p> tag, whereas they work fine when part of a <div> tag.
Here's an example along with some comments. (I don't know how to quickly host an html page so here's the HTML source.
Can anyone explain what's going on?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM bug?</title>
<style type="text/css">code { font-family: monospace; } </style>
</head>
<body>
<h1>DOM bug?</h1>
<p>There seems to be a bug (or a poorly-documented behavior) in how browsers handle map areas with other HTML elements in the map.
The first image below works properly: there are four overlapping map areas covering all but the center square. The second image
below has a <code>map</code> element that seems to reject all child elements following the first non-<code>area</code> child element, so only the left and right
columns are covered by the image map areas.
The only difference is that the first map is enclosed by a <code>div</code> element and the second map is enclosed by a <code>p</code> element.</p>
<p>I've observed this on Firefox 8.0, Opera 11.61, Chrome 16.0.912.77; whereas Safari 5.0 and IE 7.0 renders both image maps "correctly".</p>
<span>
<div>
<!-- convert -size 45x45 pattern:checkerboard -filter box -resize 300x300 -auto-level +level-colors yellow,black ck1.png -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQMAAABDsxw2AAAABlBMVEX//wD/pQDmL6nOAAAACXBIWXMAAABPAAAATwFjiv3XAAAATUlEQVR42u3YMQEAMAgDwTiof5d10K4sYID7NacgSem8UtowDMMwDMMwDMMwbBWry+0HDMMwDMMwDMMwDFvLnAkYhmEYhmEYhmEYNrIPTJJ1lg/rCykAAAAASUVORK5CYII="
width="300" height="300" class="map" usemap="#simple1" />
<map name="simple1">
<area id="area-left" href="#" shape="rect" coords="0,0,100,300" alt="Link" title="left rectangle" />
<area id="area-right" href="#" shape="rect" coords="200,0,300,300" alt="Link" title="right rectangle" />
<div>
</div>
<area id="area-top" href="#" shape="rect" coords="0,0,300,100" alt="Link" title="top rectangle" />
<area id="area-bottom" href="#" shape="rect" coords="0,200,300,300" alt="Link" title="bottom rectangle" />
</map>
</div>
<p>
<!-- convert -size 45x45 pattern:checkerboard -filter box -resize 300x300 -auto-level +level-colors yellow,black ck1.png -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQMAAABDsxw2AAAABlBMVEX//wD/pQDmL6nOAAAACXBIWXMAAABPAAAATwFjiv3XAAAATUlEQVR42u3YMQEAMAgDwTiof5d10K4sYID7NacgSem8UtowDMMwDMMwDMMwbBWry+0HDMMwDMMwDMMwDFvLnAkYhmEYhmEYhmEYNrIPTJJ1lg/rCykAAAAASUVORK5CYII="
width="300" height="300" class="map" usemap="#simple2" />
<map name="simple2">
<area id="area2-left" href="#" shape="rect" coords="0,0,100,300" alt="Link" title="left rectangle" />
<area id="area2-right" href="#" shape="rect" coords="200,0,300,300" alt="Link" title="right rectangle" />
<div>
</div>
<area id="area2-top" href="#" shape="rect" coords="0,0,300,100" alt="Link" title="top rectangle" />
<area id="area2-bottom" href="#" shape="rect" coords="0,200,300,300" alt="Link" title="bottom rectangle" />
</map>
</p>
</span>
</body>
</html>