Search the Community
Showing results for tags 'sprites'.
Found 3 results
-
Good day, I have the following HTML code ... <body> <div id="navButtonContainer"> <img id="navButton" src="images/transparent.png" class="frame1"/> </div></body> and the following CSS code ... .frame1 { width: 200px; height: 100px; background: url(images/imageSS.png) 0px 0px;}.frame2 { width: 200px; height: 100px; background: url(images/imageSS.png) 200px 0px;}.frame3 { width: 200px; height: 100px; background: url(images/imageSS.png) 400px 0px;} I have some JS that modifies the <img/> class from "frame1" to "frame2" to "frame3" and then it would start again. I've used my browser's developer tools and can confirm that the className is being modified correctly. But, the background image never appears. Can anyone tell me why it isn't working? I thought perhaps it was because it was an <img/> element, as I'd read somewhere that the background property doesn't work on <img/> elements but I've tried it just as a div and that hasn't worked either. Also, w3schools suggests in their tutorial that an <img/> element shouldn't be a problem.
-
I seem to have gotten in over my head with this project. I spent most of the day just typing out code, without the ability to debug it due to slow browser speed. When I got off work I started correcting my syntax errors, which didn't take very long. Unfortunately, I have spent many hours trying to resolve some sort of logic error in the game which is apparently a very serious one, as it prevents any of my sprites from appearing. The fillRect() function is showing up perfectly, but the drawImage() function is not. I will go ahead and post the whole game code, as it is pretty concise by my own meager standards. I am a noob to javascript and coding in general, and this will probably show. That being said, I really expected this to work, and would certainly appreciate any help which is on offer. Upon previewing my post I noticed that spacing differences rendered my map array unreadable. I have decided to attach a text file (as I am not permitted to upload .js files) instead of pasting. I hope this is acceptable. script.txt -
I've been using CSS sprites for a while now, mainly using it for icons, but I want to sprite up my backgrounds too. All the backgrounds I want to sprite I want to repeat Horizontally (left to right) but I can't get it too work. I know you can repeat in one direction only with CSS sprites, but it still wont work. #header {width: 100%; height: 215px;background:transparent url('files/site/spritebg.png') repeat top left; background-position: 0;} .sitemenu {float:left; width:690px; height:35px; color:#FFF; font-size:13pt; background-image:url(files/site/spritebg.png); background-repeat: repeat-x; background-position: 220px 0;} Here's two examples of the codeof two sprites I want to repeat, but both just display the image with huge gaps. Here's a link to the css image: http://i475.photobuc...48/spritebg.png Any help in getting this to work will be great. Its really getting on my nerves now!
