How do I hide part of an image with white space?

Jerry Stuckle schrieb:
> Olaf Schinkel wrote:
>> laredotornado@zipmail.com schrieb:
>>> On Jun 13, 3:49 pm, Olaf Schinkel <tr...@schinkel.tv> wrote:
>>>> laredotorn...@zipmail.com schrieb:> Hi,
>>>>
>>>>> I'm using PHP 5. I was wondering given an image, a.jpg, how can I
>>>>> make an image that would look like you slid a white index card (which
>>>>> I have a file, white.jpg with the same dimensions as a.jpg) over
>>>>> a.jpg? Note that you'd be sliding the image from top to bottom or
>>>>> from left to right, but not both.
>>>>> Thanks, let me know if this makes sense ... it's a litlte hard to
>>>>> describe.
>>>>> Best, - Dave
>>>> You are looking for:
>>>> a) z-index (HTML)
>>>> or
>>>> b) gd2 Functions (PHP)
>>>
>>> Let's say I go the gd2 route. What functions/concepts would I use?
>>> Do you have any example code?
>>>
>>> Thanks, - Dave
>> The question is:
>> **WHAT** do you want to do?
>> Do you want to hide the picture at start and than show more an more?
>> If yes, Javascript is your friend (with the 2. picture with z-index).
>> If not, describe what the user will see.
>
> And when js is disabled?
Then this:

<noscript>
<div style="width:100%;height:100%;z-index:9999;">Anti JS fuck of and go
away</div>
</noscript>

HEHE

On Jun 15, 6:12*am, Olaf Schinkel <tr...@schinkel.tv> wrote:
> laredotorn...@zipmail.com schrieb:
>
>
>
> > On Jun 13, 3:49 pm, Olaf Schinkel <tr...@schinkel.tv> wrote:
> >> laredotorn...@zipmail.com schrieb:> Hi,
>
> >>> I'm using PHP 5. *I was wondering given an image, a.jpg, how can I
> >>> make an image that would look like you slid a white index card (which
> >>> I have a file, white.jpg with the same dimensions as a.jpg) over
> >>> a.jpg? *Note that you'd be sliding the image from top to bottom or
> >>> from left to right, but not both.
> >>> Thanks, let me know if this makes sense ... it's a litlte hard to
> >>> describe.
> >>> Best, - Dave
> >> You are looking for:
> >> a) z-index (HTML)
> >> or
> >> b) gd2 Functions (PHP)
>
> > Let's say I go the gd2 route. *What functions/concepts would I use?
> > Do you have any example code?
>
> > Thanks, - Dave
>
> The question is:
> **WHAT** do you want to do?
> Do you want to hide the picture at start and than show more an more?
> If yes, Javascript is your friend (with the 2. picture with z-index).
> If not, describe what the user will see.- Hide quoted text -
>
> - Show quoted text -

Here's what I'm trying to do. We can preview a document and see what
will be on the left side or the right side ...

http://screencast.com/t/bbgzlh4aG

but we may want to trim parts (either 1/8, 1/16, 1/2, user adjusts
amount) of the pages. Below is my crude Microsoft Paint mock-up of
trimming part of the right side:

http://screencast.com/t/HkPl9kyaBCK

This could happen on both sides of the page

http://screencast.com/t/KfCRngLe

So I'd like to use some image manipulation function to generate a new
image so that when I load my image, I can call the URL of the PHP
manipulation page. So folks have suggested "gd", but what shoudl I be
searching for within that? Again, any hints you can provide are
greatly appreciated, - Dave

Olaf Schinkel wrote:
> Jerry Stuckle schrieb:
>> Olaf Schinkel wrote:
>>> laredotornado@zipmail.com schrieb:
>>>> On Jun 13, 3:49 pm, Olaf Schinkel <tr...@schinkel.tv> wrote:
>>>>> laredotorn...@zipmail.com schrieb:> Hi,
>>>>>
>>>>>> I'm using PHP 5. I was wondering given an image, a.jpg, how can I
>>>>>> make an image that would look like you slid a white index card (which
>>>>>> I have a file, white.jpg with the same dimensions as a.jpg) over
>>>>>> a.jpg? Note that you'd be sliding the image from top to bottom or
>>>>>> from left to right, but not both.
>>>>>> Thanks, let me know if this makes sense ... it's a litlte hard to
>>>>>> describe.
>>>>>> Best, - Dave
>>>>> You are looking for:
>>>>> a) z-index (HTML)
>>>>> or
>>>>> b) gd2 Functions (PHP)
>>>>
>>>> Let's say I go the gd2 route. What functions/concepts would I use?
>>>> Do you have any example code?
>>>>
>>>> Thanks, - Dave
>>> The question is:
>>> **WHAT** do you want to do?
>>> Do you want to hide the picture at start and than show more an more?
>>> If yes, Javascript is your friend (with the 2. picture with z-index).
>>> If not, describe what the user will see.
>>
>> And when js is disabled?
> Then this:
>
> <noscript>
> <div style="width:100%;height:100%;z-index:9999;">Anti JS fuck of and go
> away</div>
> </noscript>
>
> HEHE
>

Sounds like a totally stoopid thing you would do. Hope it's only your
site, and not your customer's.

--
==================
Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.
jstucklex@attglobal.net
==================

laredotornado@zipmail.com wrote:
> On Jun 15, 6:12 am, Olaf Schinkel <tr...@schinkel.tv> wrote:
>> laredotorn...@zipmail.com schrieb:
>>
>>
>>
>>> On Jun 13, 3:49 pm, Olaf Schinkel <tr...@schinkel.tv> wrote:
>>>> laredotorn...@zipmail.com schrieb:> Hi,
>>>>> I'm using PHP 5. I was wondering given an image, a.jpg, how can I
>>>>> make an image that would look like you slid a white index card (which
>>>>> I have a file, white.jpg with the same dimensions as a.jpg) over
>>>>> a.jpg? Note that you'd be sliding the image from top to bottom or
>>>>> from left to right, but not both.
>>>>> Thanks, let me know if this makes sense ... it's a litlte hard to
>>>>> describe.
>>>>> Best, - Dave
>>>> You are looking for:
>>>> a) z-index (HTML)
>>>> or
>>>> b) gd2 Functions (PHP)
>>> Let's say I go the gd2 route. What functions/concepts would I use?
>>> Do you have any example code?
>>> Thanks, - Dave
>> The question is:
>> **WHAT** do you want to do?
>> Do you want to hide the picture at start and than show more an more?
>> If yes, Javascript is your friend (with the 2. picture with z-index).
>> If not, describe what the user will see.- Hide quoted text -
>>
>> - Show quoted text -
>
> Here's what I'm trying to do. We can preview a document and see what
> will be on the left side or the right side ...
>
> http://screencast.com/t/bbgzlh4aG
>
> but we may want to trim parts (either 1/8, 1/16, 1/2, user adjusts
> amount) of the pages. Below is my crude Microsoft Paint mock-up of
> trimming part of the right side:
>
> http://screencast.com/t/HkPl9kyaBCK
>
> This could happen on both sides of the page
>
> http://screencast.com/t/KfCRngLe
>
> So I'd like to use some image manipulation function to generate a new
> image so that when I load my image, I can call the URL of the PHP
> manipulation page. So folks have suggested "gd", but what shoudl I be
> searching for within that? Again, any hints you can provide are
> greatly appreciated, - Dave
>

Just the image or the entire page? If it's the entire page, then how
are you going to handle the text? Or are you going to do the worst and
try to put everything (including the text) in an image and display that
(which will be huge).

For the images, the gd functions will help. Try looking them up at
http://www.php.net/manual/en/. You'll need to understand the functions
to use them properly. Then come back here with the code you're trying
to get to work and we can help you.

--
==================
Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.
jstucklex@attglobal.net
==================

..oO(Olaf Schinkel)

>Jerry Stuckle schrieb:
>>
>> And when js is disabled?
>Then this:
>
><noscript>
><div style="width:100%;height:100%;z-index:9999;">Anti JS fuck of and go
>away</div>
></noscript>
>
>HEHE

You should mark your jokes. Some people might take it seriously.

Micha

