Results 1 to 6 of 6

Thread: Fade in images using HTML

  1. #1
    Join Date
    Apr 2005
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Fade in images using HTML

    Hello there,



    I want to recreate this effect (please refresh the page if you missed it- just a fade from white to full Black and Whiite image) using HTML and a single frame jpg (in order to reduce the file size and loading time).

    at the moment it is 254KB!!

    Is it possible?

    Many thanks,
    Ben

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That cannot be done just using HTML. With a some javascript, it can be done, though not all browsers will support the effect and none will without javascript enabled:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    if (document.all||document.getElementById){
    document.write('<style id="tmpStyle" type="text/css">#pic {-moz-opacity:0.00;filter:alpha(opacity=0);opacity:0;-khtml-opacity:0;}<\/style>')
    var objG, degree=fadeAssist=0;
    if (document.all&&typeof document.documentElement!=='undefined')
    document.write('<!--[if GTE IE 5]><script type="text/javascript">fadeAssist=function (obj, degree){try {obj.filters.alpha.opacity=degree}catch(e){obj.style.filter="alpha(opacity="+degree+")"}}<'+'\/'+'script><![endif]-->')
    }
    
    function fadepic(obj){
    objG=obj
    if (!document.getElementById&&!document.all)
    return;
    var tS=document.all? document.all['tmpStyle'] : document.getElementById('tmpStyle')
    if (degree<100){
    degree+=5
    if (objG.filters&&objG.filters[0]&&fadeAssist)
    fadeAssist(objG, degree)
    else if (typeof objG.style.MozOpacity=='string')
    objG.style.MozOpacity=degree/101
    else if (typeof objG.style.KhtmlOpacity=='string')
    objG.style.KhtmlOpacity=degree/100
    else if (typeof objG.style.opacity=='string'&&!objG.filters)
    objG.style.opacity=degree/101
    else
    tS.disabled=true
    setTimeout("fadepic(objG)", 50)
    }
    else
    tS.disabled=true
    }
    
    </script>
    </head>
    <body>
    <img id="pic" onload="fadepic(this);" src="domfade.jpg">
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2005
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks,

    I'll give it a go!

    Ben

  4. #4
    Join Date
    Oct 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Wow! This javascript is amazing!

    The only problem is that you cannot add two images to fade in at the same time...

    <img id="pic" onload="fadepic(this);" src="cd1.jpg">
    <img id="pic" onload="fadepic(this);" src="cd2.jpg">

    I want two different cds to fade in at once.

    How do you do that?

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Twey, from these forums, came up with an object oriented script that accomplishes this same task. The advantage to object oriented scripts is that they can be used as many times as you like on the same page. It is a very different script however but, a good one. It can be found here:

    http://www.twey.co.uk/?q=fading
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Oct 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Seems like the other site is way over-complicated and I dont want to get into all that...

    I think that all I have to do is rename the second picture with a different ID number...but it doesn't seem to work.

    I know its something simple. Just one simple change to this script...


    I sure hope SOMEONE can help me...


    Thanks!

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
  •