X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Превью
EARL381
EARL381
Topic Starter сообщение 3.12.2012, 15:40; Ответить: EARL381
Сообщение #1


На чем пишется такое превью? При наведении мыши на картинку/ссылку.
[IMG]http://cs403223.userapi.com/v403223392/62da/AzQovGCyJA0.jpg[/IMG]
Буду очень признателен за ссылку. Даже можно чтобы я каждое превью наполнял вручную.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Bugnet
Bugnet
сообщение 3.12.2012, 20:24; Ответить: Bugnet
Сообщение #2


1.Можно сделать попроще - используя CSS3 с минимумом оформления и без функционала (кнопок, ссылок). Вот демо-страница

2.Либо используя JS или его фреймворк jquery. При таком варианте можно "напихать" в превью чего угодно, вставить любой фон и функционал и привести к полному соответствию с Вашими пожеланиями. Вот упрощённая демо-страница - только идея.

3. Найти готовый подходящий jquery-плагин. Тут уж ищите сами, прийдётся принять вид и возможности предоставляемые плагином.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Bartle96
Bartle96
сообщение 3.12.2012, 22:34; Ответить: Bartle96
Сообщение #3


Сделайте при помощи js css и html
При наведении на картинку показывается div с содержимом
С помощью css сделайте оформление и/или анимацию
Так же можно сделать ajax загрузку для снижения трафика и ускорении загрузки страницы
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
EARL381
EARL381
Topic Starter сообщение 4.12.2012, 17:33; Ответить: EARL381
Сообщение #4


Всем спасибо, делал при помощи CSS, вот что вышло. Хотелось бы немного по другому. Как сделать top-отступы не от текста, а от верха сайта? И как прикрепить изображение уголочка как в приведенном примере в 1 посту?

+ Если ссылка в левой стороне экрана то подсказка заходит за монитор, как этого избежать?

[CSS].tooltip {
border-bottom: 0px dotted #000000;
color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}

.tooltip span {
margin-left: -999em;
position: absolute;
}

.tooltip:hover span {
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute;
left: auto;
top: 0;
z-index: 99;
margin-left: 0;
width: 0;
}
.tooltip:hover img {
border: 0;
margin: 0px 0 0 0px;
float: left;
position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif;
font-size: 1.2em;
font-weight: bold;
display: block;
padding: 0em 0 0em 0;
}
.classic { padding: 0em 0em; }
.custom { padding: 0em 0em 0em 0em; }
<strong>* html</strong> a:hover { background: transparent; }

.classic { background: #FFFFFF; border: 0px solid #FFFFFF; } /* Цветовая схема окна */[/CSS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
EARL381
EARL381
Topic Starter сообщение 16.12.2012, 2:25; Ответить: EARL381
Сообщение #5


Поднимаю тему

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Работаю в PhotoShop - аватарки, логотипы, превью, шапки, оформление youtube, баннеры gif
16 Alifer 26526 29.11.2023, 20:15
автор: Alifer
Открытая тема (нет новых ответов) Обложки (превью) для видео YouTube
10 Kabardin 9937 10.7.2022, 14:14
автор: Kabardin
Открытая тема (нет новых ответов) Превью и прогнозы на футбол
2 drunkmagic 2027 17.1.2016, 19:29
автор: drunkmagic
Открытая тема (нет новых ответов) Как сделать плавное развертывание и свертывание блока страницы с превью?
9 jekadog 8281 23.5.2013, 11:55
автор: -Wins-


 



RSS Текстовая версия Сейчас: 24.4.2024, 2:54
Дизайн