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..
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.
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!!
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.
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.
***thanks a lot..I think ý finnally found what I was after...will this do??
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.
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.
****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?
I will be gratefull and really happy if u could help...
Last edited by merhaba; Oct 27th, 2002 at 02:47 AM.
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:
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>
If you want to test it here's a couple of really excellent pictures I made as well
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??
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.
Reply With Quote
