Question

Our team is currently working on completely redesigning our school’s website and one of our projects currently underway is a lightweight photo slideshow which you can find here.

Right now, when the user enters the space between two thumbnails, they all fade. What is the best way to organize them so that they all “unfade” when the user enters the general area of the thumbs? A div comes to mind, but I’m a little fuzzy on how we could implement it.

All help is much appreciated. None of us are particularly strong when it comes to styling with javascript, so this is a fun learning experience for us.

Many thanks,

Justian Meyer

Answer 1

html

<div id="wrapper">
  <img class="big" ..../>
  <div id="hover_area" onmouseover="startUnFade();">
    <img class="thumb" ..../>
    <img class="thumb" ..../>
    <img class="thumb" ..../>
  </div>
</div>

you can set postion of wrapper div on the page.

css

#wrapper {
  height: 420px;
  width: 660px;
  position: relative;
}
#hover_area {
  position: absolute; /* this will position your thumbnails relative to wrapper */
  right: 0;
  bottom: 0;
  padding: 5px; /* space at right and at the bottom */
}
/* and put you images one each other*/
#hover_area img.thumb {
  float: left;
  padding: 5px; /* 10px space between images */
  width: 50px;
  height: 50px;
}

And you shouldn’t use inline styles create a class atribute and put style in css file.