html - Adding details to javascript picture slideshow -

Our team is currently working to completely redefine our school's website and is currently running One of our projects is a lightweight photo slideshow that you can search for.

Right now, when the user enters the space between two thumbnails, they all fade. What is the best way to organize them so that users are "useless" when they enter the common area of ​​thumb? A Diva comes in the brain, but how can I apply it but it is a bit fuzzy.

All help is greatly appreciated. When we talk of styling with javascript, none of us is particularly strong, so this is a fun learning experience for us.

/ P>

  & lt; Div id = "wrapper" & gt; & Lt; Img class = "big" .... /> & Lt; Div id = "hover_area" onmouseover = "startUnFade ();" & Gt; & Lt; Img class = "thumb" .... /> & Lt; Img class = "thumb" .... /> & Lt; Img class = "thumb" .... /> & Lt; / Div & gt; & Lt; / Div & gt;  

You can set up a posterone of the wrapper division on the page.

css

  #wrapper {height: 420px; Width: 660px; Status: Relative; } #hover_area {status: absolute; / * This will relate your thumbnail to cover * / right: 0; Bottom: 0; Padding: 5px; / * Empty place and below * /} / * and put each other images / # # hover_rea img.thumb {float: left; Padding: 5px; / * 10px position between images * / width: 50px; Height: 50px; }  

And you should not use inline styles to create a class and insert the style into the CSS file.