Rollover turning to double-tap on touch devices / HTML Image fade out
I am trying to achieve an effect within HTML in which there are a series of sphere images in a grid onscreen, and on rolling over one, the image changes to a sphere with a numeral in it, and the other spheres fade out (but don't disappear completely); when the rolled over image is clicked, it takes you to a new page. If another sphere is tapped, that sphere shows the "rollover/single-tap" image, and the OTHER spheres fade out...
here is a link to a Flash concept (the images fade out completely in this - in the actual version, they would fade to 10% opacity): http://www.everbeta.coom/virzi
(only the top left image has the effect)
I would like to replicate this concept in HTML so it works on mobile devices.
On touch devices, I have noticed that rollovers such as drop down menus are triggered with a single tap, and then tapping again triggers an onClick - is this standard ? I found a script here that does a fade *in* :
This works on iPad, and I assume it could be modified to fade out the other unselected spheres... the client is OK with a single tap to trigger the rollover and fading of the unselected spheres, and a double tap to move the user to the next page.
How difficult would something like this be to achieve using HTML ? Any links to sample code that might help would be greatly appreciated. Also if there are any freelancers out there that might consider just coding it up for me, let me know.