Hi all, i want to ask that, is it possible to show any part of image in img tag (with pixels) via Javascript.
I mean, i'll prepare a big image (e.g. 32x320 pixels) and i'll define starting position (X,Y , e.g. 0,32) and width/height (e.g. 32,32), so script will show second (32x32 pixel) part of main image..
I hope i can explain.
Thanks right now..
views:
76answers:
2
+6
A:
You could use CSS properties for this and change them via JS. Set the image as a background for an element with your desired size and adjust its position with background-position so that the correct part of it is visible. Some people call it CSS sprites.
Matti Virkkunen
2010-04-04 14:41:11
+1 You don't even have to use a DIV. I use a transparent PNG and set its background-image, which works just as well for this purpose but gives me the option to use the artifact inline if I want to without having to deal with floats, etc.
Robusto
2010-04-04 14:59:50
Yes, naturally this works with any element. Using an img element sounds somewhat dirty to me though, I'd probably use display: inline-block; if I wanted the element to flow with the text.
Matti Virkkunen
2010-04-04 15:08:09
A:
For the sake of giving you multiple options, you could always use an HTML5 canvas and redraw the image as necessary. You can find a nice tutorial about how to do this here : https://developer.mozilla.org/en/Canvas_tutorial/Using_images
The CSS sprite method would be preferable nonetheless as IE doesn't support canvas yet.
Gab Royer
2010-04-04 14:48:44