Воспользовавшись рекомендациями Heisenberg и немного их переработав получил следующее:
1. Скрипт (прикреплен ниже), остался в папке с темой: ваш_сайт/css/css_gen/javascript/ исправил одну неточность из-за которой скорее всего скрипт не работал - убрал в начале и в конце <script></script>.
2. На странице оставил следующий код:
<div class="img" id="cont_img">
<a href="#"><img src="./css/css_gen/image/fasad_1.jpg" /></a>
<a href="#"><img src="./css/css_gen/image/fasad_2.jpg" /></a>
<a href="#"><img src="./css/css_gen/image/fasad_3.jpg" /></a>
<a href="#"><img src="./css/css_gen/image/fasad_4.jpg" /></a>
<div class="clear"> </div>
</div>
3. В head.tpl.html прописал скрипт:
<script type="text/javascript" src="./css/css_gen/javascript/jquery.min.js"></script>
4. В stylesheet.css прописано:
#cont_img {
text-align: center;
position: absolute;
left: 40px;
margin-top: 50px;
width: 90px;
}
.img {
position: fixed;
z-index: 0;
}
.end {
margin-right: 0;
}
.clear {
clear: both;
}
.img a img {
position: relative;
border: 0 solid #fff;
}
В итоге получаю:
1. На экране появляется первая картинка в натуральную величину (см. скрин_1), после наведения на которую она сжимается в миниатюру и "проявляется" вторая картинка" (скрин_2).
2. Таким образом на экране после трех движений мыши получаю три миниатюры в столбик (хотя, по-идее, должны быть в линию) - см. скрин_3.
Отсюда несколько вопросов:
1. Как сделать так, чтобы картинки изначально были в миниатюре, а не в исходном размере?
2. Как расположить из в строку (линию)?
3. Как сделать расстояние между картинками в строке?