I have problem on my site. I trying to do onclick on area, when I click area on image I want to show image and text. This is an example of what I mean:
This is what I have created so far:
<div class="interior" style="padding-left: 243px;">
<img src="Pres7.png" usemap="#intr">
<map name="intr">
<area class="speedo" shape="circle" onclick="" coords="342,126,19" href="">
<area class="screen" shape="circle" onclick="" coords="518,179,17" href="">
<area class="light" shape="circle" onclick="" coords="730,229,17" href="">
<area class="swheel" shape="circle" onclick="" coords="345,259,17" href="">
</map>
</div>
It should display a different image and text so from what I guess needs to create 4 functions.
I tried to do it because there are several examples on the Internet, but when I assigned the variables, it didn't work.
While I could manage with creating text and images by onclick, I don't know how to do it on the area.
There is the CSS property called 'display', each HTML element has it's own default value for that propety (most of them are 'block's, which means they cover the entire X axie), but one of the values you can give for that display property is 'none' which mean it's hidden, you can use javascript to toggle it between "none" (hidden) and the value you want for it.
See here for example: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
Related
I have created a clickable area in an image and I want to get the Id of this area in Javascript so I can fill it with color. I am new in both html and js.
var myElement = document.getElementById("map1");
<img src={marina} alt="marinamap" usemap="#workmap" />
<map name="workmap">
<area shape="rect" coords="320,220,340,210" alt=" parking" href="" id="map1" >
</map>
I am getting the error :
a constructor,method,accessor or property was expected.
Any advice?
Well, it doesn't look that <area> tag is styleble at all... if all your areas are rectangular o round(ish) you may consider using just div's or any other tags positioned absolutely over the image like so... if those areas have more complex shapes you may need to use SVG instead... svg example
[ORIGINAL WRONG ANSWER - before comment received]
Probably related to "Can I have an onclick event on a imagemap area element?"
You may do what you need in the onclick event of your area like so:
<area shape="rect"
coords="320,220,340,210"
alt="parking"
href="#map1_target"
id="map1"
onclick="event.preventDefault(); this.style.background='#a00';"
>
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
I have a two php pages one is creating a table another one is creating a graph. My index.html file is supposed to call both of them and show both the table and graph on the main page when some one clicks on the image. I have used this code
<div id="upload_target" ></div>
<div id="upload_target2" ></div>
<img src="image.png" alt="hello" usemap="#use" >
<map name="use">
<area shape="poly" coords="..." href="table.html" target="upload_target">
<area shape="poly" coords="..." href="graph.html" target="upload_target2">
</map>
so when the user clicks on area_1 table is shown in "upload_target" and when he clicks on area_2, it is shown in section "upload_target2".
But I wanna just have one area tag for both of them so when he clicks on image both can be shown some thing like this:
<img src="image.png" alt="hello" usemap="#use" >
<map name="use">
<area shape="poly" coords="..." href="table.html" target="upload_target" href="graph.html" target="upload_target2">
</map>
is there any way to do that?
Unfortunately, attributes must be unique on HTML elements. You may be able to accomplish this with an onclick event on the area element.
For example, you might try the following HTML:
<div id="upload_target1"></div>
<div id="upload_target2"></div>
<img src="image.png" alt="hello" usemap="#use" />
<map name="use">
<area shape="poly" coords="..." target1="table.html" target2="graph.html" onclick="return loadContent(this);" />
</map>
With the javascript function:
function loadContent(ele) {
var target1 = ele.getAttribute('target1'),
target2 = ele.getAttribute('target2');
//Make 2 AJAX requests to load the information
//If you are using jQuery, it is as simple as
$('#upload_target1').load(target1);
$('#upload_target2').load(target2);
return false; //Prevent the default action from happening
}
Hope this helps.
I'm trying to place an image over another based on the coordinates.
My html is:
<button id="add">add image</button>
<div id="container">
<img src="http://www.rangde.org/newsletter/nov11/images/real_tree.png" width="400" usemap="#treemap" />
</div>
<map name="treemap">
<area shape="circle" coords="345,483,13" alt="Venus" href="#" />
<area shape="circle" coords="333,361,13" alt="Venus" href="#" />
<area shape="circle" coords="302,284,13" alt="Venus" href="#" />
<area shape="circle" coords="79,350,13" alt="Venus" href="#" />
<area shape="circle" coords="55,489,13" alt="Venus" href="#" />
</map>
My script is:
$('document').ready(function(){
$('#add').click(function() {
$('area[alt=Venus]').css('background','http://www.rangde.org/newsletter/nov11/images/green-ball.png');
});
});
Here is my jsfiddle
This isn't an appropriate use of an image map, unfortunately, because they're not actually an element that can be styled.
However, if you switched this over to use some absolutely positioned divs in the same location as your mapped circles, combined with the CSS border-radius property, you can create the effect you're looking for: http://jsfiddle.net/N6Sbt/1/
That should be a pretty straightforward solution to your problem.
I'm afraid, it is not possible to set background on <area> as it is not a graphical element. If it was possible some would use it earlier to create simple <canvas> :)
Here is a forum, where people speak about similar
I'll use <a> instead of map, which should help you achieve the same thing. Just set them as 'position:absolute' with 'top' and 'left' having the value of coordinates, and 'width', 'height' with the value of size (as it's only 13 pixels, I don't thing rectangle and circle will be that different). Assign them with a class name so you can select them with jQuery. And don't forget to set the 'container' as 'position:relative'.
Try out this plugin it might help.still in development but you can have a look at it.
http://archive.plugins.jquery.com/project/maphilight
Here is the demo link
http://davidlynch.org/projects/maphilight/docs/demo_world.html
I need to simulate a mouse click using IE on a client side image map. Which object should invoke the fireEvent()? It cannot be simply the <area> object since it could be referenced by 2 different <img>s. It cannot be the <img> since we need a way to tell which part of the img is clicked which is defined in the <area> tag?
I've done some test with real mouse click on an client side image map. The event object generated from my click indicates (by the event.srcElement property) the event is generated from <area> tag. But when I tried to programmatically call the <area>'s fireEvent(), nothing happened!
This may be what you're looking for:
<img name="Area" src="Area.jpg" width="240" height="160" border="0" id="Area" usemap="#m_Area" alt="" /><map name="m_Area" id="m_Area">
<area shape="rect" id="A" coords="126,0,240,160" href="javascript:;" onclick="alert('a')" alt="" />
<area shape="rect" id="B" coords="0,0,126,160" href="javascript:;" onclick="alert('b')" alt="" />
</map>
Test