Mouseover swapping of image

[irishblue]

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 :)

[Dennis]

Have a look here: http://movie.leova.com/index.php?x=secret

[austriaka]

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):
<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:

// ############ 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

[klimin_a_s]

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.

[austriaka]

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

KArin

[klimin_a_s]

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

[austriaka]

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

[klimin_a_s]

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

[irishblue]

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

[austriaka]

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