How to CSS picture fade in-out

JavaScript
1

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?

<!--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

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

Moved to js Forum.

4

This is easily done with jquery fadeIn(), fadeOut() functions, not realistic to do in CSS

5

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

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

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

Ahhhhhh . . . . .

so . . . like this

image1.src=“/mydesign/css/images/hpcdmview.png” ?

or

image1.src=“mydesign/css/images/hpcdmview.png” ?

Rick

9

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

It depends where you have placed the images.:slight_smile: 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

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:

So you could just use this:


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

etc…

12

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

Use an animated gif - they can have alpha transparency, just switch the SRC on :hover