Добавление деталей в javascript picture slideshow

Question

Наша команда в настоящее время работает над полностью перепроектированием сайта нашей школы, и один из наших текущих проектов - это легкое слайд-шоу фотографий, которое вы можете найти here.

Прямо сейчас, когда пользователь входит в пространство между двумя эскизами, все они исчезают. Каков наилучший способ организовать их, чтобы все они «не подвергались», когда пользователь входит в общую область больших пальцев? На ум приходит ум, но я немного расплывчатый о том, как мы могли его реализовать.

Вся помощь очень ценится. Никто из нас не особенно силен, когда речь заходит о стилизации с помощью javascript, поэтому это интересный опыт для нас.

Большое спасибо,

Жюстьян 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> 

вы можете установить постион обертки DIV на странице.

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; 
} 

И вы не должны использовать встроенные стили создания class atribute и поставить стиль в CSS-файл.