CODEWITHSUNDEEP
javascriptjquerycss
Fahad
Fahad

Reputation: 1444

Highlight parts of an image on mouseover

I want to create a page which essentially has a black and white photograph of, say, 5 people. Now, on hover over each person, I want that person to light up and a dialog of information to be displayed next to it.

Can anyone please tell me how to go about doing this?

Thanks in advance. :)

Upvotes: 1

Views: 7852

Answers (3)

wandarkaf
wandarkaf

Reputation: 1889

html:

 <a href="#" class="highlightit"><img border="0" src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg"> 
   <span> something </span>
 </a>

css:

.highlightit img{
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
 }

.highlightit:hover img{
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
 }

.highlightit:hover span{
  display:block;
}


.highlightit span{
  font-size:20px;
  color:white;
  background:black;
  text-decoration:none;
  display:none;
  width:100%;
  padding:10px;
  position:relative;
  margin-top:-20px;
}

check this fiddle for a preview http://jsfiddle.net/wandarkaf/cNC5G/ .

Upvotes: 2

Billy Moat
Billy Moat

Reputation: 21050

Two possible methods:

  1. CSS Sprites

    • Create one large image which contains the original image plus the image in each of it's different hover states (probably stacked vertically).

    • Place the image as a background image of a DIV sized to show just the original image(or Figure or whatever).

    • Abolsutely position some links in the DIV to where you want them to be (making sure your container DIV is relatively positioned).

    • On hover of one of your links adjust the background position of the image to show the correct image and to display a hidden DIV/SPAN/WHATEVER containing you text dialogue.

  2. Javascript.

    • Same method as above but using separate images which are called on hover/mousein or whatever then again call a hidden dialogue to show. Plenty of tooltip plugins available for this purpose.

Upvotes: 1

Andy
Andy

Reputation: 14575

Either use an image map or make "invisible" divs on top of each person. Both have their pro's and cons but an Image Map was created specifically for what you need.

To "Light them up" your only choice would be to overlay a .png image (on :hover of invisible div) with a transparent background with a cut out of that person, but edited to be "light"

Upvotes: 3

Related Questions