telephone-icon+38(097)195-66-17
telephone-icon+38(063)211-55-81
Main menu
ГлавнаяБлогCSSКартинка во всплывающем окне при наведении на ссылку

Картинка во всплывающем окне при наведении на ссылку

При наведении курсора мышки на ссылку вывести картинку

CSS
.thumbnail{  
position: relative;  
z-index: 0;  
}  
.thumbnail:hover{  
background-color: transparent;  
z-index: 50;  
}  
.thumbnail span{  
position: absolute;  
background-color: #f3f3f3;  
left: -1000px;  
border: 1px solid white;  
visibility: hidden;  
text-decoration: none;  
border-radius: 1px 1px 1px 1px; 
-moz-border-radius: 1px 1px 1px 1px; 
-webkit-border-radius: 1px 1px 1px 1px; 
}  
.thumbnail span img{ 
border-width: 0;  
padding: 2px;  
}  
.thumbnail:hover span{ 
visibility: visible;  
top: 0;  
left: 60px; 
}  
Например, на детальной странице товара в битриксе выведем ссылку на бренд и покажем картинку при наведении.
<?
GetNext())
{
 $link = $ar_res['DETAIL_PAGE_URL'];
 $name = $ar_res['NAME'];
 $renderImage = CFile::ResizeImageGet($ar_res['PREVIEW_PICTURE'], Array("width" => 200, "height" => 200), BX_RESIZE_IMAGE_PROPORTIONAL, false);
}
?>
:
    
        <ссылка href="<?=$link?>" class="thumbnail">
            <?=$name?> 
            <?if (trim($renderImage['src'])):?> 
                <?=$name?>
            <?endif;?>
        </ссылка >
    

?>
ВКонтакт Facebook Google Plus Одноклассники Twitter Livejournal Liveinternet Mail.Ru

Возврат к списку