Jump to content

pop up image in javascript

Parin

By Parin
in Website Management and Coding

 Share

Recommended Posts

  • 3 weeks later...
MrFish Newbie

MrFish

Posted
Posted

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 :P

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...