Картинка в тексте

Если есть необходимость добавить скрытую картинку, так чтобы она появлялась тогда, когда вы наведете мышку на определенную часть текста, то ниже дан код и небольшое описание.

Пример: Энциклопедия профессий (выберите медицинские противопоказания).
1. Скопируйте код и добавьте его в редактор страницы в режиме HTML перед тем текстом, в котором вы планируете добавление данного эффекта:

Готовый код:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<title>При наведении на текст, появляется скрытый текст - BlogGood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.bloggood-ru-div
{
display: none;
}
a.bloggood-ru-ssilka:hover+div
{
display: block;
}
</style>
</head>
<body>
<a href="#" class="bloggood-ru-ssilka">ТЕКСТ</a>
<div class="bloggood-ru-div"><img src="ССЫЛКА НА КАРТИНКУ"></div>
</body>
</html>
2. ТЕКСТ заменить на нужный (т.е. вырезать готовый и вставить на это место или пропечатать вновь).
3. Воспользовавшись сервисом https://radikalno.ru/ загрузите необходимую картинку, скопируйте ссылку. Эту ссылку добавьте в код ССЫЛКА НА КАРТИНКУ. Сохраните и смотрите результат!






Источник: bloggood.ru

Комментариев нет:

Отправить комментарий