How can I create a mouse-over popup?

Doc February 26, 2010
Pinterest Stumbleupon Whatsapp

How can I create a popup of an image when you mouse over a graphic?

  1. Raja
    January 24, 2012 at 12:50 pm

    where is ur code

  2. Taty
    February 27, 2010 at 4:22 am

    Hi Doc
    There are two ways in which you can do it. Javascript pop ups or Ajax. Javascript will open a separate window, which you can size as you wish. Ajax will open the image withotu creating another browser window.
    For Javascript you can use the following script on the body:

    <!--
    // This is the function that will open the
    // new window when the mouse is moved over the link
    function open_new_window()
    {
    new_window = open("","hoverwindow","width=300,height=200,left=10,top=10");

    // open new document
    new_window.document.open();

    // Text of the new document
    // Replace your " with ' or " or your document.write statements will fail
    new_window.document.write("JavaScript New Window");
    new_window.document.write("");
    new_window.document.write("This is a new html document created by JavaScript ");
    new_window.document.write("statements contained in the previous document.");
    new_window.document.write("");
    new_window.document.write("");

    // close the document
    new_window.document.close();
    }

    // This is the function that will close the
    // new window when the mouse is moved off the link
    function close_window()
    {
    new_window.close();
    }

    // -->

    Open Hover Window

    For Ajax, it depends a lot on how you want it done. I suggest just using an already built Ajax photo album. Where do you intend on using that feature? A store? An album? a persona site?