pop up image in javascript

Parin · September 14, 2009

can i please know how to create a pop up image which just pops up when i mouseover it and when i mouseout it just disappers can i please know the code?

Mokothemonkey · September 14, 2009

can i please know how to create a pop up image which just pops up when i mouseover it and when i mouseout it just disappers can i please know the code?

Have you tried The Oracle?

Wizard · September 14, 2009

can i please know how to create a pop up image which just pops up when i mouseover it and when i mouseout it just disappers can i please know the code?
Have you tried The Oracle?

Don't steal my bit.

Byron · September 15, 2009

Have you tried The Oracle?
Don't steal my bit.

Imitation is the most sincere form of flattery.

MrFish · October 5, 2009

For what you are asking you are going to need to use javascript. If you knew how to use javascript you probably wouldn't be asking this question so while you go to w3schools and read up on it I'll just give you the steps to do this.

The html:

<body>
    <div id="wrapper">
        <img src="image.jpg" id="image" onMouseOver="displayImage()" onMouseOut="removeImage()">
        <br /> Hover To Enlarge
    </div>
    <div id="hoverImage">
        <img src="image.jpg">
    </div>
</body>

The java script:

<script type="text/javascript">
    function displayImage(){
        var button = document.getElementById("image");
        var image = document.getElementById("hoverImage").style;
        left = button.offsetLeft + 100;
        top = button.offsetTop;
        top = top + 100 + "px";
        image.visibility = "visible";
        image.top = top;
        image.left = left;
    }
    function removeImage(){
        var image = document.getElementById("hoverImage").style;
        image.visibility = "hidden";
    }
</script>

The CSS:

    #image{
        width: 100px;
        height: 100px;
        cursor: pointer;
    }
    #hoverImage{
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 2;
        visibility: hidden;
        
    }
    #wrapper{
        width: 100px;
        height: 100px;
        margin: 200px auto;
        text-align: center;
        font-size: 10px;
        color: #555;
    }

I don't know how you want it to look but it will enlarge it and place it to the bottom right of the original image. Nothing fancy but you can go from there.

Full code; Copy can paste this in notepad, save it as an html file anywhere to your computer, and place an image (larger then 100px by 100px) in the same directory with the name image.jpg .

<html>
<head>
<style type="text/css">
    #image{
        width: 100px;
        height: 100px;
        cursor: pointer;
    }
    #hoverImage{
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 2;
        visibility: hidden;
        
    }
    #wrapper{
        width: 100px;
        height: 100px;
        margin: 200px auto;
        text-align: center;
        font-size: 10px;
        color: #555;
    }
</style>
<script type="text/javascript">
    function displayImage(){
        var button = document.getElementById("image");
        var image = document.getElementById("hoverImage").style;
        left = button.offsetLeft + 100;
        top = button.offsetTop;
        top = top + 100 + "px";
        image.visibility = "visible";
        image.top = top;
        image.left = left;
    }
    function removeImage(){
        var image = document.getElementById("hoverImage").style;
        image.visibility = "hidden";
    }
</script>
</head>
<body>
    <div id="wrapper">
        <img src="image.jpg" id="image" onMouseOver="displayImage()" onMouseOut="removeImage()">
        <br /> Hover To Enlarge
    </div>
    <div id="hoverImage">
        <img src="image.jpg">
    </div>
</body>
</html>

Image I used: http://i.zdnet.com/blogs/firefox_.jpg

Preview:

Haha, by the way. You can see I have this site bookmarked, I'm waiting to try and get hosting

Sign In

pop up image in javascript

Recommended Posts

Parin

Mokothemonkey

Wizard

Byron

MrFish

Create an account or sign in to comment

Create an account

Sign in

HelioHost

Donate

Forums

Activity