Как над картинкой вывести надпись?

@mozg-bolit · Регистрация: 20.09.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте, пожалуйста помогите реализовать
1)
Выводится ссылки в форме типа

HTML5
1
2
3
4
5
6
7
8
9
<a>
  <img  src="./90.jpg" width="96" height="96">
 </a>
<a>
  <img  src="./91.jpg" width="96" height="96">
 </a>
<a>
  <img  src="./98.jpg" width="96" height="96">
 </a>

Как сделать чтоб при наведении на неё, она немного темнела и на ней высвечивалась надпись типо "Клен" или "Дуб" ну и это зависит от картинки. Думаю её нужно делать как то так onmouseover="titul('Клен')" только что в в самой функции писать...

HTML5
1
2
3
<a onmouseover="titul('Клен')">
  <img  src="./90.jpg" width="96" height="96">
 </a>

Помогите как это реализовать?

2)
И ещё, как сделать чтобы при нажатии, это оставалось. И результат выбора нужно передать в базу, Отправка формы делается по кнопке.
Как это удобно сделать?
1) Сделать скрытый импут и туда прописывать значение выбора "90", "91" или "98"
2) С помощью функции onclick запускать функцию которая запишет в переменную значение, и с помощью скрипта вызванного кнопкой, оно отправиться дальше

HTML5
1
<button type="button" class="btn btn-info btn-lg dropdown-toggle" >Отправить </button>

Добавлено через 16 часов 23 минуты

HTML5
1
2
3
 <a>
 <img class="gift_img" src="./96.jpg" width="96" height="96" alt="Клен">
 </a>

CSS
1
2
img:hover { opacity:.25; }
img { opacity:1; }

Как заставить это делать (img { opacity:1; }) с помощью js и как это зафиксировать при клике, но только для одного элемента ?

@Calse · 12.09.2016, 12:12

Если не прочь сами сделать всплывающую подсказку - http://htmlbook.ru/blog/vsplyv... zka-na-css , довольно хорошо описано как сделать подсказку с различными атрибутами.
Тег title (или кто он там?) мне кажется только после "a" работает, то есть в ссылках. На "img" не будет.

@Padimanskas · 12.09.2016, 15:00

mozg-bolit,

HTML5
1
2
<a href="asdasd">asdasdasd</a>
<span>zxcvzxcvxzvc</span>

CSS
1
2
3
4
5
6
7
span {
    display: none;
}
    
a:hover + span {
    display: block;
}

@mozg-bolit · 12.09.2016, 16:05 **[ТС]**

Как сделать элемент

HTML5
1
2
3
<div id="5" class="photo" data-title="привет">
  <img  src="./96.jpg" width="96" height="96">
 </div>

выделенным с помощью этой функции

JavaScript
1
document.getElementById('5').style.display;

Вот этим я показываю выбор элемента

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
img:hover { opacity:.25; }
img { opacity:1; }
.photo {
    display: inline-block; /* Строчно-блочный элемент */
    position: relative; /* Относительное позиционирование */
   }
   .photo:hover::after {
    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    left: 0; right: 0; bottom: 5px; /* Положение подсказки */
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: rgba(0,42,167,0.6); /* Полупрозрачный цвет фона */
    color: #fff; /* Цвет текста */
    text-align: center; /* Выравнивание текста по центру */
    font-family: Arial, sans-serif; /* Гарнитура шрифта */
    font-size: 11px; /* Размер текста подсказки */
    padding: 5px 10px; /* Поля */
    border: 1px solid #333; /* Параметры рамки */
   }

То есть я так понимаю должно быть что то вроде этого

JavaScript
1
document.getElementById('5').style.display="photo"

???

Новые блоги и статьи Все статьи Все блоги /
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .

@Calse 1 / 1 / 0 Регистрация: 05.03.2013 Сообщений: 24
	12.09.2016, 12:12
	Если не прочь сами сделать всплывающую подсказку - http://htmlbook.ru/blog/vsplyv... zka-na-css , довольно хорошо описано как сделать подсказку с различными атрибутами. Тег title (или кто он там?) мне кажется только после "a" работает, то есть в ссылках. На "img" не будет. 1