Need advice on what to use to do the following...

Hello,

I want to know which tools to use do a simple and clean page with the following characteristics:

- Having image buttons, in which with mouse over it changes the image to another image.
(Visual Example: templatemonster . com /flash-templates/16847 . html ) --- EDIT: Can't post URLs in new accounts. Oh well.

- Pressing that image button will then display content below the image buttons, on the same page. Preferably with an animation of a box expanding to display this content.


I created these quick images to demonstrate (not actual design ):

Pressing a button:
i20 . photobucket . com /albums/b209/mztiklimit/image01 . jpg

After pressing the button, a box expands from it with the content:
i20 . photobucket . com /albums/b209/mztiklimit/image02 . jpg


I know this can be done in Flash, but I realize that having the entire page in flash would be bothersome and slow. I was doing this in Flex, but I want to know which alternative to use, whether it is CSS, Ruby on Rails, or another, and most importantly, how?

Thank you for your time, looking forward to the replies.


- Luis

I found out how I can do the image rollover and displaying text when clicking the button in CSS, but I'm not sure about the animation of the box containing the text.

Some help on this? Thank you.

Welcome to DevShed Forums, lpsantiago.

I'm glad you'd like to avoid using Flash and other plugins.

Using JavaScript along with your X/HTML and CSS would allow you to do what you want to do, but for someone not experienced with it, I would not call it simple.

One thing to keep in mind about JavaScript, however, is that some people choose to use browsers that don't have support for it enabled.

I'll move this to the JavaScript forum for you. Hopefully someone will offer a suggestion about which libraries are best for this kind of thing. (I'm not a fan of JS libraries, so am not sure which to recommend for this.)

New users are restricted from posting URLs until they have made 5 posts. As you found out, you can get around this by leaving out the "http://" and putting a space before each ".".

If you get desperate, I'd just use flash, but use it VERY sparsely. Nothing is more annoying than a website with too much flash in it. Even graphic design companies fail with this tactic.

CSS definitely helps with hovering objects, as I found out yesterday. Very easy.

DW helps out with mouseovers and mouseouts, onclick etc. with that...
and depending on what apps you have, imageready is very helpful with creating that also.
I am not very well versed with fireworks, but I am aware that it is good with that also.

-Sel