+ Reply to Thread
Results 1 to 7 of 7

Thread: Tutorial : Fade in images

  1. #1
    Active Member Fabolous05 is on a distinguished road
    Join Date
    Jun 2004
    Location
    Surrey, BC
    Posts
    151

    Tutorial : Fade in images

    This script ads a nice effect especially when you need to put affiliates or buttons that may attract attention way from your content. This way it dulls it out a bit so you can focus on other things but is a nice effect anyways.

    Just add this into the <head> </head> section

    Code:
    <script language="JavaScript1.2">
    function high(which2){
    theobject=which2
    highlighting=setInterval("highlightit(theobject)",50)
    }
    function low(which2){
    clearInterval(highlighting)
    if (which2.style.MozOpacity)
    which2.style.MozOpacity=0.3
    else if (which2.filters)
    which2.filters.alpha.opacity=30
    }
    
    function highlightit(cur2){
    if (cur2.style.MozOpacity<1)
    cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1
    else if (cur2.filters&&cur2.filters.alpha.opacity<100)
    cur2.filters.alpha.opacity+=10
    else if (window.highlighting)
    clearInterval(highlighting)
    }
    </script>
    then insert
    Code:
    style="filter:alpha(opacity=30);-moz-opacity:0.3" onMouseover="high(this)" onMouseout="low(this)"
    anywhere in the <img> and then see what it looks like

    Good Luck

    example, http://members.shaw.ca/bavraj/fade

    don't be afraid to click the button either
    Fabo@VolantaStudios.com
    Head Designer
    Volantą Studios

  2. #2
    Full Member cdingman is on a distinguished road
    Join Date
    Jun 2004
    Location
    South Amboy NJ
    Posts
    96
    Cool effect.

    Not sure what use it has but it sure does look cool.


    Chris Dingman
    Webmaster
    <A HREF="http://www.cabarettheatre.org" target="_blank">Cabaret Theatre</A><BR>
    <A HREF="http://www.twinlightdesigns.com" target="_blank">Twinlight Designs</A>

  3. #3
    Active Member Fabolous05 is on a distinguished road
    Join Date
    Jun 2004
    Location
    Surrey, BC
    Posts
    151
    hold on I'll whip up a little web page and show you what effect it has

  4. #4
    Active Member Fabolous05 is on a distinguished road
    Join Date
    Jun 2004
    Location
    Surrey, BC
    Posts
    151
    K, check out this,
    http://members.shaw.ca/bavraj/
    (just some school stuff)

    see the way those images aren't overpowering if they're hidden like that however it's a nice effect when you go over it.

    these work well for when linking to other sites using those little small rectangle buttons. Say if you have a lot of affiliates and you use those buttons all those images can make your site look busy this way you can calm it down a bit .
    Fabo@VolantaStudios.com
    Head Designer
    Volantą Studios

  5. #5
    Full Member kitty is on a distinguished road
    Join Date
    Aug 2005
    Posts
    16
    it is good code thx

  6. #6
    Full Member sofy600 is on a distinguished road
    Join Date
    Mar 2005
    Posts
    22

    I agree with you completely.

    I agree with you completely.

  7. #7
    Full Member abuzar345 is on a distinguished road
    Join Date
    Dec 2008
    Posts
    10
    nice code but i think the webpage would be heavy to load.

    World of Fun

+ Reply to Thread

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