SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Roll Overs

  1. #1
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Roll Overs

    I have a question about using onMouseOver.
    I was just messing around one night trying to make my own mouseover script instead of going to a site to get it and i found that
    PHP Code:
    <script language="javascript">
      <!--
        function 
    roll(imgNameimgURL) {
            if (
    document.images) {
                
    imgName.src imgURL;
            }
        }
      -->
    </script>

    <img src="images/menu/main.gif" onMouseOver="roll(this,'images/menu/main_o.gif');" onMouseOut="roll(this,'images/menu/main.gif');" border="0"> 
    works fine instead of using
    PHP Code:
    Image1 = new Image(42,151)
    Image1.src "image.jpg"

    <a href="page.html" onMouseOver="if(document.images) document.image.src='image.jpg';" onMouseOut="if(document.images) document.image.src=image1.jpg';" >
    <
    img name="image" SRC="image1.jpg" width="190" height="69" border="0"></a
    Does the second one work better or something? That is what I find everytime I look at the script. And I also see scripts using MM_swapimage().

  2. #2
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They'll both work. The advantage to the second one is that you are preloading the images, so the rollover will be seamless. If you are dealing with small or cached images and a fast connection, you might not notice a difference between the two but if you are dealing with bigger images, you will notice a delay the first time the rollover happens.

    MM_swapimage() is a function written by macromedia fireworks or macromedia dreamweaver to do rollovers.

  3. #3
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the 2nd one works better as it allows for preloading.

    PHP Code:

    <HTML>
    <
    HEAD>
    <
    TITLEPreloading Images </TITLE>
    <
    SCRIPT LANGUAGE="JavaScript">
    <!-- 
    Hide from older browsers

    var first_off = new Image();
    first_off.src "off1.gif";
    var 
    first_on = new Image();
    first_on.src "on1.gif";

    var 
    second_off = new Image();
    second_off.src "off2.gif";
    var 
    second_on = new Image();
    second_on.src "on2.gif";

    var 
    third_off = new Image();
    third_off.src "off3.gif";
    var 
    third_on = new Image();
    third_on.src "on3.gif";

    function 
    activate(imgName) {
      if ( eval(
    imgName "_on.complete") ) {
        
    document.images[imgName].src = eval(imgName "_on.src");
      }
    }

    function 
    deactivate(imgName) {
      if ( eval(
    imgName "_off.complete") ) {
        
    document.images[imgName].src = eval(imgName "_off.src");
      }
    }

    // End script hiding -->
    </SCRIPT>
    </HEAD>
    <BODY>
    <A HREF="javascript:void(0)" onMouseOver="activate('first')" onMouseOut="deactivate('first')"><IMG SRC="off1.gif" ALIGN="TOP" WIDTH="70" HEIGHT="30" BORDER="0" NAME="first"></A>

    <A HREF="javascript:void(0)" onMouseOver="activate('second')" onMouseOut="deactivate('second')"><IMG SRC="off2.gif" ALIGN="TOP" WIDTH="70" HEIGHT="30" BORDER="0" NAME="second"></A>

    <A HREF="javascript:void(0)" onMouseOver="activate('third')" onMouseOut="deactivate('third')"><IMG SRC="off3.gif" ALIGN="TOP" WIDTH="70" HEIGHT="30" BORDER="0" NAME="third"></A>
    </BODY>
    </HTML> 
    sitepoint has this covered

  4. #4
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah so like if I wanted to preload the images i should use the second one but the first one works just as fine? Either way I was just wondering.

  5. #5
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the code which i posted is actually better but the top section simply preloads the images.

    basically the images are stored in an array then called on mouseover etc to replace the image


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
  •