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

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

???

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .

@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

Опции темы