SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    ********* Poet X Q mano's Avatar
    Join Date
    Oct 2002
    Location
    Still Thulcandra
    Posts
    997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with a simple rollover...

    Hi,

    I've been making a rather simple site. The navigation was supposed to use rollover, and they were working fine.

    I made some alterations, and all of a sudden it starts to freak out a little...

    On the pages that I made the alterations today, they don't work, on the ones I changed yesterday, they work...

    The ones that doesn't work looks something like this:

    Image8= new Image(80,60)
    Image8.src = "images/button04h.jpg"
    Image9= new Image(80,60)
    Image9.src = "images/button05.jpg"
    Image10= new Image(80,60)
    Image10.src = "images/button5h.jpg"

    function SwapOut4() {
    document.imageflip4.src = Image8.src; return true;
    }

    function SwapBack4() {
    document.imageflip4.src = Image7.src; return true;
    }

    function SwapOut5() {
    document.imageflip5.src = Image10.src; return true;
    }

    function SwapBack5() {
    document.imagflip5.src = Image9.src; return true;

    And in the actual page I have this:

    <a href=index.htm OnMouseOver="SwapOut4()" OnMouseOut="SwapBack4()">
    <img name=imageflip4 width=80 height=60 src=images/button04.jpg alt="Til Forsiden">
    </a>

    <a href=omoss.htm OnMouseOver="SwapOut5()" OnMouseOut="SwapBack5()">
    <img name=imageflip5 width=80 height=60 src=images/button05.jpg alt="Om Skap en forandring">
    </a>

    I get the message that "object expected" or something in the first line of the <a> tags...

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, first things that I notice are:

    There's no closing "}" on SwapBack5(), although you may have just missed copying it when pasting it here.

    However, there's a typo in that function too which refers to imagflip5 instead of imageflip5.

    I've not tried creating graphics with the names that you use to actually test it visually, but it no longer gives errors when run if you adjust the above errors.

    In addition, I've changed where you've put "name" to "id" which means that you can use getElementById to refer to the elements which is more browser independent.

    If you follow a naming convention with the graphics e.g. imageon1.gif, imageoff1.gif, imageon2.gif, imageoff2.gif, then there are ways of doing the whole thing in a couple of loops where you increment things automatically rather than having a separate function for each button. I'll have a go at it for you if you're interested and you post the full code.

    Code containing my suggested amendments follows:
    Code:
    <html>
      <head>
        <script language="JavaScript" type="text/javascript">
        <!--
          Image8= new Image(80,60)
          Image8.src = "images/button04h.jpg"
          Image9= new Image(80,60)
          Image9.src = "images/button05.jpg"
          Image10= new Image(80,60)
          Image10.src = "images/button5h.jpg"
    
          function SwapOut4() {
            document.getElementById('imageflip4').src = Image8.src; return true;
          }
    
          function SwapBack4() {
            document.getElementById('imageflip4').src = Image7.src; return true;
          }
    
          function SwapOut5() {
            document.getElementById('imageflip5').src = Image10.src; return true;
          }
    
          function SwapBack5() {
            document.getElementById('imageflip5').src = Image9.src; return true;
          }
        //-->
        </script>
    
      </head>
      <body>
    
        <a href=index.htm OnMouseOver="SwapOut4()" OnMouseOut="SwapBack4()">
          <img id=imageflip4 width=80 height=60 src=images/button04.jpg alt="Til Forsiden">
        </a>
    
        <a href=omoss.htm OnMouseOver="SwapOut5()" OnMouseOut="SwapBack5()">
          <img id=imageflip5 width=80 height=60 src=images/button05.jpg alt="Om Skap en forandring">
        </a>
    
      </body>
    </html>
    Hope that helps,

    Andy
    From the English nation to a US location.


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
  •