X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Плавающий размер картинок
Matt
Matt
Topic Starter сообщение 4.10.2010, 12:01; Ответить: Matt
Сообщение #1


Хочу сделать, чтобы при наведении курсора или после клика картинка увеличивалась. Читал, что можно сделать средствами html, используя две ссылки на два изображения. Но так и не смог найти, как конкретно это пишется. Подскажите, кто знает.


--------------------
Мой блог. Продвижение и оптимизация сайтов
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bestolloch
bestolloch
сообщение 4.10.2010, 13:03; Ответить: bestolloch
Сообщение #2


Средствами html и css только если
a:hover
ну просто выставляется для этого значение другое значение поля (более большое)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 4.10.2010, 14:10; Ответить: yury_mw
Сообщение #3 


<html>
<head>
<title>hover</title>
<style type="text/css">
A.hover {
background: url(small.gif); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 60px; /* Ширина маленького рисунка */
height: 30px; /* Высота маленького рисунка */
}
A.hover:hover {
background: url(big.gif); /* Путь к файлу с заменяемым рисунком */
width: 120px; /* Ширина большого рисунка */
height: 60px; /* Высота большого рисунка */
}
</style>
</head>
<body>
<p><a href="big.gif" class="hover"> </a></p>
</body>
</html>

маленькая картинка small.gif 0ae4bd660175.gif
большая картинка big.gif b5f4a13ecf78.gif


Поблагодарили: (1)
HashMan
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bestolloch
bestolloch
сообщение 4.10.2010, 14:24; Ответить: bestolloch
Сообщение #4


у тебя показано 2 картинки ховер


Поблагодарили: (1)
nikolayku
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 4.10.2010, 14:28; Ответить: yury_mw
Сообщение #5


bestolloch,
вас что-то не устраивает или что-то непонятно?
Это рабочий пример и в нем все правильно написано.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bestolloch
bestolloch
сообщение 4.10.2010, 14:33; Ответить: bestolloch
Сообщение #6


Сорри - чет не заметил, сорри))
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sc2r2bey
sc2r2bey
сообщение 4.10.2010, 22:53; Ответить: sc2r2bey
Сообщение #7


держи http://www.dynamicdrive.com/style/csslibrary/category/C4/


--------------------
Заметки о разработке и не только
программирую web и для we


Поблагодарили: (1)
nikolayku
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Matt
Matt
Topic Starter сообщение 1.2.2011, 14:12; Ответить: Matt
Сообщение #8


Недавно заметил, что IE7-8 некорректно выводят конструкцию с изменяемым размером, ствя большее изображение под меньшее (все остальные браузеры отображают нормально). Конструкция такая:
<a class="thumbnail1" href="" title=""><img alt="" src="images/foto/foto.jpg" style="width: 170px; height: 248px" /><span><img src="images/foto/foto.jpg" /></span></a>


Стили:
.thumbnail1{
position: relative;
z-index: 0;
}

.thumbnail1:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail1 span{ /*CSS for enlarged image*/
position: absolute;
background-color: transparent;
padding: 4px;
right: 1000px;
border: 0px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail1 span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}

.thumbnail1:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 500;
right: 60px; /*position where enlarged image should offset horizontally */

}


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


--------------------
Мой блог. Продвижение и оптимизация сайтов
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) [ИЩУ] Человека для сбора картинок
 4 rokot 3245 4.9.2018, 10:05
автор: Том77
Открытая тема (нет новых ответов) Ссылки с эро картинок хочется
 2 RMak 4071 4.2.2018, 23:19
автор: Kriya
Открытая тема (нет новых ответов) Поиск картинок и описания
Фотошоп или powerpoint
 1 scorper 1901 8.9.2017, 10:46
автор: scorper
Открытая тема (нет новых ответов) Продаю 160 статей, размер от 2000 символов, копирайт.
Разные тематики, желательно все сразу
 2 vminske 2776 29.12.2016, 15:16
автор: vminske
Открытая тема (нет новых ответов) Работа по поиску картинок и ссылок
Работа для тех, кто онлайн, "между делом", мониторинг
 0 nikolenko2008 1705 28.8.2016, 14:26
автор: nikolenko2008


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 25.4.2024, 20:01

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet