topical media & game development

talk show tell print

graphic-javascript-effect-image-caption-effect.htm / htm



  <head>
  <style>
  div.image1, div.image3 {
           margin: 1.5em 0 20px 0;
           width: 215px;
           text-align: center;
  }
  
  div.image2 {
           border: 1px solid #888;
           padding: 5px;
           margin: 1.5em 0 20px 0;
           width: 235px;
           text-align: center;
  }
  
  div.image1 img, div.image3 img {
           border: 1px solid #888;
           padding: 5px;
  }
  
  div.image2 img {
           border: 1px solid #888;
           padding: 0;
  }
  
  div.caption {
           color: #555;
           font: normal 90% "Trebuchet MS", Verdana, Arial, sans-serif;
           margin: 0;
           text-align: center;
  
  </style>
  
  <script type="text/javascript" src="graphic-javascript-effect-image-extract.js"></script>
  </head>
  <body>
  
  <h3>Example 1: Plain text caption, style 1</h3>
  <div class="image1"><img src="graphic-javascript-effect-image-ff.jpg" width="102" height="99" alt="You really need to get Firefox" title="You really need to get Firefox"></div>
  
  <h3>Example 2: Plain text caption, style 2</h3>
  <div class="image2"><img src="graphic-javascript-effect-image-ff.jpg" width="102" height="99" alt="You really need to get Firefox" title="You really need to get Firefox"></div>
  
  <h3>Example 3: URL caption</h3>
  <div class="image3"><img src="graphic-javascript-effect-image-ff.jpg" width="102" height="99" alt="You really need to get Firefox" title="http://www.mozilla.com/en-US/firefox/"></div>
  
  </body>
  
  


(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.