- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Image Overlay Hover Experiment Darken all surrounding area besides…
I had a project that my boss wanted me to do. He wanted to explain different sections of an image to a user by letting them hover over that section.
For example if there was a picture of a city and you wanted to talk about a building in that city. The user could hover the building and a brief description would be shown.
I came up with the idea to darken all the surrounding area but the area that is being hovered. Then show the description.
I managed to do this with some tricky CSS / jQuery coding.
You can see an example of this at http://jsfiddle.net/JoshMesser/Np8v2/
I’m going to break down how I did this … maybe.
I created a main DIV with a set width / height equal to the image being shown. Then set that image as the DIVs background.
I made the div relative positioned so I could put absolute positioned elements within it.
I then created block level Anchor tags that are absolute positioned through out the div.
Giving those Anchor tags the same background as the background on the parent div I can simulate a view area.
I came up with some jQuery code to allow me to control the top / left / height / width of each Anchor tag so I can position them with ease.
Using background position I moved the background image of each Anchor tag to match there position (top / left) within’ the parent DIV.
There for giving the illusion of fading the surrounding area.
I know that this doesn’t really make a lot of sense by reading it. Just check out the jsFiddle Link above.
Wouldn’t using HTML Mapping have been easier?
I wouldn’t have been able to add a background image to a image map nor could I assign any kind of text or other element to it via an ID / Class
But for a simple things images maps are good. Just not to achieve this effect.