шпаргалки блогерши
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.
Всплывающее описание у картинки при наведении мыши
Привет, друзья. Как показать всплывающую подсказку с описанием над изображениями при наведении мыши. Обычно на веб странице, при наведении курсора отображается текст «Alt» – альтернативное описание, которое будет выводиться вместо картинки, если у пользователя не отображаются изображения. Как правило это 1 — 2 слова.
Сделаем так , что при наведении на картинку будет полное описание её. Не будем путать с «Alt». Это может быть просто какая — то информация.
Делается это достаточно просто, всё легко настраиваемое. В самом коде я сделала комментарии ко всем стилям, которые можно подогнать под собственный дизайн.
Айские притесы — это очень высокие скалы вдоль реки Ай. Это кусочек моей малой Родины. В детстве бегали сюда купаться. Великолепнейшие виды! Протяженность притесов примерно один километр. Это уникальное творение природы.
Готовый код
opacity: 0;
padding: 6px;
text-align:justify; /* выравнивание текста */
color: #fff; /* цвет текста */
background: black; /* фон блока с текстом */
-moz-transition:all ease .5s; /* Длительность Перехода*/
-webkit-transition:all ease .5s ;
transition:all ease .5s;
>
.imm-tooltip:hover .tooltip filter: alpha(opacity=70);
opacity: .7; /* Прозрачность при наведении мыши */
>
То, что выделено розовым цветом замените на нужные вам — Alt(» айские притёсы «), адрес изображения и описание его.
Готовый код с всплывающим описанием у изображения вставляем в редакторе сообщения в нужном месте в режиме HTML.
CSS Tooltip
A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element:
Basic Tooltip
Create a tooltip that appears when the user moves the mouse over an element:
Example
/* Tooltip text */
.tooltip .tooltiptext visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text — see examples below! */
position: absolute;
z-index: 1;
>
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext visibility: visible;
>
Example Explained
HTML: Use a container element (like ) and add the «tooltip» class to it. When the user mouse over this , it will show the tooltip text.
The tooltip text is placed inside an inline element (like ) with class=»tooltiptext» .
CSS: The tooltip class use position:relative , which is needed to position the tooltip text ( position:absolute ). Note: See examples below on how to position the tooltip.
The tooltiptext class holds the actual tooltip text. It is hidden by default, and will be visible on hover (see below). We have also added some basic styles to it: 120px width, black background color, white text color, centered text, and 5px top and bottom padding.
The CSS border-radius property is used to add rounded corners to the tooltip text.
The :hover selector is used to show the tooltip text when the user moves the mouse over the with class=»tooltip» .
Positioning Tooltips
In this example, the tooltip is placed to the right ( left:105% ) of the «hoverable» text (). Also note that top:-5px is used to place it in the middle of its container element. We use the number 5 because the tooltip text has a top and bottom padding of 5px. If you increase its padding, also increase the value of the top property to ensure that it stays in the middle (if this is something you want). The same applies if you want the tooltip placed to the left.
Всплывающая подсказка на CSS
Рассмотрим реализацию простой текстовой подсказки, всплывающей при наведении мыши на элемент. Особенностью способа является использование только CSS стилей, без JavaScript кода.
Для элемента, над которым требуется вывести всплывающую подсказку, добавляем атрибут «data-hint». Он должен содержать простую текстовую строку. Использование html тегов недопустимо.
[data-hint] < position: relative; cursor: hint; >[data-hint]::after < opacity: 0; width: max-content; color: #FFFFFF; background-color: rgba(0,0,0,.7); border-radius: 6px; padding: 10px; content: attr(data-hint); font-size: 12px; font-weight: 400; line-height: 1em; position: absolute; top: -5px; left: 50%; transform: translate(-50%, -100%); pointer-events: none; transition: opacity 0.2s; >[data-hint]:hover::afterДля элементов с атрибутом «data-hint» устанавливаем относительное позиционирование и создаём псевдоэлемент «after». Он будет иметь абсолютное позиционирование и содержимое текстовой подсказки.
- opacity: 0 — устанавливаем полную прозрачность;
- width: max-content — ширина вычисляется в зависимости от содержимого;
- transform: translate(-50%, -100%) — центрирование подсказки по горизонтали над основным элементом;
- pointer-events: none — отключаем события мыши над псевдоэлементом;
- transition: opacity 0.2s — плавное изменение прозрачности;
Позиционирование
Для подсказки справа добавляем элементу класс «hint-right»:
Для позиционирования слева добавляем класс «hint-left»:
Аналогично вывод снизу «hint-bottom»:
В примерах используется небольшой отступ «-5px» от основного элемента. В некоторых случаях его можно установить равным нулю.
Кроме предложенного способа можете воспользоваться готовой миниатюрной css библиотекой «Hint.css». Она предлагает аналогичное решение, но в другом оформлении.
Creating Tooltips for Images with CSS
Cascading Style Sheets (CSS) are used in Web development to format Web page text, layout Web pages, and enhance hyperlinks. Cascading Style Sheets can also be used to create more dynamic effects such as tooltips, the pop-up text messages that appear when an HTML element is moused over.
Tooltips can be created with the HTML title attribute, but the resulting tooltip stays visible for only a few seconds and it can’t be formatted. Tooltips can also be created using JavaScript and CSS, but this requires advanced knowledge of JavaScript. In this article I demonstrate how to use CSS to create tooltips that appear when a Web page image is moused over.
The Technique
Move your mouse over the image below. The box that pops up was created using only Cascading Style Sheets.
The HTML code used to create this effect looks like this:
This is a Monarch butterfly. Monarchs belong to the family Daniidae, the so-called milkweed butterflies. Like other members of the Daniidae, Monarch caterpillars feed almost exclusively on plants in the milkweed family, hence the name milkweed butterflies.
In the above HTML code the image is nested within a tag and an tag. Since we’re using the tag only for this effect and not a working hyperlink, the href attribute is set to the dummy value «#». The tag itself is critically important for reasons explained below. Note also that the tag is nested within the and tags. The text within the tag is the text that will appear in the actual tooltip.
The CSS code used to create this effect looks like this:
div.photo-container a text-decoration: none;
color: black;
cursor: default;
font-weight: normal;
>
div.photo-container a span visibility: hidden;
position: absolute;
left: 15em;
top: -2.3em;
background: #ffff6b;
width: 17em;
border: 1px solid #404040;
font-size: 0.8em;
padding: 0.3em;
cursor: default;
line-height: 1.4;
>
div.photo-container a:hover span visibility: visible;
>
In the above CSS code block there are 5 classes. The first class, div.photo-container, sets the definitions for the containing element. The second class, div.photo-container a, sets the definitions for the element contained in the element. Note that the text-decoration property has been set to none in this class. This is because we don’t want a blue border to appear around the image or the text itself to be underlined in blue. Moving on, the third class is div.photo-container a span and this sets the definitions for the element. As mentioned above, the element contains the text that appears in the tooltip. The important properties and values for this element are visibility: hidden, which keeps the element hidden, and position: absolute, which positions the element. The div.photo-container a:hover span class is the meat of the code for this effect. Note that the visibility property is set to visible — when the mouse moves over the image the code in this class kicks in and makes the otherwise hidden span visible, creating the tooltip. In this respect a:hover functions somewhat like a mouseover event in JavaScript. As long as the mouse remains over the image the tooltip will remain visible. The fifth and final class, div.photo-container img sets the dimensions of the image.
Problems
Since this effect depends on wrapping an image element in an tag, an HTML hyperlink will be created. If a user clicks on the image the page will jump to the top of the browser screen. Nothing can be done to prevent this, but CSS can be used to remove most of the cues that might lead a user to click the image in the first place. In the sample CSS code block above, note that the text-decoration property has been set to none, the color property has been set to black, and the cursor property has been set to default. This code removes most of the conventional cues that would identify the image as a hyperlink to a user. The one cue that the CSS code doesn’t remove (and can’t remove) is the URL that appears in the browser’s status bar. Accessing and manipulating the browser’s status bar is fairly easy using JavaScript however, and a snippet of JavaScript code can be added that hides the URL in the status bar when the image is moused over.
The other issue is browser compatability. I’ve tested this code on Opera 9.64, Firefox 3.5.2, and Internet Explorer 8 on a PC, and Safari 1.3.2 and Opera 9.64 on a Mac and it works fine. In theory any browser that understands Cascading Style Sheets, Level 2.1 should be able to render this code correctly but there could be exceptions.
RDH lives and works in Chicago, Illinois. His background is in webmastering, front-end Web development, and content management. When he isn’t working he applies his passion for writing and photography to promoting the Montrose Point Bird Sanctuary in Chicago.
Other Web Development Articles By Robert D. Hughes