Картинка во всплывающем окне при наведении на ссылку
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);
}
?>
=$arResult["DISPLAY_PROPERTIES"]["brand1"]["NAME"]?>:
<ссылка href="<?=$link?>" class="thumbnail">
<?=$name?>
<?if (trim($renderImage['src'])):?>
<?endif;?>
</ссылка >
?>
Оставить комментарий