Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.01.2019, 13:39
Профессор
Отправить личное сообщение для _marisha Посмотреть профиль Найти все сообщения от _marisha
 
Регистрация: 18.05.2018
Сообщений: 170

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

На данный момент ссылке добавляется картинка:
$('.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 куска кода чтобы одновременно у ссылки убирался текст и добавлялось изображение? Спасибо.
Изображения:
Тип файла: jpg Меню.jpg (6.3 Кб, 6 просмотров)
Тип файла: jpg Меню после.jpg (5.2 Кб, 4 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 30.01.2019, 13:49
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

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

Последний раз редактировалось laimas, 30.01.2019 в 13:51.
Ответить с цитированием
  #3 (permalink)  
Старый 30.01.2019, 14:05
Профессор
Отправить личное сообщение для _marisha Посмотреть профиль Найти все сообщения от _marisha
 
Регистрация: 18.05.2018
Сообщений: 170

Вот кусочек меню
<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С

"А почему не на сервере сразу это определить?" - не знаю как сделать.
Ответить с цитированием
  #4 (permalink)  
Старый 30.01.2019, 14:15
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

<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> - это так уже и сформировано? Тогда откуда здесь уже указано изображение?

Сообщение от _marisha
Меню формируется автоматически
Где формируется на клиенте или на сервере?
Ответить с цитированием
  #5 (permalink)  
Старый 31.01.2019, 05:43
Профессор
Отправить личное сообщение для _marisha Посмотреть профиль Найти все сообщения от _marisha
 
Регистрация: 18.05.2018
Сообщений: 170

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'});


Код меню во вложении.
Вложения:
Тип файла: zip menu.zip (2.6 Кб, 1 просмотров)
Ответить с цитированием
  #6 (permalink)  
Старый 31.01.2019, 07:40
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

То есть эта замена только при условии 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, 31.01.2019 в 07:58.
Ответить с цитированием
  #7 (permalink)  
Старый 31.01.2019, 08:55
Профессор
Отправить личное сообщение для _marisha Посмотреть профиль Найти все сообщения от _marisha
 
Регистрация: 18.05.2018
Сообщений: 170

laimas,
Сообщение от laimas
То есть эта замена только при условии if ($USER->GetID() == 3656)?
- это просто чтобы доработка отображалась для определенного пользователя, т.к. доработка ведется на рабочем сайте и обычные пользователи будут видеть ошибки, если они возникли на стадии доработки.
Сообщение от laimas
А текст "TookALook" находится в перовом элемента А, вот в этом <a href="<?=$arResult["ALL_ITEMS"][$itemID]["LINK"]?>"?
- текст "TookALook" находится в этом элементе. Но в нем также находятся наименования других разделов ("Блузки, джемпера", "Брюки" и т.д.). Поэтому не знаю как иначе конкретно выделить именно пункт "TookALook", не затрагивая остальные.
В стр 218 как раз выводятся наименования разделов
Ответить с цитированием
  #8 (permalink)  
Старый 31.01.2019, 15:04
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

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

<?=$USER->GetID()==3656 ? str_replace('TookALook', '', $arResult["ALL_ITEMS"][$itemID]["TEXT"]) : $arResult["ALL_ITEMS"][$itemID]["TEXT"]?>
Ответить с цитированием
  #9 (permalink)  
Старый 31.01.2019, 15:19
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от _marisha
В стр 218 как раз выводятся наименования разделов
В этой строке вывод </li>. Есть в строке 220 ссылка с таким текстом, и если тоже заменить, то аналогично. А вообще, что значит "видеть" ошибки, и почему они не смогут их увидеть с картинкой, если ссылка то никуда не исчезает? И такие вещи лучше загодя определять, один раз, перед циклом, а в цикле вывод.
Ответить с цитированием
  #10 (permalink)  
Старый 01.02.2019, 05:12
Профессор
Отправить личное сообщение для _marisha Посмотреть профиль Найти все сообщения от _marisha
 
Регистрация: 18.05.2018
Сообщений: 170

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;
}
Сообщение от laimas
А вообще, что значит "видеть" ошибки
- доработка применяется только для пользователя, который авторизован и с ID=3656
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Найти все блоки текста между символами и запомнить их индексы Arhitector Общие вопросы Javascript 7 20.08.2018 00:33
Не получается изменить стандартные действия ссылки Dolphin jQuery 9 20.09.2016 12:36
картинка перекрывает ссылку Ваня98 Общие вопросы Javascript 0 12.01.2016 19:53
Функция вместо ссылки Sergey_New Общие вопросы Javascript 2 08.09.2011 23:17
Результать на ajax запрос какаято ерунда, вместо текста, почему? aRpi Общие вопросы Javascript 1 18.04.2011 13:13