Selectable area of an image - javascript

I am not sure exactly what I should be looking for on this so if I am asking a duplicated question please advice straight away and I will remove.
Say I have this image
I want to make sections of it selectable, so when I select say the roof it will at the moment have an alert or console.log saying ROOF same for if I selected right side, left side, rear, etc
And I want it to change to grey the area that I have selected so we know I have selected that area.
I know this can be done with javascript/jquery but I am unsure how.
Has anyone got any suggestions?


You can use image maps for this
HTML
<img src="http://i.stack.imgur.com/7o2sJ.jpg?1366014978754" alt="" usemap="#map1">
<map id="map1" name="map1">
<area shape="rect" alt="" title="" coords="69,25,243,128" href="#" target="" />
<area shape="rect" alt="" title="" coords="81,255,248,426" href="#" target="" />
</map>
JS
$('#map1 area:eq(0)').click(function () {
alert('hood');
});
$('#map1 area:eq(1)').click(function () {
alert('roof');
});
Fiddle - http://jsfiddle.net/fxZsd/


Yes, it is possible. But not sure if you will like the approach. Design your Car or any image in SVG format. SVG supports mouse events. Bind events to those areas and on click change the color.
Here is question about changing color using javascript Changing SVG image color with javascript


use html map tag and give a id to the map and write jquery code for click event for the map and do your task


You can do so with html map tags to declare the sections using a coordinate system, and javascript/jquery to create the alerts/popups/tooltips, etc.
example from w3schools:
<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>
for more info on it, check out http://www.w3schools.com/tags/tag_map.asp


you can draw images over canvas object (html5), all those sections can be vector drawn

Related

How to display a new picture when my mouse move to a certain area of the picture?

everyone.
I want to display a new picture under my original picture when my mouse moves to the specific area of the original picture.
and I'm new to HTML and CSS, so I still can not find a way to fix it.
I have tried some codes, but I can't combine and together.
The original picture is "Cata_all" the image should display below it, is "catabottoff"
<body>
<map src="graph/Cata_all.jpg" name="productmap">
<area shape="rect" coords="5,205,150,250" href="catabottoff.jpg" target="">
</map>
<img src="graph/Cata_all.jpg" usemap="#productmap">
</body>
Another code I also tried is onmouseover:
<table border=0 height="50%" width="50%">
<tr valign="top">
<td width="20%">
<img onmouseout="this.src='graph/Cata_all.jpg'" onmouseover="this.src='graph/catabottoff.jpg'" src="graph/Cata_all.jpg"/>
<map src="graph/Cata_all.jpg" name="productmap">
<area shape="rect" coords="5,205,150,250" href="" >
I'm really appreciate if you can give me some hints. Thank you so much~

While there are some parts unclear about your requirements but I think this basic example should give you a way to create what you're after.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
With a little javascript, you can build something like this
There also a Javascript way of doing this but I'm not sure if that's your requirement.
<img src="https://www.w3schools.com/tags/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379" id="mainImage">
<!-- You can remove Href attribute from area to make sure they're not redirecting to a different page -->
<map name="workmap">
<area id="computer" shape="rect" coords="34,44,270,350" alt="Computer">
<area shape="rect" coords="290,172,333,250" alt="Phone">
<area shape="circle" coords="337,300,44" alt="Cup of coffee">
</map>
<script>
// This will change the image when you mouseover the Computer.
// This is just a basic example that will help you understand how you can change the main image on mouseover.
var computerArea = document.querySelector("#computer");
var mainImage = document.querySelector("#mainImage");
// Adding mouseover listener to the computer area - this could be done for other parts as well.
computerArea.addEventListener("mouseover", function(e){
mainImage.src = "https://lh3.googleusercontent.com/proxy/4K3cpWUfEVjCSCpoFfYGq2i8KBZZ0f52WQrO7A1e-SzmoX78gwahuwM_Y6u6dR6PhMHuxiP145NiLptVvUQSYfSbQtt0QjDncQ" // Your new image
});
</script>

make hover effect on different parts of an image, not html but an img

Basically i have a "blueprint" for a building project,i need to make it so that when they hover on specific parts of the floor a short description pops out.
something like this:

