How to convert a portion of image to clickable button? - javascript

this is image. In this i want to convert +sign part, - sign part as button .And the first part is a text box
how can i do that?
when + is clicked number need to be increased , - is clicked number need to be decreased .

You can try map tag for your image
<img src="myImage.gif" width="180" height="126" usemap="#mymap">
<map name="mymap">
<area shape="rect" coords="<!-- cordinates-->" href="#" onclick="increase()" >
<area shape="rect" coords="<!-- cordinates-->" href="#" onclick="decrease()" >
</map>
You can also define cursor styles for you image portions.
Reference: http://www.w3schools.com/TAGS/tag_area.asp

Related

Can I create a semicircle shape in html image area map?

I need to make a semicircle shape on an image using the Html image map tag.
This is the code but it makes a circle.
<img src="floorplan1.png" usemap="#image-map">
<map name="image-map">
<area target="" alt="" title="" href="" coords="494,686,91" shape="circle">
</map>
Is it possible to do this?
If yes, then please tell the way to do it.
You can use shape=poly and define each coord. Look at the example below. You can also use https://www.image-map.net/ to generate it online on your image.
In below example try clicking on the plant.
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR4C5coWnjUpQ619SpeV_MwkBj57xOa-0Jd-mLAHP2R2Ic9OY_G" usemap="#image-map">
<map name="image-map">
<area target="" alt="" title="" href="" coords="181,257,245,246,292,201,307,135,269,76,226,53,183,55,185,151" shape="poly">
</map>

Replace this.href with this.title

The below code works perfectly to reveal an image when a user mouses over an hotspot of an image map. The only problem? When clicked 'this.href' of course takes the user to the hotspot image itself. I'd like to reserve 'href' to send the users to the page of my choosing.
Is it possible to use "title" rather than 'href' to define the hotspot image? If so, please show details, I'm very new to javascript, thank you!
<script type="text/javascript">
function ShowPicC(sImage){document.housec.src = sImage}
</script>
<img border="0" src="main-image.png" width="640" height='640' usemap="#FPMap0">
<map name="FPMap0">
<area onmouseover='ShowPicC(this.href)' href='hotspot1.png' alt="thisalt" title="can-png-go-here.png" shape="circle" coords="400,400,20">
<area onmouseover="ShowPicC(this.href)" href="hotspot2.jpg" alt="youralt" title="can-png-go-here2.png" shape="circle" coords="420,420,20">
<area onmouseover="ShowPicC(this.href)" href="hotspot3.jpg" alt="differentalt" title="can-png-go-here3.png" shape="circle" coords="440,440,20">
<area onmouseover="ShowPicC(this.href)" href="hotspot4.jpg" alt="whateveralt" title="can-png-go-here4.png" shape="circle" coords="460,460,20">
</map>
<img name="housec" src="starter-hotspot-image.png" width="192" height="170">
Sure, although title isn't a valid property of area. Did you try it?
<area onmouseover="ShowPicC(this.title)" title="someotherimage.jpg" ...
You may be better off using a data attribute:
<area data-image="someotherimage.jpg" ...
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

Set hyperlinks to certain sections of the same picture? (HTML)

I want to have certain parts of the same picture hyperlinked to different webpages
Is there a way I can do this with javascript coordinates or any other way?
You can do it with the HTML MAP tag, for example:
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"
width="512" height="512" alt="Logo" usemap="#logomap"/>
<map name="logomap">
<area shape="rect" coords="0,0,256,512"
href="javascript:alert('left')" alt="Left">
<area shape="rect" coords="256,0,512,512"
href="javascript:alert('right')" alt="Right">
</map>
Here's fiddle to try it out. Clicking on the left side of the image will show a Javascript alert that says left, on the right side it will show right.

Jump to a specific location on an image map

