Всплывающее описание у картинки при наведении мыши

Привет, друзья. Как показать всплывающую подсказку с описанием над изображениями при наведении мыши. Обычно на веб странице, при наведении курсора отображается текст "Alt" –  альтернативное описание, которое будет выводиться вместо картинки, если у пользователя не отображаются изображения. Как правило это 1 - 2 слова.

Сделаем так , что при наведении на картинку будет полное описание её. Не будем путать с "Alt". Это может быть просто какая - то информация.



Делается это достаточно просто, всё легко настраиваемое. В самом коде я сделала комментарии ко всем стилям, которые можно подогнать под собственный дизайн.

Посмотрите пример


nome-immagine

Айские притесы — это очень высокие скалы вдоль реки Ай. Это кусочек моей малой Родины. В детстве бегали сюда купаться. Великолепнейшие виды! Протяженность притесов примерно один километр. Это уникальное творение природы.


Готовый код

<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>


То, что выделено розовым цветом замените на нужные вам - Alt("айские притёсы"), адрес изображения и описание его.

Готовый код с всплывающим описанием у изображения вставляем в редакторе сообщения в нужном месте в режиме HTML.

Всем добра и до встречи.

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :

13 комментариев:

  1. Интересная функция, спасибо, Вика!

    ОтветитьУдалить
  2. Виктория, это просто стили CSS , с помощью которых всё это создаётся.

    ОтветитьУдалить
  3. Интересно, Виктория! Ты настоящая волшебница!

    ОтветитьУдалить
  4. Более простой способ: в редакторе сообщений кликнуть по картинке, в появившемся меню выбрать "Свойства". Появится возможность заполнить две строчки: "текст заголовка" (он же title, будет отображаться при наведении мыши) и "альтернативный текст" (он же alt, будет отображаться вместо картинки, если она не загрузится).

    ОтветитьУдалить
    Ответы
    1. Андрей, ну Америки ты не открыл. Это всем понятно. Тут даже в коде alt прописан. title и alt должны быть содержательными и состоять из 3–5 слов. То тут полное описание. Просто элемент оформления элемента.
      Кстати, даже описание у картинки используя функцию свойства можно красиво оформить http://www.shpargalochki.ru/2015/02/krasivaja-nadpis-na-kartinke.html

      Удалить
    2. Ты пишешь: "Обычно на веб странице, при наведении курсора отображается текст "Alt"". Честно говоря, не замечал такого. При наведении отображается "title", если он прописан, конечно.
      Не знаю, что это за рекомендация делать title и alt из 3-5 слов. Я всегда делаю такой длины, какой считаю нужным. Понятно, что слишком длинные фразы неудобны сами по себе.

      Удалить
  5. Андрей, не выдёргивай из контекста фразы. В посте я пишу "Обычно на веб странице, при наведении курсора отображается текст "Alt" – альтернативное описание, которое будет выводиться вместо картинки, если у пользователя не отображаются изображения." Пиши у себя как считаешь нужным. Вообще - то если ты понял статья не про атрибуты Alt и title, а о всплывающем описании , как элементе веб - дизайна.

    ОтветитьУдалить
    Ответы
    1. "при наведении курсора отображается текст "Alt"" - это как понимать? Хоть в контексте, хоть без контекста. Я навожу, у меня не отображается.

      Удалить
  6. Картинку видишь? Видишь. Написано ведь - если у пользователя НЕ ОТОБРАЖАЕТСЯ изображения. Вот специально сделала http://www.shpargalochki.ru/2015/02/krasivaja-nadpis-na-kartinke.html в самом низу. Отображён текст альтернативный, если картинка не отображена.

    ОтветитьУдалить
    Ответы
    1. Я это знаю и без таких подробных объяснений.
      Но "текст вместо картинки" и "текст при наведении курсора на картинку" - это совершенно разные вещи.
      Ещё раз процитирую тебя:
      "при наведении курсора отображается текст "Alt""
      А теперь возьми картинку на блоге, заполни alt, но не заполняй title и не добавляй никаких эффектов. И наведи на неё курсор. Текст отобразится?

      Удалить
  7. Андрей, пусть каждый останется при своём. Из пустого в порожнее. Надоело уже воду в ступе толочь.

    ОтветитьУдалить
    Ответы
    1. Вика, при наведении курсора текст "alt" НЕ ОТОБРАЖАЕТСЯ.
      В следующий раз, если увижу у тебя ошибку в статье, буду просто молчать.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск