Popup image does not stay in same place

The pop up image for "ice white" and "violet" pop up in different place开发者_如何学Cs. How do I make them both pop up in just one position?

Could you perhaps define a single div that uses absolute position and then on hover over Violet or Ice White, draw the popup image inside that div you created?

So something like:

var displayDiv = document.getElementById("displayDivID");

// draw popup image in the div
displayDiv.innerHTML = "<div id=\"violet\">...</div>";
displayDiv.style.display = "block"; // to show it

That way, whenever you need to display an image in the same position, it's always drawn inside that div you specified.

I would assume you have a class that controls the formatting of that div like position and borders etc.

EDIT

I've taken your code from your site and added some more code.

Save this code as a html page onto your computer and try it.

Look for the last css code snippet right before the closing tag. That block of css there controls the look of the div and position it in the middle of the page. The css only sets a fixed position. You could alternatively, use javascript to dynamically calculate the width and height of the user's browser window, then render the css code accordingly so the div is always in the middle of the browser regardless of the inner image dimension.

In your previous javascript code snippet for the displayDiv, I've fixed up a few things and added two functions for when the mouse is over a thumbnail and when it's out of a thumbnail. On mouse over will pass the url of the image to the function that will be used to render an image into the displayDiv.

Hope that helps.

EDIT 2 - Fade In and Out

You certainly can.

All you need to do is change the two functions to use jQuery fadeIn() and fadeOut() like so:

function changeDisplay(bgImageURL)
{
    var displayDiv = document.getElementById("displayDiv");

    // draw popup image in the div
    displayDiv.innerHTML = 
    '<a class="popup1" href="#v"><img src="' + bgImageURL+ '" alt="" /></a>';

    // show the display in case it was hidden before    
    $('#displayDiv').fadeIn();
}

function hideDisplay()
{   
    // hide it when the mouse rolls off the thumbnail
    $('#displayDiv').fadeOut();
}

This jQuery is a basic one. It will have a problem where if you move your mouse on and off the thumbnail quickly, it causes the display div to come on and off, on and off, on and off even if your mouse is already off the thumbnail.

The proper way would be to rework the code and use mouseEnter and mouseLeave on the thubmnail elements.