Printable View
Hello,
I have gif animation of a fling bird...and I have another gif image of ablue cloudy sky....now I want use these two imges on a same html page....let the sky stay behind the flying bird...I can make bird fly using MARQUEE...but here it does not work..the bird gets lost behind sky gif....or how can I use my windows 98 PAINT FOR THÝS PURPOSE ..THANKS..
There are different ways to do it, one would be like so:
<img src="bird.gif" alt="" style="background:transparent url('sky.gif') no repeat;">
Depends exactly what effect you want.
Jasc Animation Shop
thank you...done.... but please tell me how can I adjust HEIGHT AND WIDHT OF BACK GROUND IMAGE(SKY.GIF)...and some about NO REPEAT....OTHER PARAMETERS!!Quote:
Originally posted by Rick Bull
There are different ways to do it, one would be like so:
<img src="bird.gif" alt="" style="background:transparent url('sky.gif') no repeat;">
Depends exactly what effect you want.
Unfortunatly you can't (at least in CSS 2 but maybe CSS 3 which isn't out yet) change the size of the background image. You can though change the width of the main image to allow the background to fit:
<img src="bird.gif" alt="" style="background:transparent url('sky.gif') no repeat; width:100px; height:50px;">
You can use other parameters for background (or specify them idividually). It's probably best you just take a look at http://www.w3.org/TR/REC-CSS2/colors...def-background for the details. But feel free to ask about anything you don't understand.
***thanks a lot..I think ý finnally found what I was after...will this do??Quote:
Originally posted by Rick Bull
Unfortunatly you can't (at least in CSS 2 but maybe CSS 3 which isn't out yet) change the size of the background image. You can though change the width of the main image to allow the background to fit:
<img src="bird.gif" alt="" style="background:transparent url('sky.gif') no repeat; width:100px; height:50px;">
You can use other parameters for background (or specify them idividually). It's probably best you just take a look at http://www.w3.org/TR/REC-CSS2/colors...def-background for the details. But feel free to ask about anything you don't understand.
Yeah it's OK, but that is Internet Explorer only, it won't work in many other browsers. There is a marquee effect comming in CSS 3 hopefully. I'd probably go with what mendhak said, and use Animation Shop or similar to make a new single picture out of the two original pictures.
****Okey RICK..thanks..one more question...now that i learned tu use a background image...now i want to make a man walk or a butterfly fly...what are the javascript codes (-or the easiest way of doing this..)for this movement...i need a n OPEN WÝNG AND A CLOSED WING.. and let this bird..man..or butterfly move..instead of wings or legs i can use simple lines using a pencil in PAINT PROGRAM..All i want is to get an idea of how this is made...is this possible?Quote:
Originally posted by Rick Bull
Yeah it's OK, but that is Internet Explorer only, it won't work in many other browsers. There is a marquee effect comming in CSS 3 hopefully. I'd probably go with what mendhak said, and use Animation Shop or similar to make a new single picture out of the two original pictures.
I will be gratefull and really happy if u could help...
WEll you would be better of just making an animated GIF using the program mendhak mentioned above (or similar) but if you really want to use JavaScript then you could do it something like this:
If you want to test it here's a couple of really excellent pictures I made as well ;)Code:<p><img src="Image1.gif" alt="" id="butterfly"></p>
<script type="text/javascript"><!--
//Load the images
var image1 = new Image();
image1.src = 'Image1.gif';
var image2 = new Image();
image2.src = 'Image2.gif';
//Which image to load
var imageOn = true;
function changeImage() {
//Invert the image
imageOn = !imageOn;
if (document.images)
document.images['butterfly'].src = (imageOn == true) ? image1.src : image2.src;
//Call this again in half a second
setTimeout(changeImage, 500);
}
if (document.images)
changeImage();
//--></script>
Hi again..Rick
That works well, too.
But can we make "butterfly move or fly across the screen .yours is fixed... if ý can. then ý will make "a man" walk......
***
we created a butterfly...and a bird ...but ý want five or more birds fling at the same time...can we copy and paste the orijinal image...i think i wont work...then what is the solution??
***I can not enter MENDHAK'S SÝTE!!!!!
You can move the image with absolute positioning, but I'm not too sure how, I don't really use those kinds of things. But I'm sure someone else here will know how.