Как СКРЫТЬ тайтл при наведении курсора, но оставить его в принципе?

Question

pihachu @pihachu

Как СКРЫТЬ тайтл при наведении курсора, но оставить его в принципе?

Добрый день. Как скрыть тайтл картинок при наведении курсора, но не удалять его в целом?
https://i.gyazo.com/5dc20ada3a1f899f4869438ea5f993... (картинка не моя)

UPD. Для вордпреса, без плагинов и для всех отображаемых изображений одновременно. Но самое главное, чтобы для поисковых роботов тайтл не пропадал.

Вопрос задан более трёх лет назад
1209 просмотров

17 комментариев

Подписаться 3 Простой 17 комментариев

fixeri @fixeri

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css"></style>
</head>
<body>
    <img class="hh" title="Photo of my holiday" src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">

    <script type="text/javascript">
        "use strict";
        
        document.querySelector("img").onmouseover = function(e) {
        	let elem = e.target;
        	elem.setAttribute("data-title", elem.getAttribute("title"));
        	elem.removeAttribute('title');
        };

        document.querySelector("img").onmouseout = function(e) {
        	let elem = e.target;
        	elem.setAttribute("title", elem.dataset.title);
        	elem.removeAttribute('data-title');
        };
    </script>
</body>
</html>

Написано более трёх лет назад

pihachu @pihachu Автор вопроса

fixeri, спасибо, способ рабочий, только я забыл уточнить, что нужно это для вордпреса и для всех изображений сразу. И самое главное, чтобы для поисковиков тайтл не удалялся.

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

Я можно спрошу, в alt и title текст разный?

Написано более трёх лет назад
pihachu @pihachu Автор вопроса

Ankhena, title - это имя самой картинки, alt - не задавал. Именно в настройках картинки (уже на сайте) и title, и alt оставил пустыми.

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

pihachu, разумнее заполнить alt.
Всем будет хорошо.
- поисковики всё поймут
- скринридеры всё поймут
- вот эти все ваши заморочки с тайтл напишу, но не покажу, будут не нужны.

Написано более трёх лет назад
pihachu @pihachu Автор вопроса

Ankhena, alt вместо title, т.е. title удалять?

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

pihachu, вы же не собираетесь использовать его по назначению, значит удалять

Написано более трёх лет назад
pihachu @pihachu Автор вопроса

Ankhena, так просто)) Всё работает. Спасибо атдушиии! Так а для чего же тогда нужен тайтл вообще? Просто как подсказка для пользователя?

Написано более трёх лет назад
wisgest @wisgest

pihachu, Ankhena, какие поисковые системы обращают внимание на title, где об этом сказано (всегда был alt)?

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

pihachu, угу. И об этом написано в спецификации ;)

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

wisgest,
какие поисковые системы обращают внимание на title, где об этом сказано (всегда был alt)?

Всегда было и то и другое, а не только alt.
Написано об этом в хелпе поисковых систем, например, Яндекс

Но если текст в title будет дублировать текст в alt, то смысла его указывать не будет никакого.
А поскольку большинство не в состоянии сделать вменяемым даже alt, то про title можно не начинать думать.

Написано более трёх лет назад
pihachu @pihachu Автор вопроса

Ankhena, так поисковый робот всё таки обращает внимание на title? И у двух одинаковых сайтов, он предпочтение отдаст тому сайту, где заполнены и alt, и title, а не только alt?

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

pihachu, я, конечно, не отвечу за действие поисковика. но задам еще один каверзный вопрос для понимания: по какой фразе, по той что в alt или по той, что в title?

Написано более трёх лет назад
pihachu @pihachu Автор вопроса

Ankhena, ну я уже понял, что alt это прямое попадание для поисковика, но может для "пущей выдачи" поисковики как-то суммируют эти два тега?

Написано более трёх лет назад
pihachu @pihachu Автор вопроса

Ankhena, или вы имеете в виду, что если поисковик обнаруживает заполненный тег alt, то дальше и не сканирует?

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

pihachu,
но может для "пущей выдачи" поисковики как-то суммируют эти два тега?

Может.
Наверное, вам всё таки имеет смысл перейти по ссылке и почитать хелпы. И найти аналогичный гугловский и его тоже почитать. Там много всего интересного и не только про альты с тайтлами.
Не думаю, что кто-то захочет копировать их содержимое сюда. Я точно не захочу.

Написано более трёх лет назад
pihachu @pihachu Автор вопроса

Ankhena, спасибо вам ещё раз!

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

PHP

+2 ещё

Простой
Не приходят сообщения с контактной формы, Извините, данные не были переданы?
- 1 подписчик
- 15 июл.
- 191 просмотр
3

ответа
CSS

Простой
Как повторить фильтр с фигмы?
- 2 подписчика
- 15 июл.
- 1320 просмотров
0

ответов
HTML

