SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Small image gallery problems

    Hi all,
    I have an "image gallery". I have four links that go to external pages, not defined yet, and one main image. When rolling over each link, the main image should change to the corresponding one. When I take the javascript and meat of the html out of context it works. When I use it on this page where it is supposed to be used, it does not work. The error console tells me my functions (switch_One() etc.) are not defined. Any help would be greatly appreciated.

    Code JavaScript:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>SacWide Web Design and Development</title>
      <link rel="stylesheet" href="style.css" type="text/css" />
     
    <script language="javascript" type="text/javascipt">
     
     
    function switch_One()
    {
    	document.images["imageflip"].src = "bigmaroonfun.gif";
    }
     
    function switch_Two()
    {
    	document.images["imageflip"].src = "lightneasy.gif";
    }
     
    function switch_Three()
    {
    	document.images["imageflip"].src = "greenwave.gif";
    }
     
    function switch_Four()
    {
    	document.images["imageflip"].src = "onthereef.gif";
    }
    </script>
    </head>
    <body>
      <div id="wrapper">
        <div id="header">
        </div><!-- HEADER -->
       <div id="main">
        <div id="leftbar">
          <ul id="navlist">
             <li><a href="home.html">Home</a></li>
             <li><a href="information.html">Information</a></li>
             <li><a href="services.html">Services</a></li>
             <li><a href="aboutus.html">About Us</a></li>
             <li><a href="creations.html">Creations</a></li>
             <li><a href="faq.html">FAQ</a></li>
          </ul>   
        </div><!-- LEFTBAR -->
        <div id="content">
     
    <h3>Templates</h3>
          <div id="templates">
        <table>
           <tr>
             <td>
     
            <a href="" class="thelinks" onMouseOver="switch_One()">Big Maroon Fun</a>
     
            <a href="" class="thelinks" onMouseOver="switch_Two()">Light N' Easy</a>
     
    	 <a href="" class="thelinks" onMouseOver="switch_Three()">Green Wave</a>
     
    	 <a href="" class="thelinks" onMouseOver="switch_Four()">On The Reef</a>
              </td>
              <td>      
     
                 <img name="imageflip" src="bigmaroonfun.gif"  />  
              </td>
             </tr>
          </table>      
          </div><!-- TEMPLATES -->
     
         </div><!-- CONTENT -->
        <div id="clearone">&nbsp;</div>
       </div><!-- MAIN -->
        <div id="footer">
     
        </div><!-- FOOTER --> 
       </div><!-- WRAPPER -->
    </body>
    </html>

  2. #2
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    got it

    OK, not sure why it didnt work inline, but I moved the functions to an external file and now it works. No help needed.

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by boneyendoplasm View Post
    OK, not sure why it didnt work inline,

    <script language="javascript" type="text/javascipt">
    I am.
    Tab-indentation is a crime against humanity.

  4. #4
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    oopsy

    Thanks for the input.


Bookmarks

Posting Permissions

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