Картинка вместо текста ссылки
 

Доброго времени суток!
Существует необходимость вместо текста ссылки в пункте меню добавить картинку.
На данный момент меню выглядит так (скрин "Меню")
Необходимо сделать так (скрин "Меню после")

На данный момент ссылке добавляется картинка:

$('.bx_horizontal_menu_advaced .bx_hma_one_lvl>a:contains("TookALook")').css({'background':'url("https://afr-shop.ru/upload/medialibrary/67d/Bez-fona-s-tsvetom-teksta.png") no-repeat', 'background-size':'102px 90px', 'margin-top': '-17px'});

А потом вместо текста ссылки ничего не выводим

$('[href*="/catalog/tookalook/"]').text('');

Только вот при обновлении страницы сразу видно что подставляется картинка и потом убирается текст ссылки.

Возможно ли как-то скомпоновать 2 куска кода чтобы одновременно у ссылки убирался текст и добавлялось изображение? Спасибо.

$('.bx_horizontal_menu_advaced .bx_hma_one_lvl>a:contains("TookALook")').text('') .css({.... Или удалять в тексте TookALook. Показать надо бы код структуры меню, кусочек.

А почему не на сервере сразу это определить?

Вот кусочек меню

<ul id="ul_catalog_menu_XEVOpk">
		     <!-- first level-->
				<li onmouseover="BX.CatalogMenu.itemOver(this);" onmouseout="BX.CatalogMenu.itemOut(this)" class="bx_hma_one_lvl dropdown" style="width: 10.7565%;" id="menu-item-1">

				<a href="/catalog/tookalook/" style="background: url(&quot;https:/upload/medialibrary/67d/Bez-fona-s-tsvetom-teksta.png&quot;) 0% 0% / 102px 90px no-repeat; margin-top: -17px;"></a>

							<span style="display: none"></span>
				<span class="bx_children_advanced_panel animate">
					<img src="" alt="">
				</span>
				</li>
		     <!-- first level-->
				<li onmouseover="BX.CatalogMenu.itemOver(this);" onmouseout="BX.CatalogMenu.itemOut(this)" class="bx_hma_one_lvl dropdown" style="width: 17.4941%;" id="menu-item-4">

				<a href="/catalog/bluzki_dzhempera/">

					Блузки, джемпера				</a>

							<span style="display: none"></span>
				<span class="bx_children_advanced_panel animate">
					<img src="" alt="">
				</span>
				
		     <!-- first level-->
				<li onmouseover="BX.CatalogMenu.itemOver(this);" onmouseout="BX.CatalogMenu.itemOut(this)" class="bx_hma_one_lvl 
								" style="width: 6.73759%;">
				<a href="/catalog/bryuki/">

					Брюки				</a>
				</li>
		</ul>

Меню формируется автоматически на основании дерева групп из 1С

"А почему не на сервере сразу это определить?" - не знаю как сделать.

<a href="/catalog/tookalook/" style="background: url(&quot;https:/upload/medialibrary/67d/Bez-fona-s-tsvetom-teksta.png&quot;) 0% 0% / 102px 90px no-repeat; margin-top: -17px;"></a> - это так уже и сформировано? Тогда откуда здесь уже указано изображение?

Где формируется на клиенте или на сервере?

laimas, "это так уже и сформировано?" - style добавляется с помощью скрипта

$('.bx_horizontal_menu_advaced .bx_hma_one_lvl>a:contains("TookALook")').css({'background':'url("https://afr-shop.ru/upload/medialibrary/67d/Bez-fona-s-tsvetom-teksta.png") no-repeat', 'background-size':'102px 90px', 'margin-top': '-17px'});

Код меню во вложении.

То есть эта замена только при условии if ($USER->GetID() == 3656)? А текст "TookALook" находится в перовом элемента А, вот в этом <a href="<?=$arResult["ALL_ITEMS"][$itemID]["LINK"]?>"? Если так, то почему бы не задать и описать некое имя класса:

.xxxx {
    background: url([url]https://afr-shop.ru/upload/medialibrary/67d/Bez-fona-s-tsvetom-teksta.png[/url]) no-repeat;
    background-size: 102px 90px;
    margin-top: -17px
}

А по условию определять:

<a href="<?=$arResult["ALL_ITEMS"][$itemID]["LINK"]?>" 
		 <?=is_array($arColumns) && count($arColumns) > 0 && $existPictureDescColomn 
            ? 'onmouseover="obj_<?=$menuBlockId?>.changeSectionPicure(this);"'
			: null?>
         class="<?$USER->GetID()==3656 ? 'xxxx' : null?>"><?=$USER->GetID()==3656 ? null : $arResult["ALL_ITEMS"][$itemID]["TEXT"]?></a>

и не нужно никаких скриптов на клиенте. Если я правильно разобрался что к чему, это нужный А и $arResult["ALL_ITEMS"][$itemID]["TEXT"] это и есть текст "TookALook".

PS. А как будет отображаться ссылка с картинкой фоновой и без текста (правда если эта ссылка имеет только текст "TookALook"), без указания явных размеров?

laimas,
- это просто чтобы доработка отображалась для определенного пользователя, т.к. доработка ведется на рабочем сайте и обычные пользователи будут видеть ошибки, если они возникли на стадии доработки.
- текст "TookALook" находится в этом элементе. Но в нем также находятся наименования других разделов ("Блузки, джемпера", "Брюки" и т.д.). Поэтому не знаю как иначе конкретно выделить именно пункт "TookALook", не затрагивая остальные.
В стр 218 как раз выводятся наименования разделов

Это как, если по картинке, это текст, а далее "Блузки, джемпера", "Брюки", и в коде результирующем, что показан, "Блузки, джемпера", "Брюки" это отдельные ссылки?

Как бы то ни было, но если все таки есть и полезный текст, то удалять его, то есть вот так:

<?=$USER->GetID()==3656 ? str_replace('TookALook', '', $arResult["ALL_ITEMS"][$itemID]["TEXT"]) : $arResult["ALL_ITEMS"][$itemID]["TEXT"]?>

В этой строке вывод </li>. Есть в строке 220 ссылка с таким текстом, и если тоже заменить, то аналогично. А вообще, что значит "видеть" ошибки, и почему они не смогут их увидеть с картинкой, если ссылка то никуда не исчезает? И такие вещи лучше загодя определять, один раз, перед циклом, а в цикле вывод.

laimas,
В общем решили сделать с помощью css.
a[href="/catalog/tookalook/"]
{
background-image:url("/teksta.png");
background-size:102px 90px;
background-position: center;
font-size:0;
min-width: 110px;
background-repeat: no-repeat;
}
- доработка применяется только для пользователя, который авторизован и с ID=3656