+1 ещё

Простой
Как лучше всего реализовать данный фон?
- 1 подписчик
- 14 июл.
- 134 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как сделать, чтобы свойства класса прописывались не DOM-узлу, а классу, создаваемому в JS?
- 1 подписчик
- 14 июл.
- 112 просмотров
2

ответа
JavaScript

+1 ещё

Средний
Как сделать перетаскиваемые окна?
- 2 подписчика
- 14 июл.
- 112 просмотров
1

ответ
HTML

+1 ещё

Средний
Не влезает шрифт в input?
- 2 подписчика
- 12 июл.
- 1042 просмотра
1

ответ
HTML

+1 ещё

Простой
Как задать прозрачность изображению?
- 1 подписчик
- 12 июл.
- 158 просмотров
1

ответ
Вёрстка

Средний
Как создать эффект для активной кнопки?
- 1 подписчик
- 09 июл.
- 124 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как сделать, чтобы на сайте картинка при нажатии открывалась в большом размере а при повторном щелчке возвращалась к исходнику? В HTML?
- 1 подписчик
- 07 июл.
- 976 просмотров
6

ответов
JavaScript

+3 ещё

Простой
Как открыть ссылку из html-файла на диске в той же вкладке браузера?
- 1 подписчик
- 07 июл.
- 232 просмотра
2

ответа
Показать ещё Загружается…

HTML-верстальщик (HTML/CSS/JavaScript)

CleanTalk

от 100 000 ₽

Разработчик Vue.js

Совкомбанк Технологии • Красноярск

Frontend-разработчик

MyAdsTarget

от 150 000 ₽

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"></style> </head> <body> <img class="hh" title="Photo of my holiday" src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image"> <script type="text/javascript"> "use strict"; document.querySelector("img").onmouseover = function(e) { let elem = e.target; elem.setAttribute("data-title", elem.getAttribute("title")); elem.removeAttribute('title'); }; document.querySelector("img").onmouseout = function(e) { let elem = e.target; elem.setAttribute("title", elem.dataset.title); elem.removeAttribute('data-title'); }; </script> </body> </html>
fixeri, спасибо, способ рабочий, только я забыл уточнить, что нужно это для вордпреса и для всех изображений сразу. И самое главное, чтобы для поисковиков тайтл не удалялся.
Я можно спрошу, в alt и title текст разный?
Ankhena, title - это имя самой картинки, alt - не задавал. Именно в настройках картинки (уже на сайте) и title, и alt оставил пустыми.
pihachu, разумнее заполнить alt.
Всем будет хорошо.
- поисковики всё поймут
- скринридеры всё поймут
- вот эти все ваши заморочки с тайтл напишу, но не покажу, будут не нужны.
Ankhena, alt вместо title, т.е. title удалять?
pihachu, вы же не собираетесь использовать его по назначению, значит удалять
Ankhena, так просто)) Всё работает. Спасибо атдушиии! Так а для чего же тогда нужен тайтл вообще? Просто как подсказка для пользователя?
pihachu, Ankhena, какие поисковые системы обращают внимание на title, где об этом сказано (всегда был alt)?
pihachu, угу. И об этом написано в спецификации ;)
wisgest,
какие поисковые системы обращают внимание на title, где об этом сказано (всегда был alt)?

Всегда было и то и другое, а не только alt.
Написано об этом в хелпе поисковых систем, например, Яндекс

Но если текст в title будет дублировать текст в alt, то смысла его указывать не будет никакого.
А поскольку большинство не в состоянии сделать вменяемым даже alt, то про title можно не начинать думать.
Ankhena, так поисковый робот всё таки обращает внимание на title? И у двух одинаковых сайтов, он предпочтение отдаст тому сайту, где заполнены и alt, и title, а не только alt?
pihachu, я, конечно, не отвечу за действие поисковика. но задам еще один каверзный вопрос для понимания: по какой фразе, по той что в alt или по той, что в title?
Ankhena, ну я уже понял, что alt это прямое попадание для поисковика, но может для "пущей выдачи" поисковики как-то суммируют эти два тега?
Ankhena, или вы имеете в виду, что если поисковик обнаруживает заполненный тег alt, то дальше и не сканирует?
pihachu,
но может для "пущей выдачи" поисковики как-то суммируют эти два тега?

Может.
Наверное, вам всё таки имеет смысл перейти по ссылке и почитать хелпы. И найти аналогичный гугловский и его тоже почитать. Там много всего интересного и не только про альты с тайтлами.
Не думаю, что кто-то захочет копировать их содержимое сюда. Я точно не захочу.

Answer 1 · 2020-01-06 16:16:55

WP Panda @wppanda5

WordPress Mедведь

Ответ написан более трёх лет назад

Комментировать

Как СКРЫТЬ тайтл при наведении курсора, но оставить его в принципе?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт