[Reply]

John,

A simple tutorial to help understand what's going on. Web applications have 
three levels of functionality:

1. Content - produced form the web server as HTML,images etc, and this may be 
static ( ie form a file ) or generated from your script code ( PHP,ASP etc) or 
Delphi ISAPI DLL.

2. Layout - CSS

3 Behaviour - local Javascript code executing inside the browser.

When a browser receives a response from a Web Server it takes the HTML, CSS and 
Javascript and attempts to transform this into it's own object model - called 
the DOM, Document Object Model. This can be acted upon further using the 
included Javascript code, and it can also generate Javascript events which can 
be responded to.

When you see your enlarged photo with the background grayed transparently, 
Javascript is used to manipulate the objects in the DOM to create this effect.

NB: While the code for this may be delivered by the webserver, in real time the 
web server will not be involved, other than to perhaps deliver the content for 
the enlarged photo.

There are existing Javascript libraries that provide this effect - just check 
out which one you want - are are already using perhaps for other reasons ... 
somehow they don't always work nicely together.

Dojo, JQuery, Scriptaculous, are a few names that come to mind.

This effect BTW is created by enabling two divs, one that is gray and 
transparent and occupies the whole screen to give you the background, and the 
second in front of that with the content ( a photo in your case ). That's 
putting it simply, the reality is a little more complex.

This effect is often used to replicate  a modal popup window without using the 
standard javascript alert and confirm popups.

HTH

Gary






At 20:53 on 15/07/2009 you wrote 
>To  : delphi@delphi.org.nz
>CC  : >From: PDS - John, j...@padasy.co.nz
>Content Type: text/html
>Attached: >
>This is a multi-part message in MIME format.
>
>
>
>
>Hi all
>
> >
>TradeMe has a nice presentation in case you enlarge a photo; background
>vague and photo clearly visible. I had a look at their source but can't
>really figure out how they do this. Has anybody an idea how to achieve this
>presentation?
>
> >
>John C
>
>
>
>_______________________________________________
>NZ Borland Developers Group - Delphi mailing list
>Post: delphi@delphi.org.nz
>Admin: http://delphi.org.nz/mailman/listinfo/delphi
>Unsubscribe: send an email to delphi-requ...@delphi.org.nz with Subject: 
>unsubscribe

Ref#: 41006

_______________________________________________
NZ Borland Developers Group - Delphi mailing list
Post: delphi@delphi.org.nz
Admin: http://delphi.org.nz/mailman/listinfo/delphi
Unsubscribe: send an email to delphi-requ...@delphi.org.nz with Subject: 
unsubscribe

Reply via email to