Question

Здравствуйте. Я хочу добавить в правыё контейнер картинку, в уменьшенном размере, но сделать так что бы при наведении на неё курсором, она увеличивалась в несколько раз. Просто при наведении а не при клике на ней.

Подскажите как это сделать. Заранее благодарен.

Если можно, пожалуйста по подробнее.

Вот мой код одной из картинок
<!-- <block9> -->
<DIV class="box"><H3></H3><DIV class="boxContent"><!-- <bc> -->

<p align="center"><A target="_blank" href="http://www.ege.edu.ru/ru/organizers/infographics/"></a><br />
<a target="_blank" href="http://www.ege.edu.ru/ru/organizers/infographics/">
    <img src="http://school5kr.ucoz.ru/baner/1m.png"; title="Все о ГИА" width="200" height="300" border="0"/></a></p>
<!-- </bc> --></DIV>

<!-- </block9> -->

Answer 1

Создаем блок внтурь которого помещаем див:

<div class="picters"><img src="ссылка на изображение" alt="описание к изображению"></div>

Далее добавляем в Таблицу стилей CSS:
.picters img {width:150px;}/*Фиксированный размер для изображения*/
.picters img:hover {width:250px;} /*Размер изображения при наведении*/

Comments

А можно по точнее.
Вот мой код одной из картинок
<!-- <block9> -->
<DIV class="box"><H3></H3><DIV class="boxContent"><!-- <bc> -->

<p align="center"><A target="_blank" href="http://www.ege.edu.ru/ru/organizers/infographics/"></a><br />
<a target="_blank" href="http://www.ege.edu.ru/ru/organizers/infographics/">
    <img src="http://school5kr.ucoz.ru/baner/1m.png"; title="Все о ГИА" width="200" height="300" border="0"/></a></p>
<!-- </bc> --></DIV>

<!-- </block9> -->

---

Делаем вот так:
<!-- <block9> -->
<DIV class="box"><H3></H3><DIV class="boxContent"><!-- <bc> -->

<p align="center"><A target="_blank" href="http://www.ege.edu.ru/ru/organizers/infographics/"></a><br />
<a target="_blank" href="http://www.ege.edu.ru/ru/organizers/infographics/">
<div class="picters">
 <img src="http://school5kr.ucoz.ru/baner/1m.png" alt="" title="Все о ГИА"></a></p></div>
<!-- </bc> --></DIV>

<!-- </block9> -->

Далее добавляем в Таблицу стилей CSS:
.picters img {width:200px;height:300px;}/*Фиксированный размер для изображения*/
.picters img:hover {width:350px;} /*Размер изображения при наведении*/

---

Всё получается. Спасибо огромное. Последний вопрос, а можно сделать так, что бы картинка при увеличении не уходила вправо, а выезжала на центр экрана.

Заранее, спасибо.

---

Здесь было бы более желательно сделать вот так - http://www.ucoz.ru/qa/index.php/1252 так как у вас сейчас это выход лишь для изображений в центральном контейнере, но не боковом.

---

Спасибо за комментарий. Но я чайник в HTML-кодах. Не могли бы Вы сказать какой код имено и куда вставлять. Просто управление образования, затребовало сделать всё баннеры о ЕГЭ читабельными, и завтра проверка сайтов. :(