Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2003
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Repeating the same mouseover affect with multiple images on the same page

    I have multiple thumnail pictures that when I mouseover, I want to popup a new page with the larger photo as well as a discription of the photo. I have set this up on 14 pictures in the same html document. Unfortunately I have two problems.

    1. Onload a window pops up with a larger image of the first thumbnail that I setup to do the mouseover effect.
    2. When you mouseover the thumbnails, everyone opens the page for the last thumbnail on the page. (pictures 1-14 all open the html for #14)

    The page location is: http://www.thejacksonempire.com/blizzard.html

    I will post the code for a few of the images, as posting the whole page would be too long. There are three tables with four or five thumbnails in each table. This is the code for one of the tables.

    <TABLE border=0 cellpadding=6 cellspacing=0 width=175>
    <TR valign=TOP colspan=3>
    <TD BGCOLOR="333333">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function window()
    {
    window1=open("d_rback.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
    }
    //-->
    </SCRIPT>
    <a href="d_rback.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/d_rback.gif" width="100" height="75">
    </a> </TD>
    <TD></TD>
    <TD BGCOLOR="333333">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function window()
    {
    window1=open("m_back.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
    }
    //-->
    </SCRIPT>
    <a href="m_back.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/m_back.gif" WIDTH="100" height="75">
    </a> </TD>
    <TD></TD>
    <TD BGCOLOR="333333">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function window()
    {
    window1=open("m_back1.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
    }
    //-->
    </SCRIPT>
    <a href="m_back1.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/m_back1.gif" WIDTH="100" height="75">
    </a> </TD>
    <TD></TD>
    <TD BGCOLOR="333333">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function window()
    {
    window1=open("m_closeback.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
    }
    //-->
    </SCRIPT>
    <a href="m_closeback.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/m_closeback.gif" WIDTH="100" height="75">
    </a> </TD>
    <TD></TD>
    <TD BGCOLOR="333333">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function window()
    {
    window1=open("m_rback.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
    }
    //-->
    </SCRIPT>
    <a href="m_rback.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/m_rback.gif" width="100" height="75">
    </a> </TD>
    </TR>
    </TABLE>
    <br>
    <TABLE border=0 cellpadding=6 cellspacing=0 width=175>
    <TR valign=TOP colspan=3>
    <TD BGCOLOR="333333">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function window()
    {
    window1=open("m_wayback.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
    }
    //-->
    </SCRIPT>
    <a href="m_wayback.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/m_wayback.gif" width="100" height="133">
    </a> </TD>
    <TD></TD>
    <TD BGCOLOR="333333">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function window()
    {
    window1=open("path1.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
    }
    //-->
    </SCRIPT>
    <a href="path1.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/path1.gif" WIDTH="100" height="75">
    </a> </TD>
    <TD></TD>
    <TD BGCOLOR="333333">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function window()
    {
    window1=open("path2.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
    }
    //-->
    </SCRIPT>
    <a href="path2.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/path2.gif" WIDTH="100" height="75">
    </a> </TD>
    <TD></TD>
    <TD BGCOLOR="333333">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function window()
    {
    window1=open("pkinglot.html","Blizzard2003","toolbar=no,scrollbars=no,width=620,height=415");
    }
    //-->
    </SCRIPT>
    <a href="pkinglot.html" onMouseOut="window1.close()"; onMouseOver="window(); return true;"><img src="images/blizzard/Thumbnail/pkinglot.gif" WIDTH="100" height="75">
    </a> </TD>
    </TR>
    </TABLE>

    Do I need to change the "Blizzard2003" part to be different for each thumbnail? Or do I need to change the window # for each thumbnail? Or is there a completely different fix for this?


    Thank you in advance for your assistance. Please let me know if I can provide any further information to help you help me.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, you need to learn about parameters.

    Each "window" function you wrote overwrote the previous, which is why all of your links used that version.

    In the <head>
    Code:
    <script type="text/javascript">
        function imageWindow( url )
        {
            var imageWin = window.open( url, 'imageWin', 'width=620,height=415' );
            imageWin.focus();
            return false;
        }
    </script>
    Then, in your HTML
    Code:
    <a href="d_rback.html" onclick="return imageWindow( this.href );">
        <img src="images/blizzard/Thumbnail/d_rback.gif" width="100" height="75">
    </a>
    I highly advise against doing this with mouse over/out events. It will be very taxing on the browser, and somewhat counterintuitive, even to a moderately advanced user.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #3
    New to the CF scene
    Join Date
    Jul 2003
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much for your help. I can understand about the java taxing the page/reseources. I originally was looking for a script/applet that I could use where when you moused over the thumbnail it opened the picture in the top spot (there is already a large picture there) but I wasn't able to find anything that I saw I could manipulate to do what I want.

    I may drop the whole Idea and just have the thumbnails be plain links. I just figured all the "back" would get annoying.

    Thank you again for your assistance


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •