Привет, друзья. Как показать всплывающую подсказку с описанием над изображениями при наведении мыши. Обычно на веб странице, при наведении курсора отображается текст "Alt" – альтернативное описание, которое будет выводиться вместо картинки, если у пользователя не отображаются изображения. Как правило это 1 - 2 слова.
Сделаем так , что при наведении на картинку будет полное описание её. Не будем путать с "Alt". Это может быть просто какая - то информация.
Делается это достаточно просто, всё легко настраиваемое. В самом коде я сделала комментарии ко всем стилям, которые можно подогнать под собственный дизайн.
Посмотрите пример
Айские притесы — это очень высокие скалы вдоль реки Ай. Это кусочек моей малой Родины. В детстве бегали сюда купаться. Великолепнейшие виды! Протяженность притесов примерно один километр. Это уникальное творение природы.
Готовый код
То, что выделено розовым цветом замените на нужные вам - Alt("айские притёсы"), адрес изображения и описание его.
Готовый код с всплывающим описанием у изображения вставляем в редакторе сообщения в нужном месте в режиме HTML.
Всем добра и до встречи.
Сделаем так , что при наведении на картинку будет полное описание её. Не будем путать с "Alt". Это может быть просто какая - то информация.
Делается это достаточно просто, всё легко настраиваемое. В самом коде я сделала комментарии ко всем стилям, которые можно подогнать под собственный дизайн.
Посмотрите пример
Айские притесы — это очень высокие скалы вдоль реки Ай. Это кусочек моей малой Родины. В детстве бегали сюда купаться. Великолепнейшие виды! Протяженность притесов примерно один километр. Это уникальное творение природы.
Готовый код
<style type="text/css">
.imm-tooltip {
position: relative;
margin: 10px auto;
}
.imm-tooltip img {
width:450px; /* ширина */
border:1px dashed #036; /* стили рамки */
background-color:lightyellow; /* фон изображения */
padding:5px;
}
.tooltip {
position: absolute;
width:320px; /* ширина всплывающего описания */
font-size:15px; /* размер шрифта */
font-family: Georgia;
top: 15%;
left: 2%;
filter: alpha(opacity=0);
opacity: 0;
padding: 6px;
text-align:justify; /* выравнивание текста */
color: #fff; /* цвет текста */
background: black; /* фон блока с текстом */
-moz-transition:all ease .5s; /* Длительность Перехода*/
-webkit-transition:all ease .5s ;
transition:all ease .5s;
}
.imm-tooltip:hover .tooltip {
filter: alpha(opacity=70);
opacity: .7; /* Прозрачность при наведении мыши */
}
</style>
<div class="imm-tooltip">
<img alt="айские притёсы" src="адрес вашего изображения" /><span class="tooltip">здесь полное описание картинки
</span></div>
.imm-tooltip {
position: relative;
margin: 10px auto;
}
.imm-tooltip img {
width:450px; /* ширина */
border:1px dashed #036; /* стили рамки */
background-color:lightyellow; /* фон изображения */
padding:5px;
}
.tooltip {
position: absolute;
width:320px; /* ширина всплывающего описания */
font-size:15px; /* размер шрифта */
font-family: Georgia;
top: 15%;
left: 2%;
filter: alpha(opacity=0);
opacity: 0;
padding: 6px;
text-align:justify; /* выравнивание текста */
color: #fff; /* цвет текста */
background: black; /* фон блока с текстом */
-moz-transition:all ease .5s; /* Длительность Перехода*/
-webkit-transition:all ease .5s ;
transition:all ease .5s;
}
.imm-tooltip:hover .tooltip {
filter: alpha(opacity=70);
opacity: .7; /* Прозрачность при наведении мыши */
}
</style>
<div class="imm-tooltip">
<img alt="айские притёсы" src="адрес вашего изображения" /><span class="tooltip">здесь полное описание картинки
</span></div>
То, что выделено розовым цветом замените на нужные вам - Alt("айские притёсы"), адрес изображения и описание его.
Готовый код с всплывающим описанием у изображения вставляем в редакторе сообщения в нужном месте в режиме HTML.
Всем добра и до встречи.
оформите подписку на новые шпаргалки
Интересная функция, спасибо, Вика!
ОтветитьУдалитьВиктория, это просто стили CSS , с помощью которых всё это создаётся.
ОтветитьУдалитьИнтересно, Виктория! Ты настоящая волшебница!
ОтветитьУдалитьИрина, не не я это магия CSS
УдалитьБолее простой способ: в редакторе сообщений кликнуть по картинке, в появившемся меню выбрать "Свойства". Появится возможность заполнить две строчки: "текст заголовка" (он же title, будет отображаться при наведении мыши) и "альтернативный текст" (он же alt, будет отображаться вместо картинки, если она не загрузится).
ОтветитьУдалитьАндрей, ну Америки ты не открыл. Это всем понятно. Тут даже в коде alt прописан. title и alt должны быть содержательными и состоять из 3–5 слов. То тут полное описание. Просто элемент оформления элемента.
УдалитьКстати, даже описание у картинки используя функцию свойства можно красиво оформить http://www.shpargalochki.ru/2015/02/krasivaja-nadpis-na-kartinke.html
Ты пишешь: "Обычно на веб странице, при наведении курсора отображается текст "Alt"". Честно говоря, не замечал такого. При наведении отображается "title", если он прописан, конечно.
УдалитьНе знаю, что это за рекомендация делать title и alt из 3-5 слов. Я всегда делаю такой длины, какой считаю нужным. Понятно, что слишком длинные фразы неудобны сами по себе.
Андрей, не выдёргивай из контекста фразы. В посте я пишу "Обычно на веб странице, при наведении курсора отображается текст "Alt" – альтернативное описание, которое будет выводиться вместо картинки, если у пользователя не отображаются изображения." Пиши у себя как считаешь нужным. Вообще - то если ты понял статья не про атрибуты Alt и title, а о всплывающем описании , как элементе веб - дизайна.
ОтветитьУдалить"при наведении курсора отображается текст "Alt"" - это как понимать? Хоть в контексте, хоть без контекста. Я навожу, у меня не отображается.
УдалитьКартинку видишь? Видишь. Написано ведь - если у пользователя НЕ ОТОБРАЖАЕТСЯ изображения. Вот специально сделала http://www.shpargalochki.ru/2015/02/krasivaja-nadpis-na-kartinke.html в самом низу. Отображён текст альтернативный, если картинка не отображена.
ОтветитьУдалитьЯ это знаю и без таких подробных объяснений.
УдалитьНо "текст вместо картинки" и "текст при наведении курсора на картинку" - это совершенно разные вещи.
Ещё раз процитирую тебя:
"при наведении курсора отображается текст "Alt""
А теперь возьми картинку на блоге, заполни alt, но не заполняй title и не добавляй никаких эффектов. И наведи на неё курсор. Текст отобразится?
Андрей, пусть каждый останется при своём. Из пустого в порожнее. Надоело уже воду в ступе толочь.
ОтветитьУдалитьВика, при наведении курсора текст "alt" НЕ ОТОБРАЖАЕТСЯ.
УдалитьВ следующий раз, если увижу у тебя ошибку в статье, буду просто молчать.
Интересная, иногда полезная фича
ОтветитьУдалитьLone Wolf и главное - простая в применении
ОтветитьУдалитьНе скажу, ещё не испытывал :)
Удалить