Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум (новые сообщения вниз) Структурный форум

тема: при наведении появляется изображение

Сообщения:  [1-3] 

 
 автор: Даниэль   (30.04.2008 в 22:19)   письмо автору
 
   для: Misterio   (28.04.2008 в 16:26)
 

Если делать так то где скрыто изображение получается отступ в размер самого изображения.Это потому что position: static;.

   
 
 автор: Misterio   (28.04.2008 в 16:26)   письмо автору
 
   для: Даниэль   (27.04.2008 в 22:50)
 

Попробуйте так:


.thumbnail{  
    position: relative;  
    z-index: 0;  
}  

.thumbnail:hover{  
    background-color: transparent;
    z-index: 300;  
}  

.thumbnail span{   
    position:static;  
    background-color: lightyellow;  
    padding: 0px;   
    border: 1px solid gray;  
    visibility:hidden;  
    color: black;  
    text-decoration: none;  
}  

.thumbnail span img{   
    border-width: 0;  
    padding: 2px; 
    float:left;  
}  

.thumbnail:hover span{  
    visibility: visible;  
    top: 80; 
    float:left;

   
 
 автор: Даниэль   (27.04.2008 в 22:50)   письмо автору
 
 

Как сделать так что бы изображение при наведении появлялось не с права, а слева?
Вот css:

.thumbnail{ 
    position: relative; 
    z-index: 0; 


.thumbnail:hover{ 
    background-color: transparent; 
    z-index: 300; 


.thumbnail span{  
    position: absolute; 
    background-color: lightyellow; 
    padding: 5px;  
    border: 1px solid gray; 
    visibility: hidden; 
    color: black; 
    text-decoration: none; 


.thumbnail span img{  
    border-width: 0; 
    padding: 2px; 


.thumbnail:hover span{ 
    visibility: visible; 
    top: 80; 


Вот html:

<div style="float: right; padding-right: 20px;">
    <p>
    <a class="thumbnail" href="#thumb">
    <img src="photos/Forest.jpg" width="160" height="120" border="0">
    <span><img src="photos/Forest.jpg" width="320" height="240"></span>
    </a>
    </p>
    <p>
    <a class="thumbnail" href="#thumb">
    <img class="thumbnail" src="photos/Humpback-Whale.jpg" width="160" height="120" border="0">
    <span><img class="thumbnail" src="photos/Humpback-Whale.jpg" width="320" height="240"></span>
    </a>
    </p>
    <p>
    <a class="thumbnail" href="#thumb">
    <img class="thumbnail" src="photos/Humpback-Whale.jpg" width="160" height="120" border="0">
    <span><img class="thumbnail" src="photos/Humpback-Whale.jpg" width="320" height="240"></span>
    </a>
    </p>
    </div>

Заранее спасибо!

   

Сообщения:  [1-3] 

Форум разработан IT-студией SoftTime
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования