Pressing Piano key

[dan2004]

Hi, I am new here... I am using PSP 7

I have an idea and was wondering if anyone could get me started in the right direction.

I want to be able to click on an image of a Piano key and have it appear as if it is being pressed down. Would anyone know the techniques to study to make this happen?

Not sure is PSP is the right tool. If not, would you have a suggestion on other tools?

Thanks,
Dan

[Trev]

This is called a roll over and uses Java script. In essence its two gif's of the button one with the bevel light from top left and one from bottom right. PSP 7 has Image mapping to create the HTML and Java script which you then insert into your Web page. WYSIWYG wed page applications also do the code and mapping but not the buttons. This no longer part of Current PSP editions.
This can also be done using a border style. In fact there is one called inset and out set
http://www.w3schools.com/css/css_border.asp.

[dan2004]

Trev,

Thank you for your reply. I can see how inset and outset would produce some of the effect I am shooting for.

If you think of a piano key being pressed there is more to it than the look of an inset button. Think of several piano keys. When one is pressed it creates a downward slope to the key next to it.

Do you think that PSP would have the capability to produce something like this or can you think of another "drawing" tool that could?

Thanks!
Dan

[dan2004]

Here is an idea of what I am trying to do. Even though this looks like an animation I would like to create the same downward key movement effect just by clicking on a key.

http://www.pond5.com/stock-footage/5...oard-loop.html

[Trev]

Its not PSP that creates them its you using PSP. Yes it can create them. It will still need Java to make the mouse over work Part of the code is what it does on click and in the case it would show the second image such a midcdepresed.jpeg

This assumes your going to place the keyboard in a HTML document

[Trev]

http://www.trevorbowden.co.uk/test.htm

Just for fun using PSP for the image editing and HTML by dreamweaver