In Progress

CSS, JQuery, Javascript: Image Hover and Click Effects


To get a first impression about the visual image effects I need please have a look to this website: [url removed, login to view]

That image wall and the effects are basing on Flash, I know. And I want this (or very similar) effects made with CSS, JQuery and Javascript. I made some researches today to find out if this is possible and obviously it is. At the bottom of this project description you find some source code ressources and examples. Some are not for free but if you need one of them I will buy that sources.

(For the detailed project description please have a look below)

## Deliverables

I think 80% of this project's work is to rebuild the image effects from the flash demo site I posted above. I only need two more adjustments.

1. If the user click on one of the images an icon should appear. To imagine this effect please have a look to this website: [url removed, login to view] In the first example block "Catures, Galleries & Navigation" I like the demonstration of the bottom left rat (with the upcoming arrow pointing to the right)

2. If the user click on that upcoming icon a JS alert box should come up and say "hello". This makes no sense of course but I can later fill this JS function with more senseful code ;-) When a click onto an image (or better: onto the icon over that image) have happened, this image must be greyed out and a green check mark icon must be overlaying this image. I will provide you with the check mark icon graphic if you want. And any further click on such an image that was pressed before and greyed out with the green check mark icon doesn't effect anything anymore.

Finally please add such audio effects when the mouse cursor moves over the images like on the flash demo website I posted above. And a audio effect when the user click on the upcoming arrow icon would be great. That's it!

This scripts you build will later be implemented into a PHP website. There the images are loaded dynamically into the browser. Also the name of the person which is displayed on the image and a unique id is provided. Your script should display the name when a user click on an image like the text "Perfect Segues" in the demo with the rat on [url removed, login to view] The unique id will be passed to a JS when the user click on the icon over an image. In which way the name informations and unique ids are delivered to your script doesn't matter. I can provide them in a JS array for example.

Here are some code source ressources which may be interesting for you:

- [url removed, login to view] (the first two rows may be interesting for you)

- another technical inspiration may be this one: [url removed, login to view]

Your scripts must support Chrome, Internet Explorer, Firefox in the current versions. The examples on the websites I posted here do work in all browsers.

Skills: Script Install, Shell Script

See more: css hover click, javascript image wall, jquery css effects, css image click effects, click effects image javascript, css image effects, javascript image effects, jquery icon click, you may not need jquery, websites inspiration, today in javascript, technical support websites, say anything you want, name text image, javascript today, image websites, icon add free, html websites buy, html and css code for free websites, graphic inspiration websites, free css, find javascript, find icon free, find * css, click here graphic

About the Employer:
( 180 reviews ) London, United Kingdom

Project ID: #2766958

Awarded to:


See private message.

$127.5 USD in 6 days
(19 Reviews)

2 freelancers are bidding on average $119 for this job


See private message.

$110.5 USD in 6 days
(9 Reviews)