<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<title>Mostra immagini </title>
<style type="text/css">
html,body,div,p,h1,h2,h3,h4,h5,input,textarea,select,span,ul,li,a,table,tr,th,td,img{margin:0;padding:0;}
body{ font-family:Geneva, Arial, Helvetica, sans-serif; font-size: 76%; text-align:left; /* 1em = 12.166666 px */ }
h1{ font-size:24px; font-weight:bold; color:rgb(50,50,250); margin-left:31px; }
h2{ font-size:18px; font-weight:bold; color:rgb(250,50,150); }
h3{ font-size:14px; font-weight:bold; color:rgb(200,20,20); margin:1em;}
.nota{color:#F00;}
.codice{color:green;}
p{margin: 10px;}
#contenitore{ position:relative; margin:50px auto; width:200px; height:201px; overflow: hidden; border:1px solid; }
#box{ position:relative; margin:0 auto; padding:0; width:200px; height:200px; overflow:hidden; }
#box img{ width:200px; display:none; z-index:1; }
#pulsanti{ position:absolute; width:160px; height:30px; padding:3px; text-align:center; border:1px solid #CCC; text-align:center; display:none;
z-index:2; }
div.pausa{position:relative; margin:0 auto; width:30px; height:30px; background:url(Pausa-30.png) no-repeat; display:none; }
div.primaImg{ position:absolute; top:4px; left:0; width:30px; height:30px; background:url(Prima-30.png) no-repeat; display:none;}
div.primaImg:hover{ background:url(Prima2-30.png);}
div.ultimaImg{ position:absolute; top:4px; right:0; width:30px; height:30px; background:url(Ultima-30.png) no-repeat; display:none;}
div.ultimaImg:hover{background:url(Ultima2-30.png); }
div.avanti{position:absolute; top:4px; right:31px; width:30px; height:30px; background:url(frecciaA-30.png) no-repeat; display:none;}
div.avanti:hover{ background:url(frecciaA2-30.png);}
div.indietro{position:absolute; top:4px; left:31px; width:30px; height:30px; background:url(frecciaI-30.png) no-repeat; display:none; }
div.indietro:hover{ background:url(frecciaI2-30.png);}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Flash_Image.js"> </script>
</head>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(function($){
$("#box").Flash("#contenitore","#pulsanti","div.pausa","div.primaImg","div.indietro","div.avanti","div.ultimaImg", 2000);
});
}); // chiude ready
</script>
<body>
<h1>Visualizzazione immagini in automatico e mediante pulsanti </h1>
<p class="nota">
Il PLUGIN consente la visualizzazione delle immagini in ciclo. Inoltre c'è la possibilità di controllare la visualizzazione tramite dei pulsanti che vengono mostrati quando il mouse è posto sull'immagine.
</p>
<p class="codice">This Plugin show images in loop. In addition there are control-buttons that appears when the mouse is over the image</p>
<div id="contenitore">
<div id="box">
<img src="batuffolo.jpg" />
<img src="epidermide.jpg" />
<img src="macchie.jpg" />
<img src="gocce.jpg" />
</div><!--box-->
<div id="pulsanti">
<div class="pausa"></div>
<div class="primaImg"></div>
<div class="indietro"></div>
<div class="avanti"></div>
<div class="ultimaImg"></div>
</div><!-- pulsanti-->
</div><!-- contenitore-->
<!--
http://localhost/JSclassesMY/Flash_images/Show_Images.html
-->
</body>
</html>
|
Download
