Image Map with Image popup on hover over hotspot - javascript

I am building a calendar that has events on certain days. The calendar is a jpg that I have created an image map for. When you hover over a hotspot or "event" on the calendar, I want an image to hover next to the mouse pointer that will have the event information on it, and then disappear when the mouse goes off of the hotspot. I have six hotspots, and a javascript function for each. The functions replace the popup image with the correct event image. Below is an example of just one of the areas along with one function (the others are identical w/ different image names and coords)
I had the event images popping up below the calendar on hover but the page refused to relocate the position of the image to the current mouse location. How can I make the popup image relocate? What am I doing wrong? or should I be using a different method?
JS:
function pop(e) { //function called by first hotspot
Image.src = "../img/Bubble - Aloha.png" //event image
document.popup1.src = Image.src;
var thing = document.getElementById("popup1");
$("#popup1").toggle();
thing.style.left = e.screenX + 'px';
thing.style.top = e.screenY + 'px';
return true;
}
MAP:
<map id="feb1050" name="feb1050">
<area shape="rect" alt="" coords="464,170,588,263" HREF="../img/feb1050.jpg" onMouseOver="pop(event);" onMouseOut="pop(event);"/>
...</map>
HTML:
<ul><li>
<img src="../img/feb1050.jpg" width="1050" alt="calendar" USEMAP="#feb1050">
</li>
<li>
<div id="popup"><img NAME="popup1" id="popup1" src="../img/Bubble - Aloha.png" width="400" alt="calendar" style="display:none;top:-2000;left:-1000;>
</div><br />Click Here To RSVP!
</li>
</ul>

Perhaps rather than manipulating the position of the image itself, you could position the enclosing div. For the HTML:
<div id="popup" class="popup"><img NAME="popup1" id="popup1" src="../img/feb1050.jpg" alt="calendar">
<br />Click Here To RSVP!</div>
With some CSS for the div:
.popup {
position:absolute;
z-index:20000;
top: 0px;
left: 0px;
display: none;
}
And then the JS:
function pop(e) { //function called by first hotspot
Image.src = "../img/Bubble - Aloha.png" //event image
document.popup1.src = Image.src;
var thing = document.getElementById("popup");
thing.style.left = e.clientX + 'px';
thing.style.top = e.clientY + 'px';
$("#popup").toggle();
return true;
}
Note that I would also use clientX and clientY rather than screenX and screenY:
What is the difference between screenX/Y, clientX/Y and pageX/Y?
Working example on JSFiddle

One thing I have done (in a situation almost exactly like this: A client wanted some pricing boxes to appear when hovering over a price keyword) is almost purely CSS and HTML. You can generate the popup areas inside <a> tags, which are then placed inside some <span> (or absolutely-positioned <div>) placed next to the hover area. You make sure those span/div elements are only defined for the a:hover selector, and you set them to display:none; on the rest of the a:x selectors, so that the span/div box only appears when you are hovering over the anchor, and disappears when you are not.

Related

Snap cursor to specific point of draggable element

I am dragging thumbnails from one DIV to another and attempting to imitate the "snap-to-a-grid" feature used in AutoCAD , Adobe Illustrator, many other graphics-editing software, etc.
Question 1:
How could I get the pointer to snap to the 0,0 position (x and y position) of the image I am clicking for dragging, regardless of where the pointer was on the image when clicked?
When I click to drag an image, the pointer sticks to where the pointer was when clicked and the coordinates I am going to track will be for the pointer.
I tried this:
cursor: url(mycustomcursor.png) 0 0 , auto;
and the custom pointer appears but doesn't snap to 0,0 as hoped.
Question 2:
How can I get my image to stick precisely where dropped in a DIV and return the offset in pixels from the top/left of the DIV it is being dropped into?
I don't know if the cursor position when dragging is relevant but when I drop my image with the following script the image shifts twice the distance I expect of in other words the offsetX value, doubled. I have added the script below and had to edit out a bunch of (hopefully) non-relevant script like CSS for colors, borders, etc. I am also only working with the X-coordinates for simplicity in testing.
<div style='overflow:scroll;text-align:left;position:absolute;width:90%; height:180px;' ondrop='drop(event)' ondragover='allowDrop(event)'>
<img id='image_1234' src='image_path/image.png' style='position:absolute;height:100px;' draggable='true' ondragstart='drag(event)'>
</div>
<div id='panel_frame' style='width:600px;height:300px;' ondrop='drop(event)' ondragover='allowDrop(event)'>
</div>
function allowDrop(evAllow) {
evAllow.preventDefault();
}
function drag(evDrag) {
evDrag.dataTransfer.setData('text', evDrag.target.id);
}
function drop(evDrop) {
evDrop.preventDefault();
var dropData = evDrop.dataTransfer.getData('text',evDrop.id);
evDrop.target.appendChild(document.getElementById(dropData));
var offsetLeft = evDrop.clientX + 'px';
document.getElementById(dropData).style.left = offsetLeft;
}
I am testing in Firefox. Any help is appreciated. Thanks!

