Search Google

Sunday 28 July 2013

learn 2 programming-How To Make Image SlideShow

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>learn 2 programming</TITLE>
    <STYLE type="text/css">
      UL { 
        background: yellow; 
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
                                     /* No borders set */
      }
      LI { 
        color: white;                /* text color is white */ 
        background: blue;            /* Content, padding will be blue */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Note 0px padding right */
        list-style: none             /* no glyphs before a list item */
                                     /* No borders set */
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;        /* sets border width on all sides */
        border-color: lime;
      }
body {background-attachment: fixed;
  background-image: url("yp.jpg");
  background-repeat: no-repeat;
} 
</div><div class='widget Gadget' id='Gadget2'>
<h2 class='title'>Fish</h2>
<div class='widget-content'>
<script type="text/javascript">
        if (!window.gadgets || !gadgets.rpc) {
          document.write('<script type="text/javascript"' +
    'src="//www-blogger-opensocial.googleusercontent.com/gadgets/js/rpc.js?container\x3dblogger\x26nocache\x3d0\x26debug\x3d0\x26c\x3d1\x26v\x3d0a1224b6979b7ff15d042e87442b8e08\x26sv\x3d7">' +
                  '</scr' + 'ipt>');
        }
      </script>

    </STYLE>
  </HEAD>

<!-- Image Slide Show Start website image -->
<script type="text/javascript" src="http://www.2createawebsites.com/resources/howtocreateawebsitefadeslide.js"></script>   
<script type="text/javascript">  
var mygallery=new fadeSlideShow({   
 wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow   
 dimensions: [600, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
      imagearray:  [ 
 
 
 //change this url with your image url
 
 
["http://www.2createawebsites.com/resources/slide-show-how-2-create-a-website-image-1.jpg"],    
      ["http://www.2createawebsites.com/resources/slide-show-how-2-create-a-website-image-2.jpg"], 
      ["http://www.2createawebsites.com/resources/slide-show-how-2-create-a-website-image-3.jpg"],
      ["http://www.2createawebsites.com/resources/slide-show-how-2-create-a-website-image-4.jpg"],
      ["http://www.2createawebsites.com/resources/slide-show-how-2-create-a-website-image-5.jpg"]// <--no trailing comma after very last image element!   
      ],
  
 
 displaymode: {type:'auto', pause:1000, cycles:0, wraparound:false},   
  persist: false, //remember last viewed slide and recall within same session?   
  fadeduration: 2000, //transition duration (milliseconds)  
  descreveal: "ondemand",
  togglerid: ""
  })
 </script><div id="fadeshow2">   
 </div>
<!-- Image Slide Show End -->


</HTML>
 
------------------------------------------X----------------------------------------- 
 
//save as index.html 

No comments:

Post a Comment