Картинка во всплывающем окне при наведении на ссылку
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;?>
</ссылка >
?>
Оставить комментарий