[thelist] Pop up images

Ian Anderson ian at zstudio.co.uk
Mon Mar 27 05:30:32 CST 2006

Justin Zachan wrote:

> What I would ideally like to do is...
> <a href="javascript:popUp('large_image.php')"><img
> src="images/025_t.jpg" alt="" width="156" height="119"></a> (set some
> variable that will tell the large_image.php to select the large image
> that matches the thumb.)
> Does that make sense???

Sure. The concept you're looking for is called a URL parameter (round 
here, at any rate)

e.g. large_image.php?src=flower.jpg

The ? is a stop character that tells the server that that's the end of 
the filename/path and that what follows are name/value pairs in the form:


If you have several, they are separated by ampersands


You see this in the address bar in Google.

You should escape punctuation characters; this can be done using a 
function in php or if you're doing this by hand you can, well, do it by 
hand. For instance, spaces should be converted to %20 like this:

name=value with spaces is wrong     - BAD
name=spaces%20are%20escaped%20like%20this    - GOOD

So in the example below, the page will have a variable available to it 
called "$src" with the value set to "flower.jpg"


What you're doing is sending the page the equivalent of form values sent 
using the GET method, and you retrieve the values just the same.

For instance, in the head of your large_image.php page you could have

$src= "";
if (isset($_GET['src'])) {
	$src= trim($_GET['src']);
$alt= "";
if (isset($_GET['alt'])) {
	$alt= trim($_GET['alt']);

and then where the image is displayed

<img src="<?php echo($src); ?>" alt="<?php echo($alt); ?>">

Note that displaying the value of a URL parameter without checking it 
for malicious input can open your site to XSS attacks.



zStudio - Web development and accessibility

Snippetz.net - Online code library
File, manage and re-use your code snippets & links

More information about the thelist mailing list