www.webdeveloper.com
Results 1 to 8 of 8

Thread: Flipping Images!

  1. #1
    Join Date
    Jan 2006
    Posts
    7

    Flipping Images!

    I don't really get this flipping thing:
    <SCRIPT LANGUAGE="JavaScript">
    <!-- hide from none JavaScript Browsers
    Image1= new Image(75,50)
    Image1.src = "goof3.gif"
    Image2 = new Image(75,50)
    Image2.src = "goof4.gif"

    function SwapOut() {
    document.imageflip.src = Image2.src; return true;
    }

    function SwapBack() {
    document.imageflip.src = Image1.src; return true;
    }

    // - stop hiding -->
    </SCRIPT>

    I mean this part:
    Image1= new Image(75,50)
    Image1.src = "goof3.gif"
    Image2 = new Image(75,50)
    Image2.src = "goof4.gif"

    Are we supposed to put our image URLs where the "goof"s are or something?

  2. #2
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    Yep, that's right. That's where the path to your images goes.

  3. #3
    Join Date
    Jan 2006
    Posts
    7
    So how do I make the image appear?

  4. #4
    Join Date
    May 2005
    Location
    Usa
    Posts
    97
    Instead of

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    <!-- hide from none JavaScript Browsers
    Image1= new Image(75,50)
    Image1.src = "goof3.gif"
    Image2 = new Image(75,50)
    Image2.src = "goof4.gif"
    Put something like

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    <!-- hide from none JavaScript Browsers
    Image1= new Image(75,50)
    Image1.src = "images/menu1.gif"
    Image2 = new Image(75,50)
    Image2.src = "images/menu2.gif"
    Or whatever the directory is where you keep the images you're wanting to swap the current image out for.

  5. #5
    Join Date
    Jan 2006
    Posts
    11
    Another thing, it would be easier if you resize and optimize your image to be 75 X 50 before using them because this code will resize your image which could be larger than it need to be making it load slower. It may also distort your image if it's not presized correctly. Just something else to consider.

  6. #6
    Join Date
    Jan 2006
    Posts
    7
    I got the first one workin', but when I try to get another button on the page, I change to name of the Flip and I get problems with the buttons! O.o

  7. #7
    Join Date
    Feb 2006
    Posts
    3
    Quote Originally Posted by Ezzarian
    I got the first one workin', but when I try to get another button on the page, I change to name of the Flip and I get problems with the buttons! O.o
    I get the same...only its always the last image rollover that works, but when I hover over any of the others they only affect the last one I've put on there.

    Here is the script I have been using:
    <!--webbot bot="HTMLMarkup" startspan --><body><SCRIPT LANGUAGE="JavaScript">
    <!-- hide from none JavaScript Browsers
    Image1= new Image(150,30)
    Image1.src = "home_01.jpg"
    Image2 = new Image(150,30)
    Image2.src = "home_01-over.jpg"

    function SwapOut() {
    document.imageflip1.src = Image1.src; return true;
    }

    function SwapBack() {
    document.imageflip1.src = Image2.src; return true;
    }

    // - stop hiding -->
    </SCRIPT>
    <A HREF="index.htm" onMouseOver="SwapOut()" onMouseOut="SwapBack()">
    <IMG NAME="imageflip1" SRC="home_01.jpg" WIDTH=150 HEIGHT=30 BORDER=0></A></body><!--webbot
    bot="HTMLMarkup" endspan -->
    <!--webbot bot="HTMLMarkup" startspan --><!--webbot bot="HTMLMarkup" endspan -->

    </td>
    </tr>
    <tr>
    <td width="150">
    </td>
    </tr>
    <tr>
    <td width="150">
    </td>
    </tr>
    <tr>
    <td width="150"><!--webbot bot="HTMLMarkup" startspan --><body><SCRIPT LANGUAGE="JavaScript">
    <!-- hide from none JavaScript Browsers
    Image3= new Image(150,30)
    Image3.src = "2006_01.jpg"
    Image4 = new Image(150,30)
    Image4.src = "2006_01-over.jpg"

    function SwapOut() {
    document.imageflip2.src = Image4.src; return true;
    }

    function SwapBack() {
    document.imageflip2.src = Image3.src; return true;
    }

    // - stop hiding -->
    </SCRIPT>
    <A HREF="2006page.htm" onMouseOver="SwapOut()" onMouseOut="SwapBack()">
    <IMG NAME="imageflip2" SRC="2006_01.jpg" WIDTH=150 HEIGHT=30 BORDER=0></A></body><!--webbot
    bot="HTMLMarkup" endspan -->


    Where am I going wrong?

  8. #8
    Join Date
    Jan 2006
    Posts
    7
    That's exactly what I get! (T_T)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles