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

<div style="width: 20px; height: 20px; overflow: hidden">
<img src="http://promote.pair.com/i/pair-banner-current.gif">
</div>

[download]

Catch 1: The image must be in a block element.
Catch 2: The whole image is still downloaded.

Replies are listed 'Best First'.
Re^3: Display partial image
by Anonymous Monk on May 16, 2010 at 07:19 UTC

    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 :)

[reply]

      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]

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

[reply]
[d/l]
Re^3: Display partial image
by Anonymous Monk on May 16, 2010 at 06:11 UTC
    But thats not google
[reply]

In Section Seekers of Perl Wisdom