Post-traumatic Hydroceles

a particular header: # 2

As the second part of this post I wanted to show how to add the effect to move each tag with just grab it. The truth is that not very useful by itself, but manages to distract a bit, and I've heard from visitors who are put to "play" with the clouds in Z-Graphics:)

The html code that we already had is:

\u0026lt;div id=" nube1 "> \u0026lt;img src = "images / tag . png "/> \u0026lt;/ div> \u0026lt;div id="
nube2 "> \u0026lt;img src="images/ nube2.png /> \u0026lt;/ div>
\u0026lt; div id = " nube3 "> \u0026lt;img src="images/ nube.png /> \u0026lt;/ div>

The first thing to do is (if we have not done) add the jQuery library to the template (just before \u0026lt;/ head>): \u0026lt;script

 src="https://www.google.com/jsapi"> \u0026lt;/ script> 
 \u0026lt; script> 
 google.load ('jquery', '1 .3.1 '); 
 \u0026lt;/ script> 
 

Or we can also use:

\u0026lt;script type = "text / javascript" src = "http : / / ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js "> \u0026lt;/ script>

After this we must add also the effect scripts:

\u0026lt;script Type="text/javascript"

src="ui.core.js"> \u0026lt;/ script> \u0026lt;script type="text/javascript"
src="ui.draggable.js"> \u0026lt; ; / script>

Both the above files you can download it here: ui.core.js and ui.draggable.js . You can use these directions if you have nowhere to host the scripts, but I recommend you change it.

After adding the libraries create the effect: \u0026lt;script type="text/javascript">

$ (function () {
$ (". insert). Draggable ();
});
\u0026lt;/ script>

And add a few styles to the class" insert "

\u0026lt;style type="text/css">
. {Insert
cursor: url (images / hand.png), pointer;
position: absolute;
z-index: 1;}

\u0026lt;/ style>

Finally add the removable type, which is what has the effect of clouds. To replace the html code that we had before:

\u0026lt;div id="nube1"> \u0026lt;img src="images/cloud.png" class=" movable /> \u0026lt;/ div> \u0026lt;div
id="nube2"> \u0026lt;img src="images/cloud2.png" class=" movable /> \u0026lt;/ div>
\u0026lt;div id = "nube3 "> \u0026lt;img src="images/cloud.png" class=" movable /> \u0026lt;/ div>

Demo Download

. Rar