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?
Related
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");
}};
For example, if I have a ready instance of CKEDITOR, and on that same page I have a list of pictures, with this markup:
<div class="galleryPictures">
<a href="#image-id-1" data-id="1" data-img-src="/pictures/image-1.jpg" class="galleryPicture">
<img src="/pictures/image-1.jpg" />
</a>
<a href="#image-id-2" data-id="2" data-img-src="/pictures/image-2.jpg" class="galleryPicture">
<img src="/pictures/image-2.jpg" />
</a>
<a href="#image-id-3" data-id="3" data-img-src="/pictures/image-3.jpg" class="galleryPicture">
<img src="/pictures/image-3.jpg" />
</a>
</div>
And I have following jQuery click handler delegated to these a.galleryPicture items:
$(document).ready(function() {
$('.galleryPictures').on('click', 'a.galleryPicture', function() {
// when this accours I would like to open CKEditor's
// Insert-Image Component, and to get the "url" field filled with
// $(this).data('img-src'); value
});
});
Is it possible to trigger / open Insert-Image programmatically?
Found it. Might be of help to someone else:
With a simple inspection with Firebug I've seen that the <a> which on click triggers the opening of the Insert-Image component contains this function call in it's onclick attribute:
CKEDITOR.tools.callFunction(51,{});
// second argument is {} (an empty js-object), it the original the <a> onclick it was like this:
// CKEDITOR.tools.callFunction(51, this); meaning it was sending the instance of that element
After this call it is possible to do something like this:
CKEDITOR.tools.callFunction(51,{});
// a failsafe if jQuery doesn't find the specified element after the function is executed
setTimeout(function() {
$('#cke_69_textInput').val('someImageUrl');
}, 50);
I need to "slide in" a (background-)image in a div.
When I load the page, some div with a bg image or image inside it (and overflow?) needs to go from invisible/width=0 to 100px width. This needs to ease in.
Can anyone please help me out with the js?
<div style="overflow:hidden; width:100px; height:40px;">
<img src="someimg.png" height="40" width="100" />
</div>
This uses jquery on document ready.. For easing can use the standard jquery 'linear' but I included the jquery.easing plugin where you can have different easing options.
http://jsfiddle.net/DyW7M/1/
$(document).ready(function () {
$('#makeitlong').animate({ width: '400'}, 2000, 'linear');
});
So I've got an image that inside a tag, and I've also got a div that is centred in the middle of the screen.
How do I make this div invisible until the image is clicked?
Preview of page when the div is visible:
So that added to cart is a div in the middle of the screen. I want that to only show up when the "Add to cart" button has been clicked.
I want the div to go away again after 2 seconds. Transitions would be nice (eg fade into visibility), but I don't mind.
Set the display of the div to none and do a onclick event for the image which sets the display of the div to block. I would recommend using JQuery to add in any transitions or animations.
Something like (without animations):
<div id="cart" style="display:none">
</div>
<img src="imgsource" onClick="document.getElementById('cart').style.display = 'block'"/>
Worked it out. Had to use jQuery.
In the < head> :
<script>
$(document).ready(function(){
$(".addtocart").click(function(){
$(".addedcartbg").fadeIn(500);
$(".addedcartbg").delay(1000);
$(".addedcartbg").fadeOut(500);
});
});
</script>
In the < body> :
<div class="addedcartbg" style="display:none"><div class="addedcart"> Successfully added to cart. </div></div>
css
.hide{
display:none;
}
html
<div class="hide">
// put content here
</div>
<img class="hide-show" src="site.com/image.png" alt=""/>
js
$(function(){
$('.hide-show').bind('click',function(){
$('.hide').fadeIn(500).delay(2000).fadeOut(500);
});
});
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')
}
});