I'm trying to make an <img> element move to another element (<a>) by first getting the position with getBoundingClientRect() and then to use those values to set the <img> element position on mouseover. But when I check the logs it's just spitting 0's. What am I doing wrong / overlooking?
var clickers = document.querySelectorAll('.clicker');
var imgPreviewEle = document.getElementById('artistPreview');
clickers.forEach(function(clicker) {
clicker.addEventListener('mouseover', function hover() {
var elem = clicker.getBoundingClientRect();
console.log(elem);
imgPreviewEle.style.display = "block";
imgPreviewEle.style.left = elem.left + 300 + 'px';
imgPreviewEle.style.top = elem.top - 300 + 'px';
});
});
clickers.forEach(function(clicker) {
clicker.addEventListener('mouseleave', function hover() {
var elem = clicker.getBoundingClientRect();
console.log(elem);
imgPreviewEle.style.display = "none";
});
});.clicker {
width: 100%;
border-top: 2px solid transparent;
border-bottom: 2px solid rgba(18.4, 31, 31, .5);
}
#artistPreview {
z-index: 1010;
position: fixed;
clip: rect(290px, 600px, 620px, 0px);
}<img id="artistPreview" src="" />
<div class="container">
<ul class="dropdown">
<li onMouseOver="show('A')" onMouseOut="hide('A')">
<a href="javascript:void(0)" style="font-weight: 600;">A</a>
<ul id="A">
<a class="clicker" href="javascript:void(0)">ABBA</a>
</ul>
</li>
</ul>
</div>I made some changes and left some comments. Let me know if you need more info:
var clickers = document.querySelectorAll('.clicker');
var imgPreviewEle = document.getElementById('artistPreview');
// Hide the image from the start
imgPreviewEle.style.display = "none";
clickers.forEach(function(clicker) {
clicker.addEventListener('mouseover', function hover() {
var elem = clicker.getBoundingClientRect();
imgPreviewEle.style.display = "block";
// Make sure the image appears nearby
// Looks like the -300px you had here pushed the image off screen.
imgPreviewEle.style.left = (elem.left + elem.width) + 'px';
imgPreviewEle.style.top = (elem.top + elem.height) + 'px';
console.log(elem);
});
});
clickers.forEach(function(clicker) {
clicker.addEventListener('mouseleave', function hover() {
var elem = clicker.getBoundingClientRect();
console.log(elem);
imgPreviewEle.style.display = "none";
});
});.clicker {
width: 100%;
border-top: 2px solid transparent;
border-bottom: 2px solid rgba(18.4, 31, 31, .5);
}
#artistPreview {
z-index: 1010;
position: fixed;
/* The image should not cover the mouseover field. */
pointer-events: none;
}<! The image will need an SRC to be visible. >
<img id="artistPreview" src="http://placekitten.com/g/80/80" />
<div class="container">
<ul class="dropdown">
<! Removed some event handler refs that did not have definitions in code. >
<li>
<a href="javascript:void(0)" style="font-weight: 600;">A</a>
<ul id="A">
<a class="clicker" href="javascript:void(0)">ABBA</a>
</ul>
</li>
</ul>
</div>