www.webdeveloper.com
+ Reply to Thread
Results 1 to 8 of 8
  1. 01-24-2006 08:56 AM #1
    Ezzarian
    Ezzarian is offline Registered User
    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?
    Reply With Quote Reply With Quote
  2. 01-24-2006 09:18 AM #2
    JPnyc's Avatar
    JPnyc
    JPnyc is offline Registered User
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    Yep, that's right. That's where the path to your images goes.
    Reply With Quote Reply With Quote
  3. 01-25-2006 09:12 AM #3
    Ezzarian
    Ezzarian is offline Registered User
    Join Date
    Jan 2006
    Posts
    7
    So how do I make the image appear?
    Reply With Quote Reply With Quote
  4. 01-25-2006 09:46 AM #4
    juicemousezero's Avatar
    juicemousezero
    juicemousezero is offline quiet down
    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.
    Reply With Quote Reply With Quote
  5. 01-25-2006 02:36 PM #5
    frencam
    frencam is offline Web Researcher
    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.
    Reply With Quote Reply With Quote
  6. 02-21-2006 07:09 AM #6
    Ezzarian
    Ezzarian is offline Registered User
    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
    Reply With Quote Reply With Quote
  7. 02-23-2006 06:38 PM #7
    focusf1
    focusf1 is offline Registered User
    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?
    Reply With Quote Reply With Quote
  8. 02-24-2006 11:10 PM #8
    Ezzarian
    Ezzarian is offline Registered User
    Join Date
    Jan 2006
    Posts
    7
    That's exactly what I get! (T_T)
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

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

     

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

Forum Rules

 HTML5 Development Center



Recent Articles