laredotornado@zipmail.com schrieb:
> On Jun 15, 6:12 am, Olaf Schinkel <tr...@schinkel.tv> wrote:
>> laredotorn...@zipmail.com schrieb:
>>
>>
>>
>>> On Jun 13, 3:49 pm, Olaf Schinkel <tr...@schinkel.tv> wrote:
>>>> laredotorn...@zipmail.com schrieb:> Hi,
>>>>> I'm using PHP 5. I was wondering given an image, a.jpg, how can I
>>>>> make an image that would look like you slid a white index card (which
>>>>> I have a file, white.jpg with the same dimensions as a.jpg) over
>>>>> a.jpg? Note that you'd be sliding the image from top to bottom or
>>>>> from left to right, but not both.
>>>>> Thanks, let me know if this makes sense ... it's a litlte hard to
>>>>> describe.
>>>>> Best, - Dave
>>>> You are looking for:
>>>> a) z-index (HTML)
>>>> or
>>>> b) gd2 Functions (PHP)
>>> Let's say I go the gd2 route. What functions/concepts would I use?
>>> Do you have any example code?
>>> Thanks, - Dave
>> The question is:
>> **WHAT** do you want to do?
>> Do you want to hide the picture at start and than show more an more?
>> If yes, Javascript is your friend (with the 2. picture with z-index).
>> If not, describe what the user will see.- Hide quoted text -
>>
>> - Show quoted text -
>
> Here's what I'm trying to do. We can preview a document and see what
> will be on the left side or the right side ...
>
> http://screencast.com/t/bbgzlh4aG
>
> but we may want to trim parts (either 1/8, 1/16, 1/2, user adjusts
> amount) of the pages. Below is my crude Microsoft Paint mock-up of
> trimming part of the right side:
>
> http://screencast.com/t/HkPl9kyaBCK
>
> This could happen on both sides of the page
>
> http://screencast.com/t/KfCRngLe
>
> So I'd like to use some image manipulation function to generate a new
> image so that when I load my image, I can call the URL of the PHP
> manipulation page. So folks have suggested "gd", but what shoudl I be
> searching for within that? Again, any hints you can provide are
> greatly appreciated, - Dave
>
Well.
When you will do it at Serverside, than use gd2, on Clientside use
Javascript.
GD are graphic functions for PHP.
Look in the manual for it.
For the GD2 solution you must programm in PHP and the side will always
reload if there is a chance.
With Javascript you can do it at the client and no reload is nessesary.

I would prefer the JS solution.

Jerry Stuckle schrieb:
> Olaf Schinkel wrote:
>> Jerry Stuckle schrieb:
>>> Olaf Schinkel wrote:
>>>> laredotornado@zipmail.com schrieb:
>>>>> On Jun 13, 3:49 pm, Olaf Schinkel <tr...@schinkel.tv> wrote:
>>>>>> laredotorn...@zipmail.com schrieb:> Hi,
>>>>>>
>>>>>>> I'm using PHP 5. I was wondering given an image, a.jpg, how can I
>>>>>>> make an image that would look like you slid a white index card
>>>>>>> (which
>>>>>>> I have a file, white.jpg with the same dimensions as a.jpg) over
>>>>>>> a.jpg? Note that you'd be sliding the image from top to bottom or
>>>>>>> from left to right, but not both.
>>>>>>> Thanks, let me know if this makes sense ... it's a litlte hard to
>>>>>>> describe.
>>>>>>> Best, - Dave
>>>>>> You are looking for:
>>>>>> a) z-index (HTML)
>>>>>> or
>>>>>> b) gd2 Functions (PHP)
>>>>>
>>>>> Let's say I go the gd2 route. What functions/concepts would I use?
>>>>> Do you have any example code?
>>>>>
>>>>> Thanks, - Dave
>>>> The question is:
>>>> **WHAT** do you want to do?
>>>> Do you want to hide the picture at start and than show more an more?
>>>> If yes, Javascript is your friend (with the 2. picture with z-index).
>>>> If not, describe what the user will see.
>>>
>>> And when js is disabled?
>> Then this:
>>
>> <noscript>
>> <div style="width:100%;height:100%;z-index:9999;">Anti JS fuck of and
>> go away</div>
>> </noscript>
>>
>> HEHE
>>
>
> Sounds like a totally stoopid thing you would do. Hope it's only your
> site, and not your customer's.
>
You´ve ssen, that it was a joke?

