Hello Rylleman,
It is not difficult, just a little complicated.
I export the canvas of the different parts of the animation, and I make separate renders.
The images are created in Gimp as this (you put the small pictures first in the top left, second to his right ... etc. and the last in the bottom right ) :
http://skias.free.fr/bestiole/oeil.pnghttp://skias.free.fr/bestiole/oreille1.pngRemember the size of small parts, and those of the picture.
Html div's code like this :
Code:
#oreille1 {
width:122px;
height:94px;
background-image: url('oreille1.png');
background-repeat: no-repeat;
background-position: 0 0;
position : absolute;
top: 69px;
left: 271px;
}
(width and height : size of small part. top and left : position on the html page).
The display of the div is :
Code:
<div id="oreille1" onMouseOver="oreille1()"></div>
For the javascript code, i give you mine, but it's not very good, except the part that I copied on Google. I know very few javascript
:
Code:
var chrono_oreille1;
function change_oreille1() {
var pos_oreille1=$('#oreille1').css('backgroundPosition').split(' ')[0].replace(/px|pt/,'');
var pos2_oreille1=$('#oreille1').css('backgroundPosition').split(' ')[1].replace(/px|pt/,'');
pos_oreille1=(pos_oreille1-122<-366)?0:pos_oreille1-122;
if (pos_oreille1==0) {pos2_oreille1=(pos2_oreille1-94<-473)?0:pos2_oreille1-94;}
$('#oreille1').css('backgroundPosition',pos_oreille1+'px '+pos2_oreille1+'px');
if (pos_oreille1==0 && pos2_oreille1==0 && chrono_oreille1!=null) {
clearInterval(chrono_oreille1);
chrono_oreille1=null;}
}
function avance_oreille1() {
chrono_oreille1=setInterval("change_oreille1()",30)}
function oreille1() {
if (chrono_oreille1==null) {avance_oreille1();}
else {return;}
}
122 is width of small part.
94 is height of small part.
366 is width of picture minus 122, width of small part.
473 is height of picture minus 94, height of small part.
Login
Register
FAQ
Search
)
