Forums

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…

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #32584
    Josh
    Member

    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.

    #47653
    ChrisBull
    Member

    Wouldn’t using HTML Mapping have been easier?

    #47655
    Josh
    Member

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.