My Community

Tutorial 7 Making A Slideshow In HTML

ChrisRansom

  • *********
  • 465
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Tutorial 7 Making A Slideshow In HTML
« on: November 10, 2014, 03:19:04 PM »
This tutorial will show you how to make a slideshow in HTML, CSS, and Javascript.  This slideshow will also go through the images that are required for each slideshow.  On Monday I will show people the HTML behind the site.  Wednesday we will discuss CSS.  On Friday we show you the javascript to making your own slideshow.  Like Sega?  Me too.  This week I will show you how I created my Sonic The Hedgehog slideshow.



« Last Edit: November 10, 2014, 03:32:08 PM by ChrisRansom »
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 465
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 7 Making A Slideshow In HTML
« Reply #1 on: November 10, 2014, 03:21:17 PM »
We will also need arrow images.  If you didn't noticed I cropped the arrows so that the arrows were the only thing showing.  The cropping isn't that good, but it's the best I could do.
« Last Edit: November 10, 2014, 03:29:50 PM by ChrisRansom »
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 465
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 7 Making A Slideshow In HTML
« Reply #2 on: November 10, 2014, 03:36:41 PM »
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="Load()">
    <div id="slider">
        <div id="imgs">
            <!-- here you have to add the img tag -->
            <img id="Img3" src="knuckles.jpg"/>
            <img id="Img2" src="tails.jpg"/>
            <img id="Img1" src="sonic.jpg"/>
        </div>
        <!--Here is going to be the left right buttons, the info and the imgs shown-->
        <div id="Snav">
            <!-- here is the circles , showes the current img -->
            <div id="SnavUp">
                <div id="Scircles">
                    <ul>
                        <!-- here you have to add the li tag-->
                        <li id="S0"></li>
                        <li id="S1"></li>
                        <li id="S2"></li>
                    </ul>
                </div>
            </div>
            <!-- the left and right button -->
            <div id="SnavMiddle">
                <img id="Sleft" src="left.png" onclick="prev()"/>
                <img id="Sright" src="right.png" onclick="next()"/>
            </div>
            <!-- the info -->
            <div id="SnavBottom">
                <!-- here you have to add the p tag-->
                <p id="SP0">Sonic</p>
                <p id="SP1">Tails</p>
                <p id="SP2">Knuckles</p>
            </div>
        </div>
    </div>
</body>
</html>

This is the code for the HTML.  the body onload = Load () is using body onload as a variable and load as a function to load the slideshows.

You are probably curious about the snav images.  I will teach you about that on Wednesday.
« Last Edit: November 10, 2014, 03:40:48 PM by ChrisRansom »
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.