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')
}
});
Related
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' );
} );
}
I have created an image map of a graveyard, with hotspots for each headstone, upon which I'd like to show HTML rich Bootstrap 3 popovers however when my popovers appear they appear at the top of the image as opposed to alongside the hotspot.
This is my map:
<img width="1200" height="930" alt="" src="http://www.nathonjoneswebdesign.co.uk/portpatrickoldkirkyard/hotspotmap/CHURCHYARDHOTSPOTMAP.jpg" usemap="#HeadstoneMap">
<map name="HeadstoneMap">
<area title="Map Reference 1" href="#" shape="poly" coords="795,299,810,299,811,322,794,322" alt="Map Reference 1" data-toggle="popover1" data-content="">
<area title="Map Reference 2" href="#" shape="poly" coords="816,247,815,270,833,269,832,246" alt="Map Reference 2" data-toggle="popover2" data-content="">
</map>
This is my JavaScript:
$(document).ready(function(){
$('[data-toggle="popover1"]').popover({
html: true,
trigger: 'hover',
placement: 'top',
content: function(){return '<img src="http://www.nathonjoneswebdesign.co.uk/portpatrickoldkirkyard/portpatrick-headstones/M1a.jpg" class="img-responsive" alt=""/>';}
});
$('[data-toggle="popover2"]').popover({
html: true,
trigger: 'hover',
placement: 'top',
content: function(){return '<img src="http://www.nathonjoneswebdesign.co.uk/portpatrickoldkirkyard/portpatrick-headstones/M2a.jpg" class="img-responsive" alt=""/>';}
});
});
Here is a Bootply of the problem:
http://www.bootply.com/YvO9vRu68J
You can also view the issue on the test site at:
http://www.nathonjoneswebdesign.co.uk/portpatrickoldkirkyard/churchyard-map.php
I have only made live headstones 1 and 2, for testing purposes, which are just below the distance marker on the right.
You'll also notice that I am repeating my JavaScript for each popover however I would like, if possible, to slot that into a repeat region and populate the data from a recordset (PHP/MySQL) so that the map responds to any changes made by the user to the database records. That may be for another post though!
Would appreciate any help offered, thank you.
NJ
EDIT: Is this beyond what Bootstrap 3 popovers / jquery / javascript can do perhaps? Is there an alternative to image maps that I should investigate?
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'm using TinyMCE for custom insert image, the problem is when i insert image with advimage, example
http://mysite/folder/image.jpg
but the image link when it loads become
<img title="" src="../../image.jpg" alt=" " width="450" height="581" />
how can i get the output to become like
<img title="" src="http://mysite/folder/image.jpg" alt=" " width="450" height="581" />
sorry for my bad english
thank you
Have a look at one of moxiecodes tinymce example pages:
http://www.tinymce.com/tryit/url_conversion.php
I guess this will show you how to configure your tinymce.
tinyMCE.init({
// General options
convert_urls : false,
...