Jump to content

How to place Javascript ontop of image?


joecool

Recommended Posts

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 by joecool
Link to comment
Share on other sites

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 :D

Link to comment
Share on other sites

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 :D

 

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...