in reply to Re^2: Display partial image
in thread Display partial image

Thanks, I tried a couple of CSS tricks but not "overflow: hidden".

Still, I'm not getting the desired because the entire width of the image is displayed.

I'm trying to display the image in parts to show a game's progress. Imagine the image is sliced into neat pieces of 10 px by 10px. So if the game is at stage 1, the first 10px x 10px is displayed, starting from x=0 and y=0. At stage 2, the next (moving rightward first), the next 10px by 10px is displayed to show the progress.

Any more help or pointers will be appreciated :)

Replies are listed 'Best First'.
Re^4: Display partial image
by ikegami (Patriarch) on May 16, 2010 at 08:11 UTC

    Still, I'm not getting the desired because the entire width of the image is displayed.

    Your browser apparently disregards the width for div!? You could try floating it or using something other than div (such as a table).

    At stage 2, the next (moving rightward first), the next 10px by 10px is displayed to show the progress.

    What does this have to do with Perl?

[reply]

      If the image were small, I could slice it up by hand (using Photoshop or similar) and display, say, piece One and piece Two out of 20 pieces to show the stage (of the game). But I wanted to do it programmatically because the image is quite big and time-consuming to slice.

      I'm already using Perl for my site, so I thought I could use it for this slicing job.

[reply]
        Note that you could also split the image using tools on your own machine.
[reply]
Re^4: Display partial image
by jau (Hermit) on May 16, 2010 at 08:48 UTC

    Try googling for "CSS sprites", which is just a fancy term for making (clever) use of the CSS background property.

[reply]
[d/l]

In Section Seekers of Perl Wisdom