javascript - Set position of <div> at runtime

Question

On mouseover I want to move the "imgbox" to a specific absolute position (which might move it on top of the "i" image).

The second image ("newimg") loads, so that part works (including hiding it again in "onmouseout") but it's displayed below everything (like in the HTML code). It seems like setting imgbox.style.left and imgbox.style.top doesn't do anything. If I set "margin" instead, the image is displayed 200px to the right and 200px down from where it originally was (but still below everything else).

What did I miss? How do I move the "imgbox" at runtime with regular Javascript (no JQuery please!)?

function onHoverIn(url) {
    var imgbox = document.getElementById("imgbox");
    imgbox.style.visibility='visible';

    var newimg = document.createElement("img");
    newimg.src = url;

    var oldimg = document.getElementById("i");

    /*if(oldimg.addEventListener){ //Removed so the snippet'll run
        oldimg.addEventListener('mouseout',onHoverOut,false);
    } else {
        oldimg.attachEvent('onmouseout',onHoverOut);
    }*/
    imgbox.innerHTML='';
    imgbox.appendChild(newimg);

    imgbox.style.left = '200px';
    imgbox.style.top = '200px';
    //imgbox.style.marginLeft = '200px';
    //imgbox.style.marginTop = '200px';
}

#imgbox {
    position : absolute;
    border: 1px solid #999;
    background : #FFFFFF; 
    filter: Alpha(Opacity=100);
    visibility : hidden;
    z-index : 50;
    overflow : hidden;
}

<img id="i" src="https://i.pinimg.com/originals/53/02/a4/5302a4c318139bf5753c433b1f4c6aa8.jpg" alt="DP" onmouseover="onHoverIn('https://i.pinimg.com/originals/b2/1b/07/b21b0738ea390fc56a4d3efe76ab88de.jpg')"> 
<p>Long Teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext<br><br><br><br><br>END TEEEEEEEEEEEXT</p>
<div id="imgbox"></div>

question from:https://stackoverflow.com/questions/66063424/set-position-of-div-at-runtime

Answer 1

This was quite a bit harder than I thought it would be, made some changes to your code. Hope this still works for you.

NOTE: I implemented an onHoverOut locally and noticed that when I moved my mouse around on the image it would flicker. This happens because the new image is loaded and once moving again the old image registers a onHoverOut (because you hover on top of the new image) which would then remove the new image, at which point the old image registers the onmouseover again and adds the new image. This would keep looping for as long a you move the mouse around.

function onHoverIn(url) {
    var imgbox = document.getElementById("imgbox");
    imgbox.style.visibility='visible';

    var newimg = document.createElement("img");
    newimg.src = url;

    var oldimg = document.getElementById("i");

    if(oldimg.addEventListener){
        oldimg.addEventListener('mouseout',onHoverOut,false);
    } else {
        oldimg.attachEvent('onmouseout',onHoverOut);
    } 
    //imgbox.innerHTML='';
    imgbox.appendChild(newimg);
}
function onHoverOut() {
    console.log('onHoverOut: not implemented');
}

.article{
    width:640px;
    padding:0 16px;
}
.image-box{
    position:relative;
    width:100%;
    height:0;
    /* 16:9 */
    padding-top:56.25%;
    overflow:hidden;
}
.image-box img{
    position:absolute;
    top:0;
    width:100%;
}

<div class="article">
    <p>content before..</p>
    <div id="imgbox" class="image-box">
        <img id="i" src="https://i.pinimg.com/originals/53/02/a4/5302a4c318139bf5753c433b1f4c6aa8.jpg" alt="DP" onmouseover="onHoverIn('https://i.pinimg.com/originals/b2/1b/07/b21b0738ea390fc56a4d3efe76ab88de.jpg')"> 
    </div>
    <p>content after..</p>
</div>