Родились сегодня:
ivan_papus


Лидеры

ID: 259041

Алексеев Владимир Николаевич

Мастер-Эксперт

1166

Россия, пос. Теплоозёрск, ЕАО


ID: 405587

Magic2hand

5-й класс

700


ID: 226425

Konstantin Shvetski

Модератор

317

Россия, Северодвинск


ID: 137394

Megaloman

Мастер-Эксперт

180

Беларусь, Гомель


ID: 405604

Ника

Посетитель

138


ID: 400669

epimkin

Профессионал

118


ID: 405537

hipunova1512

Посетитель

88


8.10.4

05.12.2021

JS: 2.10.3
CSS: 4.6.0
jQuery: 3.6.0
DataForLocalStorage: 2021-12-08 21:46:03-standard


Установка, настройка и работа в программах графического дизайна Adobe Photoshop и CorelDRAW.

Администратор раздела: FOXhunter (Профессионал)

Консультация онлайн # 184091

Раздел:  Графический дизайн
Автор вопроса: fomservl
Дата: 25.09.2011, 10:09 Консультация закрыта
Поступило ответов: 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')"><br>Подпись под рисунком<br><i>25.09.2011 (дата рисунка)

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

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

Ответ # 268313 от FOXhunter
Здравствуйте, 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 в новом окне с параметрами.
Удачи!

-----
Прикрепленные файлы:


FOXhunter

Профессионал
25.09.2011, 17:44
5


Хотя я не понял, как это работает, но все получилось супер!
Код в прикрепленных файлах - сущая абракадабра. Что почитать, чтобы разобраться?

Мини-форум консультации # 184091
неизвестный

1

= общий =    25.09.2011, 10:29

Вообще-то это страница - фотоальбом. Может-быть где-то есть готовый шаблон без PHP, а то с PHP я не очень дружу.

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

Лучшие эксперты раздела

Коцюрбенко Алексей Владимирович

Старший модератор

Рейтинг: 200

Лысков Игорь Витальевич

Мастер-Эксперт

Рейтинг: 42

FOXhunter

Профессионал

Рейтинг: 0

LfiN

Специалист

Рейтинг: 0

Сучкова Татьяна Михайловна

Мастер-Эксперт

Рейтинг: 0

Belotchik

Студент

Рейтинг: 0