But:
We don´t travel to holiday with horses. We use cars.
Every "normal" Browser can handle JS.
And people who don´t *want* JS are old fashioned and they can visit
every side they want - but not my sides.

Olaf Schinkel wrote:
> Jerry Stuckle schrieb:
>> Olaf Schinkel wrote:
>>> Jerry Stuckle schrieb:
>>>> Olaf Schinkel wrote:
>>>>> laredotornado@zipmail.com schrieb:
>>>>>> On Jun 13, 3:49 pm, Olaf Schinkel <tr...@schinkel.tv> wrote:
>>>>>>> laredotorn...@zipmail.com schrieb:> Hi,
>>>>>>>
>>>>>>>> I'm using PHP 5. I was wondering given an image, a.jpg, how can I
>>>>>>>> make an image that would look like you slid a white index card
>>>>>>>> (which
>>>>>>>> I have a file, white.jpg with the same dimensions as a.jpg) over
>>>>>>>> a.jpg? Note that you'd be sliding the image from top to bottom or
>>>>>>>> from left to right, but not both.
>>>>>>>> Thanks, let me know if this makes sense ... it's a litlte hard to
>>>>>>>> describe.
>>>>>>>> Best, - Dave
>>>>>>> You are looking for:
>>>>>>> a) z-index (HTML)
>>>>>>> or
>>>>>>> b) gd2 Functions (PHP)
>>>>>>
>>>>>> Let's say I go the gd2 route. What functions/concepts would I use?
>>>>>> Do you have any example code?
>>>>>>
>>>>>> Thanks, - Dave
>>>>> The question is:
>>>>> **WHAT** do you want to do?
>>>>> Do you want to hide the picture at start and than show more an more?
>>>>> If yes, Javascript is your friend (with the 2. picture with z-index).
>>>>> If not, describe what the user will see.
>>>>
>>>> And when js is disabled?
>>> Then this:
>>>
>>> <noscript>
>>> <div style="width:100%;height:100%;z-index:9999;">Anti JS fuck of and
>>> go away</div>
>>> </noscript>
>>>
>>> HEHE
>>>
>>
>> Sounds like a totally stoopid thing you would do. Hope it's only your
>> site, and not your customer's.
>>
> You´ve ssen, that it was a joke?
>
> But:
> We don´t travel to holiday with horses. We use cars.
> Every "normal" Browser can handle JS.
> And people who don´t *want* JS are old fashioned and they can visit
> every side they want - but not my sides.
>
>
>

Many people have js turned off due to the security risks. If you want
to ignore a significant percentage of possible customers, that's fine. I
just hope you're telling your clients you're doing that.

--
==================
Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.
jstucklex@attglobal.net
==================

..oO(Olaf Schinkel)

>You´ve ssen, that it was a joke?

Yes, but ...

>But:
>We don´t travel to holiday with horses. We use cars.
>Every "normal" Browser can handle JS.
>And people who don´t *want* JS are old fashioned and they can visit
>every side they want - but not my sides.

.... this _is_ stupid. There are still many valid reasons to turn JS off
or just allow it for particular sites. And one of the most important
types of user agents doesn't support it at all - search engines.

Relying on JS in order to make a site work is just amateurish and
incompetent. Good sites also work without it or offer non-JS fallbacks.

Micha

On Jun 13, 9:40 pm, "laredotorn...@zipmail.com"
<laredotorn...@zipmail.com> wrote:
> Hi,
>
> I'm using PHP 5. I was wondering given an image, a.jpg, how can I
> make an image that would look like you slid a white index card (which
> I have a file, white.jpg with the same dimensions as a.jpg) over
> a.jpg? Note that you'd be sliding the image from top to bottom or
> from left to right, but not both.
>
> Thanks, let me know if this makes sense ... it's a litlte hard to
> describe.
>
> Best, - Dave

Without context it's hard to say what you want to do exactly. If you
want to keep part of an image hidden in order to keep its content
secret for whatever reason then you can use the gd functions of PHP to
draw a rectangle over the top of the image.

If it's just for presentation then I'd personally do it with a
position:absolute div drawn over the top with an opaque background.
In this case you'd want to be asking in a CSS related newsgroup, and/
or a javascript one if you need to be able to manipulate the blanked
off region in the user's browser.