jQuery mouse position

I have a problem, with jquery's mouseover. I have an image with a map. When I hover the mouse on specific areas, a div should pop up at the position of the mouse, instead the div pops up at a position according to the scrolling height of the page.
This is when everything goes right.
And the next image shows what happens when I scroll a bit higher.
The hovered area is the same, but the div is not at the right place. The code I made is the following:
$(document).ready(function(){
$('area').mouseover(function(e){
var x = e.clientX;
var y = e.clientY;
var id = $(this).attr("id");
$("div#map-popup-"+id).css({position: "absolute", top: y, left: x});
$("div#map-popup-"+id).show();
$(this).mouseleave(function(){
$("div#map-popup-"+id).hide();
});
});
});
I have never worked with maps and areas before, so I don't know what could be messed up. I got a plain html from web archive and I need to restore the site in wordpress. Here is an area from the html code:
<img src="https://web.archive.org/web/20160307004818im_/http://dcca.eu/img/chambers_map_new.png" width="1000" height="507" alt="" usemap="#chambers-map" />
<map id="chambers-map" name="chambers-map">
<area id="ulm" shape="circle" coords="85,160,10" href="#" alt="" />
<area id="passau" shape="circle" coords="232,136,10" href="#" alt="" />
So my question is: why does this happen and how can I fix it? Thanks in advance!
The mouse cursor's position is based upon it's X and Y co-ordinates on the page. You're looking for pageX and pageY: http://api.jquery.com/event.pagex/
So you're probably wanting to position: fixed; the element based upon the e.pageX and e.pageY
You want the positioning of pop-up to be relative to your viewport and not to the parent element. Hence use position as 'fixed' instead of 'absolute'.

How to show point icon on image at specific point in <img> tag in html5 like google maps

we have an image tag and when the user clicks at a specific point on the image , i want to show a point icon at that position like the google maps is showing on the maps.
You could for instance do something like this:
Javascript
var $clickable = $('#clickable');
$clickable.on('click', function(e) {
var $pointer;
$clickable.append('<div class="pointer" />');
$pointer = $clickable.find('.pointer');
$pointer.css({
top: event.pageY - $clickable.offset().top,
left: event.pageX - $clickable.offset().left
})
e.preventDefault();
})
Please take a look at https://jsfiddle.net/xonqq259/1/ for a working example.
You need a relative wrapper and add a pointer element with absolute positioning.

Using coordinates to place elements inside fancybox

I have a div containing 2 images, one is sort of a map the other is a pinpoint image, I used javascript to capture mouse clicks as x,y coordinates and the pinpoint moved easily along with clicks, here how the code looked like:
<div id="areapage" onclick="javascript:SetValues();" style="display: none;">
<img src="mysource" style="width:420;position:relative;" >
<img id="pindiv" src="images/pin.png" style="position: absolute;top: 0;left: 0;">
</div>
<script>
function SetValues()
{
document.getElementById('pindiv').style.left = window.event.screenX + 'px';
document.getElementById('pindiv').style.top = window.event.screenY + 'px';
}
</script>
it worked perfectly, until I placed it inside a fancybox, obviously something has changed, maybe x,y now refers to the original document in the background that opened the fancybox?
Try setting the #areapage div to position:relative; this will make the pindiv absolute positioning be based on that div rather than it's parent.

Mouseover/mouseout, mouseenter/mouseleave, hover flickering issue

I have a div with an image inside it. When I hover the image, I create a tooltip div thats absolutely positioned over part of the image (the absolute position is important). It contains the title and alt text.
This is all well and good until you hover the tooltip box. It doesn't bubble down and it thinks I'm no longer hovering over the image, thus making the tooltip box disapear. But then it registers I'm hovering the image again and it goes back and forth between showing the tooltip box and hiding it.
Thus the flickering issue.
There are a bunch of posts on SO about the flickering issue and I've tried so many solutions but none have been working. I've tried Mouseover/mouseout, mouseenter/mouseleave, hover, and even using live() in combination with them. I even switched from creating the tooltip from scratch to having the empty div there so it would be in the DOM when the page loaded in case that was the issue. I really don't know what to do anymore. Here is my code at the moment.
$("img").bind("mouseover", function() {
var pimg = $(this);
var position = pimg.position();
var top = position.top;
var left = position.left;
var title = $(this).attr('title');
var alt = $(this).attr('alt');
$('.toolTip').css({'left' : left, 'top' : top, 'width' : width}).append('<div><h3>' + title + '</h3><p>' + alt + '</p></div>');
});
$("img").bind("mouseout", function() {
$('.toolTip').empty();
});
The problem is a) you need to use mouseenter / mouseleave and b) the tooltip div needs to live inside the element that has the mouseenter / mouseleave listeners.
eg:
<div id="mouseoverdiv">
<div class="tooltip">some text</div>
<img src="" />
</div>

Categories

Resources