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'.
Related
I'm trying to position a image according to position of my mouse using onmousemove and objectPosition. I want the top of the viewport to be 0%, and the bottom to be 100%, independent if the person scrolls the page or not. As far I understand, this piece of code should do the trick:
window.onmousemove = event => {
var pos = (event.clientY / window.innerHeight) * 100
productImageZoomed.style.objectPosition = '50%' + pos + '%'
}
But when I move the mouse over the page, it only detects the mouse movement only inside a specific element, #image-main. I have no idea why, I thought that the window object would work on the entire viewport.
Relevant HTML snippet:
<div id="image">
<a class="image-zoom">
<div class="zoomPad">
<img id="image-main" src="/480-721/somename.png"><!-- mouse movement only detectable inside this element -->
<figure class="product-image container-zoomed" style="display: none;">
<img class="product-image image-zoomed" src="/1920-2880/somename.png" style="object-position: 50% 0%;"> <!-- the element to be positioned -->
<figcaption><span>Click to close</span></figcaption>
</figure>
</div>
</a>
</div>
I have absolutely no clue of what is happening, can anyone help?
Here is my full JS code if you think it's relevant
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.
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.
I'm trying to find the correct placement of images inside a container relative to the container and to eachother in order to provide colision detection and do some other useful stuff. Right now, lest imagine there is an HTML like:
<div id="imagesContainer">
<div id="image1" ><img src="image1.png" /></div>
<div id="image2" ><img src="image2.png" /></div>
<div id="image3" ><img src="image3.png" /></div>
</div>
and some JavaScript code on document ready:
var positions = {}; // should already contain some x,y pairs of other dragged imagges
$('#imagesContainer div').draggable({
cursor: 'crosshair',
drag: function(event){
var id = // get the draggable's id
positions[id].x = //find the x of the draggable
positions[id].y = //find the y of the draggable
// do calculations on the positions
} // drag:
});
What are the true or correct values for the x and y coordinates of the div's relevant to the top left corner of their container, and how to set them and get them for future use (saving/restoring from database, etc.)?
I think (according to this page) that the position should be available as
$('your element').data('draggable').offset
Inside the drag callback you should be able to do
$('your element').draggable({
drag: function(event, ui) {
//Here you have available ui.position.top and ui.position.left
}
});
Remember that position uses coordinates relative the parent element and offset relative to the page. Of course you can switch between the two by adding or subtracting the parent coordinates (relative to the page).
As for saving and restoring positions in the database, you can use the AJAX methods of jQuery, and is a completely different problem.
I have an image with a click event handler that captures the location where you clicked.
$("#image").click(function(e)
{
var x = e.pageX - $(this).offset().left;
var y = e.pageY - $(this).offset().top;
});
I want it so that when the image is clicked an image appears at that location on top of the image. How do I do this?
Use absolute positioning and the top and left CSS attributes to place the image over the co-ordinates you calculate.
If the image you want to position is as below:
<img id="move-me" style="position:absolute;display:none;z-index:99" src="/somewhere.jpg"/>
Have the following procedure in your code:
$('#move-me').css({
left: x-coord,
top: y-coord
}).show();
The z-index property ensures the image is shown overlays all other elements on the page...