How to place Javascript ontop of image?

[joecool]

Hi all,

 

I have a test page up for my site, it is:

 

http://tinyurl.com/6cu4u6s

 

If you look at the image of the smiling man, I want that to be an image that fades through different photos of different people.

 

You can look at my home page to see exactly what I want placed in this spot. (give it about 2-3 seconds to see the picture fade into a different one)

 

http://tinyurl.com/64gz6l5

 

The fade effect (or whatever you want to call it) is done via javascript and I wanted to place this exact script in the spot on the test page where the still picture is; however, I have no idea how to do this If I place the javacript anywhere near the image it just pushes the image to one side.

 

How would I accomplish what I need to.

 

Any ideas?

Edited March 16, 2011 by joecool

[pb1uk]

What i would do is place the slideshow in a div and absolute position this where you want it on the page. Set the background image of the div to the still pic you have there already. This way if the slideshow doesn't load or someone doesn't have javascript an image will still be displayed there.

 

Hope this works for you. Site looks very good btw

[joecool]

What i would do is place the slideshow in a div and absolute position this where you want it on the page. Set the background image of the div to the still pic you have there already. This way if the slideshow doesn't load or someone doesn't have javascript an image will still be displayed there.

 

Hope this works for you. Site looks very good btw

 

I will try and do as you suggested. I need to just give it a bit of thought and get my head around it. Thanks for the complement on the site, it is getting there. I started off using a template but with some of the stuff I have learned here and on w3schools I have gone off and pretty much redesigned the whole thing. Still a work in motion though hopefully it will be read for launch early April.

[pb1uk]

Just have a read up about absoloute positioning on w3, it's quite simple.

 

will be something like this:

 

 

<style>
      #slide_container{position:absolute; width:??px; height:??px; top:??px; left:??px;
      background:url('path/to/first/pic.jpg')no-repeat;}
</style>

<div id="slide_container">
      <!--Slideshow code in here-->
</div>

[coollew]

both links you supplied are down so i cant comment on what i cant see.

But on face value I agree with pb1uk I have used this method in ihe past.