I have a big image with an HTML <map>, and I want to jump to a particular region on that image. I have used the <area /> tag for marking the locations
Take a look at the code :
<img src="demo_files/k3.png" id="target" alt="Map" usemap="#powerpuffgirls" />
<map name="powerpuffgirls">
<area shape="rect" coords="624,137,671,167" href="#" id="ppg" title="The Powerpuff Girls" alt="The Powerpuff Girls" />
<area shape="rect" coords="99,2685,161,2723" href="#" name="ppg1" title="The Powerpuff Gidrls" alt="The Powerpuff sGirls" />
</map>
however, I am unable to move to any region on the image.
Edit: Any other approach for moving to an image's particular region would be great !!
Try this link
$('a.links').click(function(e){
e.preventDefault();
var coor = $(this.hash).attr('coords').split(',');
$('html,body').scrollTo(coor[0], coor[1]);
});
i have used the plugin scrollTo
the script will prevent default function of a tag and will get the coordinates attribute from the area tag with the id from the href attribute and calculate the positions and scroll to that position
Check this demo i have created...
Try to navigate the areas by id...
<div>Go to one Go to two</div>
You have to play with the area coordinates in it...
http://jsfiddle.net/D9W6C/

JQuery using the click event handler. How do I keep all the elements from not show only have one element show one at time?