You can use an Area Map. The syntax is as follows:
<map name="myMap">
<area shape="rect" coords="0,0,10,20" href="somelink.html">
<area shape="circle" coords="10,30,50,100" href="anotherlink.html">
</map>
You use the coords to define each area. You then can assign an ID to each area and make the hover items. Try it and let us know.
You can use an Image Map Generator online, there are plenty. I use this one: http://imagemap-generator.dariodomi.de/ It is much easier than doing it by your own.

try this one
<img src="map.jpg" width="100%" height="300px" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="50,50,10,10" alt="building" title="building">
<area shape="rect" coords="150,150,10,10" alt="building + rooms" title="building + rooms">
</map>
set your coordinates in image which will you generate popup message

This can also be done as assign this image as background to a div of the same size. Then position anchor links at the exact positions where you want the hover effect. Add an hover tool-tip as given here and that's it. Everything can be done with pure css.

How can i "deselect" all the areas with imagemapster?

I have 2 images bound with imagemapster. When I click an area it stays selected, which is fine. I need to change the behaviour so that when I click an area I want the other areas to deselect.
Is that possible?
<img onClick="pruebaImagemapster();" src="images/desplegable_pag04_2.png" alt="Desplegable" width="358" height="213" border="0" usemap="#Map2" class="map" />
<map name="Map2"><area shape="rect" coords="198,70,310,146" onclick="clickAbrirSubmenu('links5')" href="javascript:;">
<area shape="rect" coords="49,70,163,145" onclick="clickAbrirSubmenu('links4')" href="javascript:;">
</map>
<img onClick="pruebaImagemapster();" src="images/desplegable_pag04.png" alt="Desplegable" width="694" height="104" border="0" usemap="#Map" class="map" />
<map name="Map">
<area shape="rect" coords="377,7,693,96" onclick="clickAbrirSubmenu('links3')" href="javascript:;">
<area shape="rect" coords="3,6,317,92" onclick="clickAbrirSubmenu('links2')" href="javascript:;">
</map>
Feel free to ask me for more information if you don't understand what I am trying to achieve.

Its late but may be help full for others.
If you want to select only one area at a time you can use builtin functionality.
Use
singleSelect: false
in options at time of plugin initialization.

I did it!
All my areas have their own id so when I click one I force the others to "deselect".
Here is my script:
var nAreas = $('area').length;
//alert(nAreas);
for(var i=0;i<=nAreas;i++){
if(idArea == 'area'+i){
/*Nada*/
}else{
$('#area'+i).mapster('deselect');
}
}

responsive image mapping with coordinates

