SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to CSS picture fade in-out

    I'm flabbergasted that I was able to get this to work.

    Now - is there a way (simple way) to have the pictures fade in and out?

    Right now it is instantaneous, kind of abrupt. I prefer subtle.

    Any ideas . . .

    Thanks . . . Rick

    Hmmmmmmmmm . . . maybe this should be under JavaScript the forum?


    Code:
    <!--picture program starts here-->
    <script type="text/javascript">
    <!--loads pics in cache-->
    var image1=new Image()
    image1.src="c:/mydesign/css/images/hpcdmview.png"
    var image2=new Image()
    image2.src="c:/mydesign/css/images/hpbalislferry.png"
    var image3=new Image()
    image3.src="c:/mydesign/css/images/hphhhome.png"
    var image4=new Image()
    image4.src="c:/mydesign/css/images/hpcdcfairway.png"
    var image5=new Image()
    image5.src="c:/mydesign/css/images/hpcdmmodern.png"
    var image6=new Image()
    image6.src="c:/mydesign/css/images/hpdph.png"
    var image7=new Image()
    image7.src="c:/mydesign/css/images/hpmainsthb.png"
    var image8=new Image()
    image8.src="c:/mydesign/css/images/hpnptpier.png"
    var image9=new Image()
    image9.src="c:/mydesign/css/images/hpnpthbrdocks.png"
    var image10=new Image()
    image10.src="c:/mydesign/css/images/hpnptbchhome.png"
    
    </script>
    </head>
    
    <body>
    <div class="plate"><img src="c:/mydesign/css/images/hpcdmlookoutp.png" name="slide" width="800" height="320" /></div>
    <script>
    
    //variable that will increment through the images
    var step=1
    function slideit(){
    //if browser does not support the image object, exit.
    if (!document.images)
    return
    document.images.slide.src=eval("image"+step+".src")
    if (step<10)
    step++
    else
    step=1
    //call function "slideit()" every 6 seconds
    setTimeout("slideit()",6000)
    }
    slideit()
    </script>

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,813
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    CSS3 allows for transitions, which could be tweaked .. but control would be HELL and you would lose support for any browser that doesnt support transitions. Other than that , this should be moved to .js.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Moved to js Forum.

  4. #4
    SitePoint Member Serj's Avatar
    Join Date
    Nov 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is easily done with jquery fadeIn(), fadeOut() functions, not realistic to do in CSS

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dresden . . .

    I'll post over at the Java forum.

    I've uploaded all of my pictures, html pages and now have only one css page for the three html pages. Before I kept making a new css page for each .html page.

    All works except the images are not showing. on the index.html page.

    Is there something I need to upload regarding javaScript?

    Thanks . . . Rick

    I've uploaded all images in the

  6. #6
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Thanks Dresden . . .

    I'll post over at the Java forum.

    I've uploaded all of my pictures, html pages and now have only one css page for the three html pages. Before I kept making a new css page for each .html page.

    All works except the images are not showing. on the index.html page.

    Is there something I need to upload regarding javaScript?

    Thanks . . . Rick

    I've uploaded all images in the
    Oh . . . the site is www.propertieswithstyle.com

    I've researched on the Internet Highway and the internal javaScript (in the index.html page) should execute fine as it does on my computer. All of the pictures rotate well.

    Thanks . . . Rick

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Thanks Dresden . . .

    I'll post over at the Java forum.

    I've uploaded all of my pictures, html pages and now have only one css page for the three html pages. Before I kept making a new css page for each .html page.

    All works except the images are not showing. on the index.html page.

    Is there something I need to upload regarding javaScript?

    Thanks . . . Rick

    I've uploaded all images in the
    You are still referencing the images on your local c drive.
    image1.src="c:/mydesign/css/images/hpcdmview.png"
    Change the address to their new online location. You should use relative paths (or root relative paths) to avoid that happening in the future - assuming you upload the site in the same structure.

  8. #8
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You are still referencing the images on your local c drive.


    Change the address to their new online location. You should use relative paths (or root relative paths) to avoid that happening in the future - assuming you upload the site in the same structure.
    Ahhhhhh . . . . .

    so . . . like this

    image1.src="/mydesign/css/images/hpcdmview.png" ?

    or

    image1.src="mydesign/css/images/hpcdmview.png" ?

    Rick

  9. #9
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay I tried the following . . .

    var image1=new Image()
    image1.src="../mydesign/css/images/hpcdmview.png"


    image1.src="/mydesign/css/images/hpcdmview.png"

    image1.src="mydesign/css/images/hpcdmview.png"

    All three failed.

    Maybe it should be . . .

    image1.src="../css/images/hpcdmview.png" ?

    Rick

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Ahhhhhh . . . . .

    so . . . like this

    image1.src="/mydesign/css/images/hpcdmview.png" ?
    It depends where you have placed the images. The above backslash at the start will assume that the path is relative to the root directory.

    or

    image1.src="mydesign/css/images/hpcdmview.png" ?

    Rick
    That will assume the path is relative to the location of the html page that calls it.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You don't even have a folder called mydesign on your server so how can you find an image in there

    Your image is here:

    http://www.propertieswithstyle.com/c.../hpcdmview.png

    So you could just use this:

    Code:
    image1.src="css/images/hpcdmview.png"
    etc..

  12. #12
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok . . . got it.

    What worked was . . .

    image1.src="../css/images/hpcdmview.png"

    It's really difficult for me to see all if this it is so new. I've had a page fail because I did close a div </div> I forgot the "/"

    Thanks Paul . . . Rick

  13. #13
    SitePoint Zealot
    Join Date
    Mar 2006
    Location
    High Wycombe UK.
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use an animated gif - they can have alpha transparency, just switch the SRC on :hover
    Never stop kicking me.


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
  •