In jquery using the click event handler. How do I keep all the elements from not show but only have one element show one at time to what is related when I click on it?.
My example page: http://chrism.net46.net/final-ff-IX/summoners-paintings.html
Using a image map. I have ten "hot spots", each a monster painting and 10 divs with information about each painting. When I click a hot spot I just a lightbox with info about that page segment to open.
I have used jquery plugins like jquery tools with success, but I'd like to learn how without using a plugin.
Anyway here is a video example what I mean starting at 0:15 http://www.youtube.com/watch?v=7628mBPumM4 hope this is more clear.
Here http://jsfiddle.net/muThj/1/ without the image map, though. Using it to host the code review just in case the above link site goes down due to traffic.
<img src="wall-writings.jpg" alt="Eidolon mural paintings of Curbuncle, Madeen, Ramuh, Shiva, Ark, Ifrit, Leviathan, Phoenix, Fenrir, Atomos" usemap="#eidolonpaintings">
<map name="eidolonpaintings">
<area shape="poly" coords="287,230,301,244,319,251,329,252,340,252,347,252,338,246,336,237,344,233,344,229,345,225,356,227,362,229,376,230,385,235,393,242,396,250,403,254,408,248,414,239,419,231,424,224,429,222,433,233,432,248,428,263,422,272,422,279,410,286,396,288,388,291,385,293,390,296,393,305,396,316,400,318,407,320,414,325,416,332,420,343,415,352,414,360,408,369,401,374,405,387,409,399,407,409,408,412,402,414,368,365,357,374,358,390,359,403,354,409,343,415,337,416,323,370,294,362,268,327,264,274,287,230" >
<area shape="poly" coords="628,253,617,222,624,172,630,149,647,109,667,81,681,66,694,53,720,49,756,48,768,53,775,75,825,99,924,135,981,154,1019,169,912,266,795,312,747,372,670,335,628,253" >
<area shape="poly" coords="1018,196,1029,182,1040,174,1043,167,1043,153,1045,138,1059,132,1076,137,1079,159,1082,176,1090,189,1110,249,1127,269,1132,286,1127,303,1146,380,1150,400,1136,409,1095,417,1067,418,1046,415,1029,405,1009,409,988,405,974,399,967,391,977,348,994,275,988,264,1018,196" >
<area shape="poly" coords="1173,125,1176,116,1168,110,1163,101,1168,83,1167,75,1153,73,1148,61,1159,52,1165,46,1172,41,1192,33,1202,33,1213,33,1220,37,1233,38,1248,40,1259,54,1254,65,1227,71,1227,80,1218,93,1228,105,1231,116,1230,137,1228,152,1225,175,1217,184,1209,195,1195,219,1196,235,1197,245,1190,250,1180,248,1140,204,1130,191,1173,135,1173,125" >
<area shape="poly" coords="1269,1,1302,41,1320,59,1322,73,1316,86,1310,105,1310,114,1317,125,1324,133,1325,149,1322,179,1317,196,1311,207,1303,217,1292,207,1288,221,1284,238,1279,254,1281,270,1281,290,1290,294,1306,314,1316,334,1312,349,1311,363,1313,383,1295,407,1285,418,1284,429,1272,438,1274,458,1285,459,1336,463,1369,461,1457,465,1488,463,1513,467,1482,429,1493,406,1474,366,1475,330,1474,287,1469,276,1479,254,1478,235,1472,216,1469,183,1469,166,1475,149,1477,129,1473,123,1475,118,1482,85,1504,53,1536,3,1536,-1,1269,1" >
<area shape="poly" coords="1482,301,1516,347,1510,371,1526,396,1550,409,1568,418,1583,442,1614,470,1622,481,1633,479,1673,487,1709,480,1716,448,1724,369,1728,331,1739,296,1713,265,1699,250,1681,228,1652,233,1619,235,1584,237,1528,273,1482,301" >
<area shape="poly" coords="1719,222,1747,160,1751,143,1726,149,1724,132,1717,119,1712,97,1687,86,1636,33,1643,28,1687,47,1772,41,1823,2,1843,1,1858,35,1914,50,1976,37,2082,87,2080,100,1911,119,1879,141,1829,136,1836,158,1852,180,1859,200,1849,225,1825,238,1811,266,1819,284,1837,301,1843,304,1847,325,1823,309,1805,285,1797,263,1816,228,1829,220,1818,214,1790,201,1773,192,1762,180,1735,214,1719,222" >
<area shape="poly" coords="2051,147,2074,125,2080,118,2094,113,2107,106,2131,112,2169,84,2231,92,2254,107,2273,130,2274,147,2264,161,2265,179,2269,214,2235,215,2174,208,2189,172,2160,165,2140,161,2115,180,2102,198,2091,204,2071,208,2061,205,2053,197,2083,180,2094,172,2087,161,2065,168,2052,168,2051,147" >
<area shape="poly" coords="1847,298,1896,265,1988,240,2041,232,2044,253,2096,251,2082,273,2105,287,2091,329,2065,349,2079,377,2049,390,2032,397,2018,420,2070,456,2050,477,1986,437,1960,421,1957,460,1939,460,1908,408,1904,438,1871,448,1876,402,1857,410,1811,435,1803,430,1844,392,1864,359,1875,335,1865,324,1847,298" >
<area shape="poly" coords="2332,1,2523,1,2535,23,2548,38,2541,50,2534,69,2524,79,2528,101,2524,159,2511,208,2503,272,2482,295,2479,344,2452,393,2434,394,2419,427,2387,422,2368,407,2351,351,2341,300,2337,213,2330,201,2312,201,2308,170,2307,153,2326,143,2341,115,2348,90,2342,81,2338,64,2332,1" >
</map>
$('area').attr('href', '#');
$('.off-the-side').addClass('push-side');
$('.wall-writings').addClass('wall-writepos').prepend('<button class="close"><img src="x-icon.png" alt=""></button>').hide();
$('area').click(function(){$('#writing1').fadeIn('slow');return false;});
$('.close').click(function(){$(".wall-writings").fadeOut();});
Hope I understood the problem :)
I would place an href tag on each area like:
<map>
<area href="#div1" shape="poly" coords="287,230,301,244,319,251,329,252,340,252,347,252,338,246,336,237,344,233,344,229,345,225,356,227,362,229,376,230,385,235,393,242,396,250,403,254,408,248,414,239,419,231,424,224,429,222,433,233,432,248,428,263,422,272,422,279,410,286,396,288,388,291,385,293,390,296,393,305,396,316,400,318,407,320,414,325,416,332,420,343,415,352,414,360,408,369,401,374,405,387,409,399,407,409,408,412,402,414,368,365,357,374,358,390,359,403,354,409,343,415,337,416,323,370,294,362,268,327,264,274,287,230" >
</map>
<div id="some_div">Some text</div>
$('area').click(function(){var href = $(this).attr('href'); $(href).show(); return false;});
css
#some_div{display:none;}
I think this should work. If this is not what you intended please explain further
In jquery using the click event handler. How do I keep all the
elements from not show but only have one element show one at time to
what is related when I click on it?.
From what i can deduce from your html mapping, you are missing the id's attribute for the tag and your Jquery is actually targeting the whole image map.
the guilty code:
$('area').click(function(){$('#writing1').fadeIn('slow');return false;});
Because of that, all the elements would show when you clicked on any of the area map.

Categories