Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Увеличиваем картинку, без скриптов 
:(
    Опции темы
Qwesa
Дата 10.1.2008, 14:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 96
Регистрация: 9.10.2007

Репутация: нет
Всего: нет



Есть картинка, нужно чтоб с наведением на нее мыши, поверх или рядом отображалась таже картинка но немного большего размера. 
Пробывал так:
Код

<style>
img.pics {width: 100%; heigth: 100%;}
img.pics:hover {width: 130%; heigth: 130%;}
</style>
в самом теле:
<img class='pics' src='1.jpg'>



но в эксплорере вообще нечего не происходит, а фаерхокс растягивает картинку только по ширине. Хотелось бы вообще сварганить чтото похожее на http://www.zomzom.ru/web/menu.html - когда выбераеш закладку отображается список картинок, при наведении на них мышью получается нужный еффект, только вот я не смог корректно перенести код на отображение одной картинки((

Это сообщение отредактировал(а) Qwesa - 10.1.2008, 14:12
PM MAIL   Вверх
NDenis
Дата 10.1.2008, 14:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8



вы отсюда (http://www.cssplay.co.uk/menu/lightbox3) брали пример, я верно заметил?
а пути к картинкам проверить не пытались?
PM MAIL   Вверх
Qwesa
Дата 10.1.2008, 15:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 96
Регистрация: 9.10.2007

Репутация: нет
Всего: нет



Да совершенно верно от туда. Но насчет путей я не совсем понял, если имеется в виду посмотреть какими параметрами реализуется эта фишка, то я не настолько разбираюсь в CSS, в примере который я привел довольно много параметров, я поэтому и спрашиваю что сам не могу понять код стиля. Может ктото знает как эта вещь реализуется, или просто взглянув на код понимает от куда там ноги растут.
PM MAIL   Вверх
NDenis
Дата 10.1.2008, 16:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8



в коде, который вы скопировали, есть пути до картинок галереи:
например:
Код

<img src="lbox/landscape1a.jpg" alt="" title="" />

вот про эти картинки я и говорю
PM MAIL   Вверх
Qwesa
Дата 10.1.2008, 22:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 96
Регистрация: 9.10.2007

Репутация: нет
Всего: нет



чет я не понял smile , а причем тут пути к картинкам, зачем? мне нужно разобраться, за счет каких параметров обеспечивается такой эффект как в галереи http://www.zomzom.ru/web/menu.html, если б нужно было большую пачку ркартинок так сделать то яб просто немного подправил бы эту галерею да вставил на свою страницу((, но мне нужно сделать такой эффект на одну картинку, а для этого нужно знать какие именно параметры в стилях реализуют этот эффект.
PM MAIL   Вверх
NDenis
Дата 11.1.2008, 10:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8



изначально, при наведении на закладку (Portraits, Landscapes, Birds), картинки описываются таким образом:
Код

.photo ul.topic li a:hover ul li a img, 
.photo ul.topic li:hover ul li a img 
{display:block; width:100px; height:75px; border:5px solid #eee;}

затем, при наведение на картинку, увелечение описывается так:
Код

.photo ul.topic li:hover ul li a:focus img.large, 
.photo ul.topic li:hover ul li a:active img.large, 
.photo ul.topic li a:hover ul li a:active img.large 
{position:absolute; left:15px; top:24px; width:640px; height:480px; padding:0; background:#000; border:4px solid #fff; z-index:10;}

PM MAIL   Вверх
Qwesa
Дата 12.1.2008, 01:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 96
Регистрация: 9.10.2007

Репутация: нет
Всего: нет



я вот скомпилировал документик и попробовал из него методом исключения- чтото убрать.   

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#111;}

/* slides styling */

.photo {width:300px; height:500px; background:url(lbox/back.jpg) no-repeat center center; text-align:left; position:relative;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:720px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:240px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:239px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul, 
.photo ul.topic li ul 
{display:none;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li a:hover ul, 
.photo ul.topic li:hover ul 
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd url(lbox/close.gif) no-repeat right top; width:479px; padding:70px 100px; border:20px solid #aaa;}

.photo ul.topic li a:hover ul li, 
.photo ul.topic li:hover ul li 
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li a:hover ul li a, 
.photo ul.topic li:hover ul li a 
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li a:hover ul li a img, 
.photo ul.topic li:hover ul li a img 
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a img.large, 
.photo ul.topic li:hover ul li a img.large 
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}

.photo ul.topic li a:hover ul li a:hover, 
.photo ul.topic li:hover ul li a:hover 
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img, 
.photo ul.topic li:hover ul li a:hover img 
{position:absolute; left:-50px; top:-32px; width:300px; height:300px; border-color:#fff;}

.photo ul.topic li a:hover ul li a:hover img.large, 
.photo ul.topic li:hover ul li a:hover img.large 
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}

.photo ul.topic li:hover ul li a:focus, 
.photo ul.topic li:hover ul li a:active,
.photo ul.topic li a:hover ul li a:active 
{position:static; outline:0;}

/*блок отвечающий за картинку появляющуюся при наведении мыши*/
.photo ul.topic li:hover ul li a:focus img, 
.photo ul.topic li:hover ul li a:active img, 
.photo ul.topic li a:hover ul li a:active img 
{position:absolute; left:200px; top:170px; width:200px; height:150px; padding:0; background:#000; border:0; z-index:5;}

.photo ul.topic li:hover ul li a:focus img.large, 
.photo ul.topic li:hover ul li a:active img.large, 
.photo ul.topic li a:hover ul li a:active img.large 
{position:absolute; left:15px; top:24px; width:200px; height:150px; padding:0; background:#000; border:4px solid #fff; z-index:10;}


</style>


</head>

<body>
<div class="photo">
<ul class="topic">
<li><a href="#portrait1"><img src="01.jpg" alt="" width="100" height="75" title="" /><img src="01.jpg" alt="" width="200" height="150" class="large" title="" /></a></li>
</ul>
<ul class="topic">
    <li><a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
<li><a href="#portrait1"><img src="01.jpg" alt="" width="200" height="150" title="" /><img src="01.jpg" alt="" width="200" height="150" class="large" title="" /></a></li>
</ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    
</ul>
<br class="clear" />
</div>
</body>
</html>



теперь не могу определить как все это применить к одной картинки. Примерно принцип работы я понял. Картинка в списке с Z индексом 10 отображается определенных размеров, а при наведении на нее мышкой она отображается с индексом 5, реальных размеров в определенном месте, и получается поверх фона контейнера (ul) и самой маленькой картинки. Но всеже чтото я не могу разобраться. (сори за большой код))


Да и в общем мне не нужно такой навороченный фотоальбом, все что нужно это чтоб при наведении на одну картинку, отображался ее увеличенный вариант, и нет необходимости чтоб она открывалась в увеличенном варианте. Это что-то вроде увеличительного стекла, просто для более подробного ознакомления. Вот еще один вариант кода, куда проще:
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#111;}

img.pics {width: 100px; height: 75px;}
img.pics:hover {width: 200px; height: 150px;}

</style>


</head>

<body>
<img src='01.jpg' width="200" height="150" class='pics'>
</body>
</html>



но он работает только в фаерфоксе((

Это сообщение отредактировал(а) Qwesa - 12.1.2008, 02:04
PM MAIL   Вверх
SelenIT
Дата 12.1.2008, 03:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



Цитата(Qwesa @  12.1.2008,  01:50 Найти цитируемый пост)
но он работает только в фаерфоксе((

В Опере тоже. А вот в IE - увы, облом, он понимает псевдокласс :hover только для ссылок. Если обернуть картинки в ссылки и пару раз стукнуть в бубен (разработчикам IE ;), должно заработать везде:
Код

<style type="text/css">
a:hover { background: #fff; /* лекарство для IE - включает св-во hasLayout у ссылки при наведении */ }
a img.pics {width: 100px; height: 75px; border: 0; }
a:hover img.pics {width: 200px; height: 150px; }
</style>
<a href="#"><img src='01.jpg' width="200" height="150" class='pics'></a>



--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Qwesa
Дата 12.1.2008, 14:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 96
Регистрация: 9.10.2007

Репутация: нет
Всего: нет



Да действительно работает в ескпе с переоформлением рисунка на ссылку))

Способ довольно простой и эффективный, но тут работает процесс увеличения картинки, а при этом если она вставлена в таблицу, то при увеличении начинает скакать размер таблицы. Вот поэтому я и хотел бы сделать чтоб картинка не просто увеличивалась а отображалась поверх но уже реального размера, как это сделано в фотоальбоме приведенном выше((
PM MAIL   Вверх
Qwesa
Дата 14.1.2008, 22:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 96
Регистрация: 9.10.2007

Репутация: нет
Всего: нет



Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#111;}
/* slides styling */
.photo {width:300px; height:500px; background:url(lbox/back.jpg) no-repeat center center; text-align:left; position:relative;}
.photo ul.topic {padding:0; margin:0; list-style:none; width:720px; height:auto; position:relative; z-index:10;}
.photo ul.topic li {display:block; width:240px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:239px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}
.photo ul.topic li a ul, 
.photo ul.topic li ul 
{display:none;}
.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}
.photo ul.topic li a:hover ul, 
.photo ul.topic li:hover ul 
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd url(lbox/close.gif) no-repeat right top; width:479px; padding:70px 100px; border:20px solid #aaa;}
.photo ul.topic li a:hover ul li, 
.photo ul.topic li:hover ul li 
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}
.photo ul.topic li a:hover ul li a, 
.photo ul.topic li:hover ul li a 
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}
.photo ul.topic li a:hover ul li a img, 
.photo ul.topic li:hover ul li a img 
{display:block; width:100px; height:75px; border:5px solid #eee;}
.photo ul.topic li a:hover ul li a img.large, 
.photo ul.topic li:hover ul li a img.large 
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}
.photo ul.topic li a:hover ul li a:hover, 
.photo ul.topic li:hover ul li a:hover 
{white-space:normal; position:relative;}
.photo ul.topic li a:hover ul li a:hover img, 
.photo ul.topic li:hover ul li a:hover img 
{position:absolute; left:-50px; top:-32px; width:300px; height:300px; border-color:#fff;}
.photo ul.topic li a:hover ul li a:hover img.large, 
.photo ul.topic li:hover ul li a:hover img.large 
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}
.photo ul.topic li:hover ul li a:focus, 
.photo ul.topic li:hover ul li a:active,
.photo ul.topic li a:hover ul li a:active 
{position:static; outline:0;}
/*блок отвечающий за картинку появляющуюся при наведении мыши*/
.photo ul.topic li:hover ul li a:focus img, 
.photo ul.topic li:hover ul li a:active img, 
.photo ul.topic li a:hover ul li a:active img 
{position:absolute; left:200px; top:170px; width:200px; height:150px; padding:0; background:#000; border:0; z-index:5;}
.photo ul.topic li:hover ul li a:focus img.large, 
.photo ul.topic li:hover ul li a:active img.large, 
.photo ul.topic li a:hover ul li a:active img.large 
{position:absolute; left:15px; top:24px; width:200px; height:150px; padding:0; background:#000; border:4px solid #fff; z-index:10;}
</style>
</head>
<body>
<div class="photo">
<ul class="topic">
<li><a href="#portrait1"><img src="01.jpg" alt="" width="100" height="75" title="" /><img src="01.jpg" alt="" width="200" height="150" class="large" title="" /></a></li>
</ul>
<ul class="topic">
    <li><a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
<li><a href="#portrait1"><img src="01.jpg" alt="" width="200" height="150" title="" /><img src="01.jpg" alt="" width="200" height="150" class="large" title="" /></a></li>
</ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    
</ul>
<br class="clear" />
</div>
</body>
</html





Пытаюсь выхватить из общих стилей, те пункты которые касаются увеличения картинки, но так понимаю что делаю не правильно. Народ подскажите в чем фишка, вернее как реализуется такой эффект((
PM MAIL   Вверх
MoLeX
Дата 15.1.2008, 08:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Местный пингвин
****


Профиль
Группа: Модератор
Сообщений: 4076
Регистрация: 17.5.2007

Репутация: нет
Всего: 140



Qwesa посмотри эту ссылку пример а это если надо Ссылка на скачку.


--------------------
Amazing  smile 
PM MAIL WWW ICQ   Вверх
Qwesa
Дата 26.1.2008, 23:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 96
Регистрация: 9.10.2007

Репутация: нет
Всего: нет



Возник такой вопрос: на странице идет перечисление картинок, можно ли (через hover) только посредствам CSS сделать следующее - при наведении мыши на маленький эскиз картинки, чтоб в каком то месте страницы(рядом) отражался (показывался) вариант картинки в реальных размерах, а при убирании мыши с эскиза, большой вариант исчезал. И к примеру если страница состоит из таблицы с массой ячеек, вожможно ли реализовать чтоб этот большой рисунок отображался по верх всех ячеек, поверх всей содержащийся в них информации?

(примечание - как сделать подобное через яву я знаю) прошу подсказать только что касается CSS
PM MAIL   Вверх
SelenIT
Дата 27.1.2008, 21:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



В принципе можно - в каждую ячейку вложить ссылку с display:block; position: relative; и размером с ячейку, в нее, кроме картинки, вложить пустой span с опред. id, и добавить что-то вроде
Код

a span { display: none; }
a:hover { zoom: 1; } /* чтобы работало в IE (включает hasLayout) */
a:hover span { display:block; position: absolute; top: 0; left: 100%; }
a:hover span#pic1 { width: 640px; height: 480px; background: url(путь_к_большой_картинке_1); }
...
a:hover span#picN { width: 512px; height: 512px; background: url(путь_к_большой_картинке_N); }

Если размеры у всех картинок одинаковы, их можно перенести в общую часть (строка 3), иначе придется прописывать их для каждого span'а, как и пути к картинкам. И еще, для IE может потребоваться это лекарство, чтобы большие картинки кешировались...


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0795 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.