Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Member
    Join Date
    Aug 2008
    Location
    Utah, USA
    Posts
    38
    Member #
    17184
    How do I set up an image to automatically swap with another image every 10 seconds or so? Also, how do I a different/random image to load in a designated cell every time the page is reloaded. Is this possible with html and css or is this only done with php? Thanks.

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    For the first question, you can use JavaScript to set a Timeout after 10 seconds.

    The syntax is setTimeout(expression, milliseconds)

    Such as

    Code:
    setTimeout("alert('Hello, ten seconds has passed.');",10000);
    Instead of the alert you would have a function for clarity's sake. In that function you would swap the images (I presume you know how to do that).

    Second question: again you can use JavaScript or you can use PHP.

    Both could be achieved by using an Array and generating a random number which acts as the array key.

    Then you would set a variable to that array position and set the src of the image to the variable.

  4. #3
    Member
    Join Date
    Aug 2008
    Location
    Utah, USA
    Posts
    38
    Member #
    17184
    So do I put that in the image code? Do I need a JS file for it or can it be programmed right into the page code? I know how to define behaviors for mouseover, etc to swap images, how do I code the swap with the Timeout? I'm using Dreamweaver if it makes any difference. Thanks again.

  5. #4
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Its up to you where you put the function, but I always prefer to stick the code in a .js file. That way over pages can have the same functionality without duplicating code.

    So the image swap is only a mouseover event? This does not add up to me, if it is meant to be a mouseover, you want the image swap to happen 10 seconds after the user mouses over an image/element?

    Either way, you would add the onmouseover event handler to the image/element tag and call the function that does the swap. It would be a good idea for the function to accept 2 parameters - the id of the image to swap and the image to change it to.

  6. #5
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I think he is tooling around DW without a clue. The "APdiv16" gave that away. If I'm wrong Setabkcin let me know.

  7. #6
    Member
    Join Date
    Aug 2008
    Location
    Utah, USA
    Posts
    38
    Member #
    17184
    Quote Originally Posted by bfsog
    So the image swap is only a mouseover event? This does not add up to me, if it is meant to be a mouseover, you want the image swap to happen 10 seconds after the user mouses over an image/element?
    Sorry, no it's not a mouseover I was just saying I know how to program image swaps for mouseovers. I want it to change by itself every 10 seconds, so the JS should work, I'm just not sure how to program it.

  8. #7
    Member
    Join Date
    Aug 2008
    Location
    Utah, USA
    Posts
    38
    Member #
    17184
    Quote Originally Posted by aeroweb99
    I think he is tooling around DW without a clue. The "APdiv16" gave that away. If I'm wrong Setabkcin let me know.
    I'm not sure what you mean. The APdiv16 is called that because I didn't rename it from the default. Unless you mean the way I originally programmed it. In that case, yes, I had no clue. :classic: That's why I asked. I know enough to get by, but I need to learn a lot more. That's why I ask so may questions here. Because you guys are a lot smarter than me.

  9. #8
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Some of your questions are asking for a whole tutorial on how to do something. We prefer you narrow your questions so they are more specific. For example, if you have attempted to do something and it won't work, then first do some rearch on google. After you have made an honest effort to get something to work and it fails, then you can show us some code and we can pinpoint the problem.

    Forums are designed to be problem solving, not a place to get tutorials. I'm not trying to get on your case, but I see this all the time. Questions like "How do I make a 3 column layout" will not get answered.

    Pinpoint the problem and someone around here can surely fix it.

    Anyways, welcome to the forum. ;-)

  10. #9
    Member
    Join Date
    Aug 2008
    Location
    Utah, USA
    Posts
    38
    Member #
    17184
    I figured that the whole php question would require a lot more, so I was hoping for a link to something about it.

    As for the image swap every ten seconds I figured that would be a simple line or two of code and was wondering if anyone knew it. But I understand what you're saying. I'll try out some things and go from there.

  11. #10
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    php would definately be better than using javascript, as javascript requires browser support, where php is server side, so that only the server that's hosting the website needs to support php.
    Obviously, php would probably require more work. I don't have anything against javascript, but if you can do the same thing in php as in javascript, go with php if you can.
    I'd say, get this up and running in javascript, and then in time learning to do in php would be a better soloution.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

css image swap
,

css image swap timer

,

css timed image swap

,
css timed swap image
,

html timed image swap

,

javascript image swap timer

,
swap 5 images every 5 seconds
,
swap image every 5 seconds
,

timed image swap

,

timed image swap html

Click on a term to search for related topics.
All times are GMT -6. The time now is 09:06 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com