for a project, I am trying to provide a user interface where a user can position sensors on a foot and then save the sensors position in the image to display them later :
In doing, so I create 5 images, one per sensor and the image of the foot mapping but I have no idea how to put the sensors icon in the image and then save their position inside the image. I have the following code :
<p>Put on the foot mapping the sensors position</p>
<img
alt="foot_mapping"
src={require("assets/img/theme/circle-1.png")}
class="inner-image"
width="40em"
height="40em"
/>
<img
alt="foot_mapping"
src={require("assets/img/theme/circle-2.png")}
class="inner-image"
width="40em"
height="40em"
/>
<img
alt="foot_mapping"
src={require("assets/img/theme/circle-3.png")}
class="inner-image"
width="40em"
height="40em"
/>
<img
alt="foot_mapping"
src={require("assets/img/theme/circle-4.png")}
class="inner-image"
width="40em"
height="40em"
/>
<img
alt="foot_mapping"
src={require("assets/img/theme/circle-5.png")}
class="inner-image"
width="40em"
height="40em"
/>
<img
alt="foot_mapping"
src={require("assets/img/theme/foot.png")}
width="80%"
height="80%"
/>
I tried the inner image with no luck yet and I didn't find other ressources regarding this problem.
Thanks in advance :)
I want something to happen in p5js when the mouse is over a map of a country (which is not a standard shape). How can I do that? I mean how can I track a mouse on a non-standard shape like the map of a country?
(I've loaded this shape as an image and the spots out of the borders are still part of the image but are transparent. )
Thanks
There are a few ways to do this:
You could get the geometry in your code, and use that to check whether the cursor is inside the shape. Then google something like "check if point is inside polygon" for a ton of resources. You can do this even if you still want to use an image, or you could draw the shape using the createShape() method instead.
Or you could check the color under the mouse. If it's not the background color, then you're inside the shape. This will only work if you only have one country, or if every country is a different color.
If I were you, I would lean towards the first option. Get something simple working first: create a hard-coded shape, and then create a sketch that prints a message to the console when the mouse clicks inside that shape. Then get the geometry for the country and use that instead of the hard-coded shape.
Then if you get stuck, you can post a MCVE along with a more specific technical question. Good luck.
Rather than going through effort to track the mouse and perform your own colission-detection, why not go old-school and use <map> and <area>?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area
The HTML <area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a <map> element.
The HTML <map> element is used with elements to define an image map (a clickable link area).
<area> is represented in the DOM by HTMLAreaElement which implements the HTMLElement interface so you can listen to mouseover events coming from the <area> elements:
Example HTML (from the MDN article):
<map name="infographic" id="myInfographic">
<area shape="rect" coords="184,6,253,27"
href="https://mozilla.org"
target="_blank" alt="Mozilla" />
<area shape="circle" coords="130,136,60"
href="https://developer.mozilla.org/"
target="_blank" alt="MDN" />
<area shape="poly" coords="130,6,253,96,223,106,130,39"
href="https://developer.mozilla.org/docs/Web/Guide/Graphics"
target="_blank" alt="Graphics" />
<area shape="poly" coords="253,96,207,241,189,217,223,103"
href="https://developer.mozilla.org/docs/Web/HTML"
target="_blank" alt="HTML" />
<area shape="poly" coords="207,241,54,241,72,217,189,217"
href="https://developer.mozilla.org/docs/Web/JavaScript"
target="_blank" alt="JavaScript" />
<area shape="poly" coords="54,241,6,97,36,107,72,217"
href="https://developer.mozilla.org/docs/Web/API"
target="_blank" alt="Web APIs" />
<area shape="poly" coords="6,97,130,6,130,39,36,107"
href="https://developer.mozilla.org/docs/Web/CSS"
target="_blank" alt="CSS" />
</map>
<img usemap="#infographic" src="/media/examples/mdn-info.png" alt="MDN infographic" />
Script:
var areas = document.querySelectorAll( '#myInfographic area' );
for( var i = 0; i < areas.length; i++ ) {
areas[i].addEventListener( 'mouseover', function( e ) {
console.log( 'over some area' );
} );
}
Is there any way i can enlarge this code so the frame shows bigger then it is rather then me having to scroll up and down to see it, as in width and height. its a show the link in same page code.
code:
<a href='link1.html' target='myIframe'>link1</a><br /> <iframe name='myIframe'></iframe>
figured it out
Code:
<a href='link1.html' target='myIframe'>link1</a><br /> <iframe name='myIframe' width="500" height="400"></iframe>
I made an image into a map with images-map.com
I made some clickable areas, but i cant figure out how to make a function when i click on one of the areas. When I click on the images it will direct me to a website.
<img id="Image-Maps-Com-image-maps-2014-02-12-182158" src=images/map2.png border="0" width="491" height="360" usemap="#image-maps-2014-02-12-182158" alt="" />
<map name="image-maps-2014-02-12-182158" id="ImageMapsCom-image-maps-2014-02-12-182158">
<area shape="rect" coords="489,358,491,360" alt="Image Map" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
<area id="cen" shape="poly" coords="242,117,227,117,212,143,232,175,244,173,252,169,264,166,272,161,278,155" alt="Centrum" title="Centrum" target="_self" href="http://www.image-maps.com/" />
</map>
I want to make a function that loads an ID of a highchart that I made when I click on that part of the image.
I tried to replace the href="http://www.image-maps.com/" with an id but it doesnt work
Do you mean JavaScript function? If yes, use JavaScript Framework, for example jQuery. If you use jQuery, here is simple event that will be bind to any img HTML tag.
$("img").click(function(){
alert("The image clicked");
}};
I need to display some graphical chart data on a website. In these charts are several images that when clicked on should display a larger version of the image. The charts themselves are currently saved as a single image file.
My initial thoughts are to use an imagemap to specify where the images are in the overall chart image and then use jQuery to highlight around the edge of the images. Then using something like lightbox or fancybox display the larger version clicked on image.
What I would appreciate is some insight as to whether this is the best way to achieve the desired result or if there is a better technique?
Thanks
Why not just use a tooltip?
Here is an example using qTip2, with some borrowed code ;)
HTML
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="#" title="<img src='sun.gif'>" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="#" title="<img src='merglobe.gif'>" />
<area shape="circle" coords="124,58,8" alt="Venus" href="#" title="<img src='venglobe.gif'>" />
</map>
Script
$('area').qtip({
position: {
my: 'left center',
at: 'right center',
target: $('img')
}
});