Изображения с изплаващо описание

Изображения с изплаващо описание
Здравейте, приятели. Нека да е добър денят ви. Как да се появи изплаваща подсказка с описание на изображенията, когато върху тях е курсорът на мишката.
Обикновено когато задържите курсора на мишката върху изображение на уеб страница, се появява текстът „Alt“ - алтернативно описание. То ще се извежда, ако потребителят не вижда изображението, защото то просто не му се показва. По правило това са 1-2 думи.

    Изплаващо описание

    Днес ще направим така, че когато задържите курсора на мишката върху изображението, да се появи пълното му описание. Нека не го бъркаме с „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: #000; /* цвят на текста */
    background: lightyellow; /* фон на блока с текста */
    -moz-transition:all ease .2s; /* време на задържане*/
    -webkit-transition:all ease .2s ;
    transition:all ease .2s;
    }
    .imm-tooltip:hover .tooltip {
    filter: alpha(opacity=70);
    opacity: .7; /* прозрачност под курсор */
    }
    </style>
    <div class="imm-tooltip">

    <img alt="град Тутракан" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCygmbd1KPGmBV_X2dLGAvaaYzmXk7CYCr52jfR0mdT6ccrMFYBQvggT5FN75Vl4ks7qZH8DrPHoBV08Y1Ac0coZ0p3sZqcaKOBec-Txzfmajvjv2tk-mjeB4YxHNh6dSGYwTJlU3yd-Y/h120/tutrakan-min.jpg" /><span class="tooltip">Град Тутракан-градът на залеза, риболова и Дунав. Градът е част от старобългарските крепости от времето на Първото българско царство, а името му отразява титла. „Тмутаракан“ е таркан-военноначалник на гранично подразделение.</span></div>


    Настройки

    Това, което е маркирано в червено трябва да се замени с необходимите ви Alt, адрес на изображението и описанието му.

    Инсталиране

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

    Идеята почерпих от Виктория Барад. Благодаря, Вика, за темата и кода! И не ми се сърди!

    За въпроси моля, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:

    BGtop

    Здраве за всички вас! Не забравяйте да правите добро на други хора!
    OpenCloseComments
    Cancel