Tip for using html MAP with Pixelpost

[mgroleau]

Hello,

This is a suggestion for using html tag MAP for creating next-previous click on main picture.

A suggestion for an add to the next release of the PixelPost.

To do this we have to create a new tag, that I call <IMAGE_WIDTH_HALF>, a tag that compute the center position in the main image. IMAGE_WIDTH and IMAGE_HEIGHT are already available in the Pixelpost tags set.

Implementing the IMAGE_WIDTH_HALF tag:

In the file index.php add these two lines:

On a line just after this line:

$image_width = $image_extra['0'];

I add this line :

$image_width_half = $image_width /2;

and also

On a line just after this line:

$tpl = str_replace("<IMAGE_WIDTH>",$image_width,$tpl);
I add this line:

$tpl = str_replace("<IMAGE_WIDTH_HALF>",$image_width_half,$tpl);


In my template file I display the main image with these statements:

<map name="Map0">
<area href="index.php?showimage=<IMAGE_PREVIOUS_ID>" shape="rect" coords="0, 0, <IMAGE_WIDTH_HALF>, <IMAGE_HEIGHT>" title="<IMAGE_TITLE> - Click here for previous image">
<area href="index.php?showimage=<IMAGE_NEXT_ID>" shape="rect" coords="<IMAGE_WIDTH_HALF>, 0, <IMAGE_WIDTH>, <IMAGE_HEIGHT>" title="<IMAGE_TITLE> - Click here for next image">
</map>
<img src="images/<IMAGE_NAME>" id="photo" usemap="#Map0" />


The results are on this page:

TESTING IT (http://mgroleau.com/photoblog/index.php?showimage=139)

If you click on the right section of the image you access the next image and if you click on the left part you get the previous image.

Thank you and bravo for the PixelPost developpers team!

[Dennis]

Well... this kind of thing could be (and should be) done as an addon. Modifying the core files of Pixelpost is not necessary.

[mgroleau]

Hello,

Thank you for the tip!

This is the addon content:

<?php $addon_name = "Pixelpost Image width half";
$addon_description = "Compute image center";
$addon_version = "1.0";
// Author: Mario Groleau 2007 http://mgroleau.com
$image_width_half = $image_width /2;
$tpl = str_replace("<IMAGE_WIDTH_HALF>",$image_width_half,$tpl); ?>


Simply put this in a .php file in the addons folder.

How to use it:

In your template file, use this code to display the image:

<map name="Map0">
<area href="index.php?showimage=<IMAGE_PREVIOUS_ID>" shape="rect" coords="0, 0, <IMAGE_WIDTH_HALF>, <IMAGE_HEIGHT>" title="<IMAGE_TITLE> - Click here for previous image">
<area href="index.php?showimage=<IMAGE_NEXT_ID>" shape="rect" coords="<IMAGE_WIDTH_HALF>, 0, <IMAGE_WIDTH>, <IMAGE_HEIGHT>" title="<IMAGE_TITLE> - Click here for next image">
</map>
<img src="images/<IMAGE_NAME>" id="photo" usemap="#Map0" />


On your Pixelpost main page you will be able to advance to the next image or rewind to the previous image with no need for the "previous" or "next" button.

[Dennis]

Well done!