Форум Практика оптимизации Любые вопросы от новичков по оптимизации

Увеличение картинки

Z
На сайте с 12.12.2006
Offline
135
zorky
730

Ребят есть старая тема: /ru/forum/comment/3061676

про увеличение изображения при наведении мыши.

Там есть еще ссылка на хороший пример: http://www.cssblog.ru/2007/11/09/vsplyvayushhie-izobrazheniya/#comment-25 - только у меня просьба уточнить..

можно ли следать так ,что бы картинки можно было распологать в одну строку. В примере только одна кортинка - и это все работает. А если мне нужно 5 штук в ряд - то не получается - они (картинки) только одна под другой ставятся.

Может не divами сделать а <ul>?

p.s. Не предлагайте использовать таблицы - в моем случае это не подходит.

p.p.s. предложите наиболее простое рещение возможности всплавающи картинок наподлобие приведенного примера.

Спасибо всем!

dglazkov.ru
богоносец
На сайте с 30.01.2007
Offline
775
богоносец
#1 

<html>

 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

 </head>

 <body>

  <noscript><h1>Нихрена не работает!</h1></noscript>

  <table align="center">

   <tr valign="middle" height="400">

    <td align="center" width="276">

     <img src="http://www.google.ru/intl/en_com/images/logo_plain.png" onMouseOver="this.height='110';return true" onMouseOut="this.height='55';return true" height="55">

    </td> 

    <td width="400" align="center">

     <img src="http://www.cssblog.ru/wp-content/uploads/2007/11/bigimage.jpg" onMouseOver="this.height='300';return true" onMouseOut="this.height='100';return true" height="100">

    </td> 

    <td align="center" width="178">

     <img src="http://imgl.yandex.net/i/www/logo1.png" onMouseOver="this.height='120';return true" onMouseOut="this.height='60';return true" height="60">

    </td>

   </tr>

  </table>

 </body>

</html>

А теперь, перепишите без грешных таблиц, со стилями... посмотрим на длину кода.

medea
На сайте с 19.09.2007
Offline
307
medea
#2
zorky:
Ребят есть старая тема: /ru/forum/comment/3061676

можно ли следать так ,что бы картинки можно было распологать в одну строку. В примере только одна кортинка - и это все работает. А если мне нужно 5 штук в ряд - то не получается - они (картинки) только одна под другой ставятся.

в css напишите

img{

display:inline;

}

Продвижение сайтов (http://www.iqpromo.ru/) под моим присмотром :)
Z
На сайте с 12.12.2006
Offline
135
zorky
#3
medea:
в css напишите

img{
display:inline;
}

Получилось! спасибо!

Только еще вопрос.. картинки появляются друг под другом. надо выставить z-index но куда? 


#pic{  

 background-color: #FFFFFF;  

 position: relative; /* Положение выставлено как relative. 

                        Это необходимо для того, чтобы потом 

                        абсолютно (absolute)спозиционировать 

                        большу картинку относительно левого 

                        верхнего угла слоя */  

 left: 1px;  

 top: 1px;  

 width: 100px;       /* Ширина слоя = ширине миниатюры */ 

 display: inline;

}  

  

/* Описание стиля большой картинки */  

/* Идея в том, что изображение сначала имеет размеры 1х1 и 

   смещено за пределы видимости слоя. */  

#pic a .large {  

 border: 0px;  

 display: block; 

 display: inline; 

 height: 1px;  

 left: -1px;  

 position: absolute;  

 top: -1px;  

 width: 1px;

}  

  

#pic a img {  

 border: 0;  

}  

  

/* Выставляем стиль для ссылки, которая обрамляет изображения */  

#pic a.p1, #pic a.p1:visited {  

 background: #FFFFFF;  

 border: 1px solid #000000;  

 display: block;  

 display: inline;

 height: 100px;  

 left: 0;  

 text-decoration: none;  

 top: 0;  

 width: 100px;

}  

  

/* Стиль для ссылки при наведении на нее мышкой */  

#pic a.p1:hover {  

 background-color: #FFF;  

 color: #000000;  

 text-decoration: none; 

 display: inline;

}  

  

/* Стиль для большого изображения при наведении 

   мышки на миниатюру */  

#pic a.p1:hover .large {  

 border: 1px solid #000000;  

 display: block; 

 display: inline;

 position: absolute; /* Абослютное позиционирование 

                        относительно слоя-контейнера */ 

 top: -100px;        /* Покажем большю картинку справа */  

 left: 105px;        /* по центру от миниатюры */  

 width: 300px;       /* Выставим нужные размеры большой */  

 height: 300px;      /* картинки, потому что она была 1х1 */

 z-index: 500px;        /* это чтоб картинка была в 3D */

}

zorky добавил 31.03.2009 в 12:00

Просчто z-index отчегото правильно работает только в Opera, в IE нет

zorky добавил 31.03.2009 в 17:38

Нашел ответ http://xpoint.ru/forums/internet/html_css/css/thread/42564.xhtml

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий