Pixelpost Forum - Mouseover swapping of image

Pixelpost Forum (http://www.pixelpost.org/forum/index.php)

- Hacks and Modifications (http://www.pixelpost.org/forum/forumdisplay.php?f=16)

- - Mouseover swapping of image (http://www.pixelpost.org/forum/showthread.php?t=5790)

Mouseover swapping of image

Hi there,
I'm new here. I searched around if there are existing hacks or mods but didn't manage to find any similar.

I would like to use PixelPost to display digitally enhanced photos and was hoping that there will be the ability to display a before / after effect of photos using OnMouseOver. Basically, one image has two states e.g. image1-before.jpg and image1-after.jpg. When the mouse rolls over the main image, it will swap and show image1-before.jpg. And upon mouseout, it will display the image1-after.jpg

Would this be possible to do in PixelPost? Woud appreciate if someone could help out :)

I did it here with a very simple JavaScript, you find my "digital darkroom secret" when moving the mouse over the little mouth beneath the bottom right corner of the image:
http://blog.uhlig.at
(no mouth, no secret)

The doing:

You have to create a little grafic for the "secret". Do it in two
different colors (in my site it is the mouth, in grey and red)
Use it like this:
The image which should have a secret to reveale must have a (unique)
name, IE:
<img src="123456789_001.jpg" name="mainimage">
(change that in image_template.html)
The "before"-images have the same name than the "after"-images, just type "o_" before the name.
IE:
after: 123456789_001.jpg
before: o_123456789_001.jpg

The HTML for the "Secret" grafic (just for understanding):

Code:

<a href="#"

onMouseover="

document.images['secret'].src='PATH TO HIGHLITE SECRET GRAFIC';

document.images['IMAGE NAME'].src='PATH TO BEFORE IMAGE'"

onMouseout="

document.images['secret'].src='PATH TO LOWLITE SECRET GRAFIC';

document.images['IMAGE NAME'].src='PATH TO IMAGE'"

onClick="return false;" title="Before Processing">

<img name="secret" src="PATH TO LOWLITE SECRET GRAFIC" border="0">

</a>

In {pixelpost_src}/index.php insert this in line 258:

Code:

// ############ SECRET ################ //

if (is_file('images/o_'.$image_name)) {

        $tpl = str_replace("<SECRET_LINK>",'<a href="#" onMouseover="document.images[\'secret\'].src=\'templates/light.my.dark-ger/img/secret.gif\'; document.images[\'maini\'].src=\'images/o_'.$image_name.'\'" onMouseout="document.images[\'secret\'].src=\'templates/light.my.dark-ger/img/secret_grey.gif\'; document.images[\'maini\'].src=\'images/'.$image_name.'\'" onClick="return false;" title="Digital Darkroom Secret"><img name="secret" src="templates/light.my.dark-ger/img/secret_grey.gif" border="0" align="right" /></a>',$tpl);

}

else {

        $tpl = str_replace("<SECRET_LINK>",'',$tpl);

}

In image_template.html put the new pixelpost tag <SECRET_LINK> wherever you want it to be shown.

If anybody is interested, I could do this as an addon, should be not very tricky
KArin

austriaka, do you upload o_<filename>.jpg manual? I would like a see addon, that can upload and manage "before" images in the admin area.

yes, actually I do it manually.
I am just playing around with doing it with an addon, it is not such a problem

KArin

I can take this work! This will be my second addon! (I am not persist in doing that, actually). What you say?

if you don't mind, I want to do it by myself (have it halfway done already ;-)
But I can send it to you for testing, as soon as I am ready if you want
ok?
KArin

austriaka, I'll very glad to test your addon! Thank you!

Thanks schonhose and Austriaka! That's exactly what I wanted to achieve :)

Andrew,
I couldn't find an email adress in your site, could you contact me via ICQ?
(or look for my email adress in Uh!log)
KArin