Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Can a mouseover be slowed down or faded in/out

    Hi Guys thanks for helping me with this.
    I have a picture and when a mouseover happens it switches to another but can it be slowed to a fade in/out that is more gracefull?

    Code:
    <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="701" HEIGHT="303">
    
    <TR>
    <TD ROWSPAN="1" COLSPAN="1" WIDTH="334" HEIGHT="142">
    	<A HREF="#"  onMouseOver="if(document.images) document.test4z0.src='mechy1zzz_1x1.gif';" 
    		 onMouseOut="if(document.images) document.test4z0.src='back_1x1.gif';" 
    		><IMG NAME="test4z0" SRC="test4z_1x1.gif" WIDTH="334" HEIGHT="142" BORDER="0"></A></TD>
    <TD ROWSPAN="1" COLSPAN="1" WIDTH="367" HEIGHT="142">
    	<A HREF="#"  onMouseOver="if(document.images) document.test4z1.src='port5z_1x2.gif';" 
    		 onMouseOut="if(document.images) document.test4z1.src='back_1x2.gif';" 
    		><IMG NAME="test4z1" SRC="test4z_1x2.gif" WIDTH="367" HEIGHT="142" BORDER="0"></A></TD>
    </TR>
    
    <TR>
    <TD ROWSPAN="1" COLSPAN="1" WIDTH="334" HEIGHT="161">
    	<A HREF="#"  onMouseOver="if(document.images) document.test4z2.src='awards1zz_2x1.gif';" 
    		 onMouseOut="if(document.images) document.test4z2.src='back_2x1.gif';" 
    		><IMG NAME="test4z2" SRC="test4z_2x1.gif" WIDTH="334" HEIGHT="161" BORDER="0"></A></TD>
    <TD ROWSPAN="1" COLSPAN="1" WIDTH="367" HEIGHT="161">
    	<A HREF="#"  onMouseOver="if(document.images) document.test4z3.src='elecy1zz_2x2.gif';" 
    		 onMouseOut="if(document.images) document.test4z3.src='back_2x2.gif';" 
    		><IMG NAME="test4z3" SRC="test4z_2x2.gif" WIDTH="367" HEIGHT="161" BORDER="0"></A></TD>
    </TR>
    
    </TABLE>

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by norzar2 View Post
    I have a picture and when a mouseover happens it switches to another but can it be slowed to a fade in/out that is more gracefull?
    To blend one image into another using opacity, requires that the images be overlaid, which while possible would complicate the HTML.
    A simpler solution would be to ramp down the opacity of the original image to around say 20%, swap to the alternate image then ramp the opacity back to 100%. This effect softens the transition between images without overlaying them. You can see a slideshow example here, although for rollovers I would use a higher transition rate.

    Whatever you do, the code you have in place is unnecessarily complicated.

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Sorry, the example I posted has problems so I removed it for now
    Last edited by Mr J; 05-18-2007 at 11:39 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Maybe this is what you are looking for? http://www.dynamicdrive.com/dynamici...hlightgrad.htm
    Last edited by _Aerospace_Eng_; 05-19-2007 at 12:36 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    I think I've ironed out the glitch, take a look, see what you think

    http://www.huntingground.freeserve.c...y/imgfade2.htm
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #6
    New Coder
    Join Date
    Nov 2006
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks Arty, Mr J and _Aerospace_ that was all really really helpfull
    And the examples exceeded my original idea 10 fold
    CF is a great place


  •  

    Posting Permissions

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