I am trying to understand how this plugin works :http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
The goal is to have responsive image maping but what I dont understand is how to come up with the coords. See below how there are a bunch of numbers, how do I calculate my own coords for my image, can some one explain what is going on with this demo and how it is to be used?
<map name="powerpuffgirls">
<area shape="poly" coords="122,36,281,36,285,37,287,39,289,42,289,47,289,48,278,77,276,81,274,84,271,85,218,85,218,90,210,90,208,95,207,99,204,100,72,100,26,87,23,84,20,81,19,76,35,40,37,38,43,35,62,35,65,30,68,26,72,25,115,25,119,27,121,30,122,36,122,36" href="#ppg" title="The Powerpuff Girls" alt="The Powerpuff Girls" />
<area shape="poly" coords="864,668,912,650,922,668,971,667,973,718,981,722,985,729,988,731,1010,731,1010,742,833,742,833,730,865,730,865,721,874,721,874,718,864,668,864,668" href="#cn" title="Cartoon Network" alt="Cartoon Network" />
<area shape="poly" coords="1010,298,995,281,979,267,962,256,944,248,927,242,909,238,876,236,857,237,838,240,817,246,797,255,778,266,761,281,746,299,735,322,730,335,728,346,726,348,721,349,709,344,711,361,718,378,708,380,697,388,688,398,685,404,685,411,686,419,691,425,698,429,707,431,735,426,743,427,752,433,762,444,774,454,798,469,787,483,779,481,772,482,761,486,753,495,747,505,746,516,746,521,748,527,751,532,759,538,741,561,734,572,732,584,733,591,737,599,744,604,754,607,765,604,776,597,797,570,817,543,857,488,865,488,893,488,910,485,924,483,930,483,935,485,939,490,934,496,931,501,929,506,932,514,938,519,945,522,954,523,966,521,979,516,985,512,989,507,993,500,994,493,991,484,986,476,967,464,982,454,998,440,1013,425,1024,409,1024,329,1017,312,1010,298,1010,298" href="#buttercup" title="Buttercup" alt="Buttercup" />
<area shape="poly" coords="571,101,563,83,562,66,549,80,541,96,537,112,536,128,537,141,531,141,508,141,508,141,511,133,517,126,533,114,500,111,476,111,452,114,438,118,424,124,410,131,400,140,392,152,390,167,391,174,394,183,400,191,409,198,391,215,379,234,371,252,368,271,367,277,368,298,371,316,381,338,396,358,414,375,399,378,387,385,379,393,377,405,378,412,382,418,388,424,395,429,411,434,425,435,431,446,439,456,459,474,480,488,502,500,514,507,523,515,528,523,530,534,529,541,526,547,515,562,532,556,548,547,562,536,574,523,583,508,590,490,594,470,596,448,596,430,591,410,587,398,599,390,613,382,628,371,643,356,657,337,666,313,669,299,670,284,669,276,668,264,670,263,697,263,704,261,711,257,716,251,719,243,718,236,715,231,706,221,694,215,683,213,677,213,670,215,664,220,656,232,645,215,652,206,657,199,660,191,662,181,660,169,655,158,648,150,638,142,617,130,596,120,582,112,571,101,571,101" href="#blossom" title="Blossom" alt="Blossom" />
<area shape="poly" coords="254,286,232,271,207,260,179,254,150,252,119,254,103,257,88,263,71,270,61,275,58,274,57,273,45,269,36,268,17,271,7,276,1,283,0,283,0,285,0,290,0,352,2,354,1,355,1,390,3,401,5,410,9,420,22,441,39,460,58,476,47,480,38,487,32,494,30,504,33,515,41,524,53,531,69,534,77,533,85,530,90,525,93,518,91,512,88,508,85,505,85,502,86,499,89,497,97,496,120,500,138,503,154,503,167,503,185,531,215,576,235,609,241,617,248,622,255,626,265,628,273,626,280,621,285,614,287,605,283,592,276,580,261,558,269,553,273,547,276,541,277,536,274,524,267,513,257,504,250,501,244,501,240,502,237,503,225,488,242,478,259,468,276,451,282,447,292,446,318,450,327,448,334,445,339,439,341,431,337,419,329,409,318,401,307,398,301,398,301,393,301,391,303,391,321,393,336,391,352,387,370,380,387,370,373,368,364,364,358,360,353,354,350,347,347,330,345,313,343,302,340,293,336,286,331,280,318,272,305,267,293,266,282,267,272,270,262,276,254,286,254,286" href="#bubbles" title="Bubbles" alt="Bubbles" />
</map>
</div>

The plugin does the heavy lifting for you.
From what I can see, the coords are whatever you want... the plug in then calculates the new coords based on the size of the image. These obtuse coordinates are for a complete outline of the powerpfuff girls and the logos... try something simple like a circle or a rectangle.

If you are still looking for a way to create the coordinates, you can use various apps on your computer or you can also do this online such as image-maps.com. Just do a search online for "online image map editors" and several will show up.
Simply upload your image or add a URL of your image and then create the shapes (rectangle, polygon, circle) with corresponding links etc. and it will output the code for you.

How to get ID of Image in Image Map Mouse Over

Let's say you have two images that use the same image map.
<img src="/test/image1.jpg" id="image1" useMap="map-name">
<img src="/test/image2.jpg" id="image2" useMap="map-name">
<map name="map-name">
<area shape="rect" coords="0,0,82,126" alt="Sun" onmouseover="testFunction();"/>
<area shape="circle" coords="90,58,3" alt="Mercury" onmouseover="testFunction();"/>
<area shape="circle" coords="124,58,8" alt="Venus" onmouseover="testFunction();"/>
</map>
Is there any way to get the ID of the image (image1|image2 in this case) inside of the testFunction()?

Yes. The easiest way is to use a library like jQuery to hook up the event, instead of using onmouseover. If you do that, you'll basically do something like:
$("AREA").mouseOver(function (e) {
var id = $(e.target).attr("id");
}
If you don't do that then ... well play around with "this" inside your definition of testFunction, and good luck (because you'll get to deal with the joy of cross-browser incompatibility).

Categories

Resources