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
I have an html page with simple, static image like this : Image
I need a way that putting mouse (hover) on any object, for example - "BED" to get a tooltip that - "There is bed".
I know how hover works at pure html, with blocks or any teg, but I need a way of doing/tracking the user cursor, and when it enters in specific zone, to show the hint. Probably some JS required. How can I setup this unknown geometric forms with their coordinates to achieve my goal?
No JS script needed :)
You can use image maps .. they are old but should work as you expected.. you can run it and see title when you hover over kitchen and bad
I used this webpage to 'generate' rectangles and area over the image or hotsports..
<img src="https://www.edrawsoft.com/symbols/simple-home-floorplan.png" usemap="#image-map">
<map name="image-map">
<area target="" alt="This is bad" title="This is bad" href="" coords="520,132,451,48" shape="rect">
<area target="" alt="This is kitchen" title="This is kitchen" href="" coords="343,204,254,55" shape="rect">
</map>
In addition of the prev answer you can also add this jQuery to your page. It makes the tooltip show more prominent and also quicker:
$( function() {
$( document ).tooltip();
} );
This native jQuery function uses the 'title' attribute! Don't forget to add these like this:
<img title='This is a test!!' src='test.png'>
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.
I have an image map of a human body that I have separated out into 3 zones (for simplicity): body, right leg, and left leg.
I want to be able to click the section of the body, and have that section change colors (ex. fill gray) and set the value of a variable to true (1) for that section. All body sections are by default a value 0.
Variables that need to be set are
{Hidden:TORSO}
{Hidden:RLEG}
{Hidden:LLEG}
Here is my image map:
<img src="http://imgur.com/wzHgrvS.jpg" usemap="#Map" border="0" />
<map name="Map"map id="bodyMap" name="myMap" >
<area shape="poly" alt="" title="Torso" href="#" id="TORSO" coords="94,84,95,134,107,177,104,189,102,200,103,209,102,221,188,220,184,197,182,183,183,168,187,153,191,142,192,129,188,89,155,90,130,90,114,89" />
<area shape="poly" alt="" title="Right Leg" href="#"id="RLEG" coords="99,221,97,242,94,259,90,270,90,291,91,315,94,333,96,343,95,347,94,358,93,366,93,372,89,387,89,405,93,421,96,439,99,456,100,470,100,477,116,477,113,462,116,441,119,423,122,408,119,392,117,376,122,363,126,337,133,314,139,289,140,273,133,265,130,252,122,240,114,231" />
<area shape="poly" alt="" title="Left Leg" href="#" id="LLEG" coords="147,269,153,303,158,319,162,338,164,348,164,357,166,365,170,373,170,380,168,391,166,403,166,414,168,427,172,443,174,460,175,469,174,474,190,473,187,453,192,437,194,423,199,399,197,381,195,349,191,335,196,315,196,289,196,265,191,242,189,222,187,218,176,230,167,239,160,249,155,262,154,266,148,270" />
</map>
I have done this with and selecting a hotspot on an image i.e. circles on a part of a body, but never the whole limb. I'm stumped.
Probably the fastest/easiest way to do this is with the ImageMapster jQuery plugin.
ImageMapster (GitHub: jamietre / ImageMapster, License: MIT) by James Treworgy makes it easier to manipulate HTML image maps. Interesting effects can be created using image maps and more modern HTML/CSS/JavaScript techniques, while still falling over to the basic functionality in older browsers.
http://www.outsharked.com/imagemapster/
These demos show that it will do exactly what you desire:
http://www.outsharked.com/imagemapster/default.aspx?demos.html
By calling $('img').mapster(options), ImageMapster will attempt to bind to each image that has an associated map. An area within the image map can be selected with $('area').mapster('select'). The project has lots of options and features.
Here is code for a somewhat basic example:
http://jsfiddle.net/nYkAG/
What you'll need to do is use is create image maps for those areas that you want to click and have something happen. If you don't have Photoshop or Firework and are looking for a free service, try Image-Maps.com.
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