Изображения с изплаващо описание
.jpg)
сряда
Здравейте, приятели. Нека да е добър денят ви. Как да се появи изплаваща подсказка с описание на изображенията, когато върху тях е курсорът на мишката.
Обикновено когато задържите курсора на мишката върху изображение на уеб страница, се появява текстът „Alt“ - алтернативно описание. То ще се извежда, ако потребителят не вижда изображението, защото то просто не му се показва. По правило това са 1-2 думи.
Това се прави доста просто и всичко лесно се настройва. В самия код има коментари за всички стилове, които могат да бъдат персонализирани, за да съответстват на вашия дизайн.
Вижте пример.
Град Тутракан-градът на залеза, риболова и Дунав. Градът е част от старобългарските крепости от времето на Първото българско царство, а името му отразява титла. „Тмутаракан“ е таркан-военноначалник на гранично подразделение.
Идеята почерпих от . Благодаря, Вика, за темата и кода! И не ми се сърди!
За въпроси моля, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Обикновено когато задържите курсора на мишката върху изображение на уеб страница, се появява текстът „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 режим.Идеята почерпих от . Благодаря, Вика, за темата и кода! И не ми се сърди!
За въпроси моля, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:
Здраве за всички вас! Не забравяйте да правите добро на други хора!