topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

graphic-javascript-effect-image-jas-gallery.htm / htm



  <head>
  
  <script type="text/javascript" src="graphic-javascript-effect-image-jas.js"></script>
  <style>
  /* Tag-specific */
  html{
          font-size: 100%;
  }
  
  body{
          font: 0.625em/1em Verdana, Geneva, Arial, Helvetica, sans-serif;
          color: #000;
          background: #fff;
  }
  
  input, select, textarea{
          font-size: 100%;
  }
  
  h1{
          font: 3em/1em Arial, Helvetica, sans-serif;
  }
  
  h2{
          font: 1.5em/1.3em Arial, Helvetica, sans-serif;
  }
  
  h3{
          font: bold 1.2em/1em Arial, Helvetica, sans-serif;
  }
  
  /* Tag-specific */
  html, body, form, fieldset, li, h1, h2, h3, h4, h5, h6, p, ul, dl, dt, dd, input{
          margin: 0;
          padding: 0;
  }
  
  dl, p, ul, ol{
          margin: 0 0 1em;
          padding: 0;
  }
  
  a{
          color: #3a5483;
  }
  
  dt{
          font-weight: bold;
  }
  
  body{
          background: #fff;
  }
  
  form label{
          cursor: pointer;
  }
  
  img{
          border: none;
  }
  
  input{
          vertical-align: middle;
  }
  
  /* General */
  div#container{
          width: 450px;
          margin: 2em auto;
  }
  
  div#jas-container{
          /* Width HAS to be here for IE to render the filter */
          width: 320px;
  }
  
  div#jas-frame{
          float: left;
          width: 430px;
          margin: 10px 0;
          padding: 10px;
          border: 1px solid #666;
  }
  
  div#jas-tags{
          float: right;
          width: 100px;
  }
  
  div#jas-tags h3{
          margin-bottom: 1em;
  }
  
  div#jas-tags ul{
          list-style: none;
  }
  
  div#jas-tags ul li{
          margin-bottom: 0.3em;
  }
  
  div#jas-tags ul li input{
          margin-right: 3px;
  }
  
  div#jas-thumbnails{
          float: left;
          clear: left;
          width: 448px;
          margin-top: 1em;
          border: 1px solid #666;
  }
  
  div#jas-thumbnails ul{
          list-style: none;
          width: 440px;
          margin: 10px 0 10px 10px;
          overflow: hidden;
  }
  
  div#jas-thumbnails ul li{
          float: left;
          width: 100px;
          height: 75px;
          margin: 0 10px 10px 0;
  }
  
  div#jas-thumbnails ul li img{
          width: 100px;
          height: 75px;
          cursor: pointer;
  }
  
  div#jas-thumbnails ul li.selected-parent{
          width: 96px;
          height: 71px;
          padding: 1px;
          border: 1px solid #f60;
  }
  
  div#jas-thumbnails ul li img.selected{
          width: 96px;
          height: 71px;
  }
  
  h2#jas-image-text{
          text-align: center;
  }
  
  img#jas-image{
          margin-bottom: 1em;
  }
  
  ul#links{
          display: block;
          clear: left;
          padding: 2em 0 1em 4em;
  }
  
  ul#links li{
          line-height: 2em
  }
  
  ul#navigation-controls{
          width: 260px;
          list-style: none;
          margin: 0 auto;
  }
  
  ul#navigation-controls li{
          float: left;
          line-height: 1.5em;
          margin-right: 0.5em;
  }
  
  ul#navigation-controls li#image-counter{
          margin: 0 0.75em 0 0.5em;
  }
  
  li.slideshow-item{
          margin-left: 3em;
  }
  </style>
  
  </head>
  <body>
  
          <div id="container">
  
                  <div id="jas-frame">
                          <div id="jas-tags">
                                  <h3>Tags:</h3>
                                  <p>
                                          <input type="checkbox" id="jas-select-all-tags" checked="checked">
                                          <label for="jas-select-all-tags">Select all</label>
                                  </p>
                          </div>
                          <div id="jas-container">
                                  <img id="jas-image" src="pictures/1.jpg" alt="">
                                  <h2 id="jas-image-text">Bat bridge in Austin</h2>
                          </div>
                  </div>
  
                  <ul id="navigation-controls">
                          <li><a id="previous-image" href="jas.htm">Previous</a></li>
                          <li id="image-counter">1 / 4</li>
                          <li><a id="next-image" href="jas.htm">Next</a></li>
                          <li class="slideshow-item">
                                  <a id="start-slideshow" href="jas.htm">Start slideshow</a>
                                  <a id="stop-slideshow" href="jas.htm">Stop slideshow</a>
                          </li>
                  </ul>
  
                  <div id="jas-thumbnails"></div>
  
          </div>
  
  </body>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.