Главная Вход в систему Регистрация
Задать вопрос Консультации Пользователи Форум
О системе Помощь
Задать вопрос экспертам
Консультация № 184091
25.09.2011, 10:09
93.11 руб.
0 2 1
Компьютеры Интернет и сети
Здравствуйте! Прошу помощи в следующем вопросе:
Есть рисунок на странице. При наведении на него указателя мыши загружается другой рисунок немного большего размера. При щелчке мыши на этом рисунке в отдельном окне загружается рисунок большого размера.

<img src='pic/pic1-1-1.jpg' title="Щелкните на рисунке, и он увеличится" onMouseOver="this.src='pic/pic1-1-2.jpg' " onMouseOut="this.src='pic/pic1-1-1.jpg' " onClick="window.open('pic/pic1-1-3.jpg','new','status=no,toolbar=no,menubar=no')">
Подпись под рисунком
<i>25.09.2011 (дата рисунка)

Все дело в том, что при наведении указателя мыши на рисунок вся картинка на странице съезжает из-за изменения размеров рисунка. А мне нужно, чтобы новый рисунок большего размера появлялся поверх старого маленького рисунка. Ничего страшного не будет, если этот рисунок будет перекрывать соседние рисунки.

Подскажите пожалуйста как изменить код страницы.

Обсуждение

Неизвестный
25.09.2011, 10:29
общий
Вообще-то это страница - фотоальбом. Может-быть где-то есть готовый шаблон без PHP, а то с PHP я не очень дружу.
давно
FOXhunter
Профессионал
222505
728
25.09.2011, 17:43
общий
это ответ
Здравствуйте, fomservl!
Для того что бы при наведении курсора на картинку, картинка увеличивалась надо скачать два скрипта:
jquery-1.3.2.min.js
zoomi.js

Далее объясню на примере. Скрипты и результат примера Вы можете взять в архиве прикрепленном к ответу.
Создаем index.htm с вот таким кодом:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//RU"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head><title>zoomi</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="zoomi.js"></script>
</head>
 
<body>
    <a href="#" onClick="window.open('untitled.jpg','new','status=no,toolbar=no,menubar=no')">
	  <img style="margin-left:20%; margin-top:10%;" class="zoomi" src="pic_sm.jpg" alt="pic.jpg"  />
    </a>
 </body>
</html>

Код:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="zoomi.js"></script>

Эти две строки указывают на то что рядом с файлом index.htm лежат наши два скрипта. Если понадобится скрипты положить в подкаталог, то измените путь после src=
Идем дальше.
Код:
<img style="margin-left:20%; margin-top:10%;" class="zoomi" src="pic_sm.jpg" alt="pic.jpg"  />

Это строка для создания "превью" из двух картинок. src="pic_sm.jpg" - это уменьшенная картинка, alt="pic.jpg" - это оригинал.
При просмотре страницы, на ней будет отображаться pic_sm.jpg, но стоит подвести курсор, как на экране появится pic.jpg.
Код:
<a href="#" onClick="window.open('untitled.jpg','new','status=no,toolbar=no,menubar=no')">
	  <img style="margin-left:20%; margin-top:10%;" class="zoomi" src="pic_sm.jpg" alt="pic.jpg"  />
    </a>

А тут все просто, мы картинку заключаем в тег ссылки <a href="#" onClick="window.open('untitled.jpg','new','status=no,toolbar=no,menubar=no')"> </a>, который позволит при клике открыть картинку untitled.jpg в новом окне с параметрами.
Удачи!
Прикрепленные файлы:
5
Хотя я не понял, как это работает, но все получилось супер! <br>Код в прикрепленных файлах - сущая абракадабра. Что почитать, чтобы разобраться?
Об авторе:
Куплю винчестер. Жесткие диски не предлагать.
Форма ответа