Login   Register  
Icontem

File: Img_in_movement.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Michele Prigigallo  >  Image in Movement  >  Img_in_movement.html  >  Download  
File: Img_in_movement.html
Role: Example script
Content type: text/plain
Description: Example
Class: Image in Movement
Move a large image inside a smaller page element
Author: By
Last change: a change
Date: 2012-01-22 06:54
Size: 1,239 bytes
 

Contents

Class file image Download
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Immagine in movimento</title>
<style type="text/css">

body{ background:rgb(255,220,220)}

#container{ position:relative; margin:20px auto; width:350px; height:250px; /*border:1px solid;*/ }
#box{ position: absolute; top:0; left:0;  width:350px; height:250px; overflow: hidden; }  

</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="Muovi_Img.js"> </script>

<script type="text/javascript">
jQuery(document).ready(function(){

jQuery(function($){
$("#box").MuoviImg(6000);	// the argument set the movement-speed of the image
});


}); 
</script>

</head>

<body>

<h2>Immagine in movimento</h2>

<p>
You can set the movement speed of the image in the only one parameter. <br />
Try to put the mouse on the image. <b>You need jQuery library</b>
</p>


<div id="container">
 
     <div id="box"> <img src="Image.jpg" /> </div>

</div><!-- container-->







</body>
</html>