1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

HTML code that would allow me to rotate through many images

Discussion in 'Web Design & Development' started by dyerksjr1, Mar 10, 2019.

Thread Status:
Not open for further replies.
Advertisement
  1. dyerksjr1

    dyerksjr1 Thread Starter

    Joined:
    Mar 10, 2019
    Messages:
    2
    I am trying to create a slide deck via HTML. I am a retired teacher trying to help a colleague. I would like a code that would allow me to rotate through many images with text underneath after I refresh the page. Very much like a Powerpoint Slide Presentation. Any help would be fantastic!!
    This code is very close to what I would like ... However, it fills the entire background ... I would just like it to be centered with a caption underneath ...
    <script>
    var bgs = [
    'http://fillmurray.com/800/600',
    'http://fillmurray.com/900/600',
    'http://fillmurray.com/800/700',
    'http://fillmurray.com/1000/600',
    'http://fillmurray.com/1200/500', ];
    window.onload = function () { var n = Math.floor(Math.random()*bgs.length); document.body.style.backgroundImage = 'url(' + bgs[n] + ')'; }
    </script>

    Link to what the code looks like ... https://donyerks.neocities.org/
     
    Last edited: Mar 10, 2019
  2. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,278
    First Name:
    Colin
    You need to add some css styling to the background image. So something like

    Code:
    .mybgimage {height: 500px;   background-position: center;
      background-repeat: no-repeat; }
    Apply this style in your js to the background image.
     
    dyerksjr1 likes this.
  3. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,357
    First Name:
    Jim
    Then perhaps a slideshow is more in order, as opposed to your static display?
    For this you would need to employ some javascript and css. Here are some examples
    (Your javascript needs to be encapsulated in <script> and </script> tags and inserted into the <head> section of your html. Similarly your css code needs to go between <style> and </style> tags in the <head> section):)
     
    Last edited: Mar 11, 2019
    dyerksjr1 likes this.
  4. dyerksjr1

    dyerksjr1 Thread Starter

    Joined:
    Mar 10, 2019
    Messages:
    2
    I am not sure where to insert? ...

    .mybgimage {height: 500px; background-position: center;
    background-repeat: no-repeat; }

    Into the code below ⬇ ...

    <script>
    var bgs = [
    'http://fillmurray.com/800/600',
    'http://fillmurray.com/900/600',
    'http://fillmurray.com/800/700',
    'http://fillmurray.com/1000/600',
    'http://fillmurray.com/1200/500', ];
    window.onload = function () { var n = Math.floor(Math.random()*bgs.length); document.body.style.backgroundImage = 'url(' + bgs[n] + ')'; }
    </script>

    So I don't want to see the image more than once and I would like it to be centered.

    Link to what the code looks like ... https://donyerks.neocities.org/

    Any help would be greatly appreciated - Thanks - Don
     
    Last edited: Mar 14, 2019
  5. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,357
    First Name:
    Jim
    Don, the problem is that your code is purely javascript which is not conducive to css styling (I for one, haven't a clue how to incorporate it:()
    You have to change your approach and go for an HTML/Javascript/css slider, as per those examples in my previous post, which will give you a powerpoint-like presentation, as originally requested ...
    (If you click on "Here are some examples", you'll see them)

    Thinking about it, the Codepen examples were not the best selection for you. rather check this out from W3Schools;)
     
    Last edited: Mar 15, 2019
  6. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1224224

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice