Добро пожаловать, Гость. Пожалуйста, выберите Вход или Регистрация
Привет.лв Главная Справка Поиск Вход Регистрация
Страниц: 1
Печать Bookmark and Share
Удалить этот блок рекламы?
Удали рекламу
Загловок в окошке (Прочитано 7028 раз)
WHacker
Предмет симпатий
****
Вне Форума

ololo

Сообщений: 214
Латвия
Пол: male
Загловок в окошке
03.07.2009 :: 14:02:01
 
В нете немало сайтов когда наводишь на тот или иной объект и выскакивает возле мышки окошко с заголовком элемента, вот пример тому "Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
" когда наводишь на "?" в кружочке (он находиться возле цены, в левом блоке страницы) вылетает плавненько окошко с текстом, а точнее заголовком, вот как сделать также только без плавности и такой толстой рамки?
Подмигивание Улыбка Печаль Со сжатыми губами
Наверх
 
 
WWW xPA3OPx 482032743   IP записан
Ramzies
Администратор
*****
Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male
Re: Загловок в окошке
Ответ #1 - 03.07.2009 :: 14:12:14
 
На flaer.lv это сделано с помощью библиотеки Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
.

Тоесть надо скачать и подгрузи на страницу Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
.

Далее так же на страницу нужно вставить такой JavaScript код: Код:
function simple_tooltip(target_items, name) {
  $(target_items).each(function(i) {
    $("body").append("<div class='" + name + "' id='" + name + i + "'><p>" + $(this).attr('title') + "<\/p><\/div>");
    var my_tooltip = $("#" + name + i);

    $(this).removeAttr("title").mouseover(function() {
	my_tooltip.css({
	  opacity: 0.8,
	  display: "none"
	}).fadeIn(400);
    }).mousemove(function(kmouse) {
	my_tooltip.css({
	  left: kmouse.pageX - 30,
	  top: kmouse.pageY + 20
	});
    }).mouseout(function() {
	my_tooltip.fadeOut(400);
    });
  });
}
$(document).ready(function() {
  simple_tooltip(".help", "tooltip");
}); 



Этот код смотрит все кнопки с class="help" и отображает то что у них в title="Jūsu izvēlēta bannera cena.".

Весь пример Код:
<a href="#" class="help" title="Jūsu izvēlēta bannera cena.">help</a> 

Наверх
 
 

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
WHacker
Предмет симпатий
****
Вне Форума

ololo

Сообщений: 214
Латвия
Пол: male
Re: Загловок в окошке
Ответ #2 - 03.07.2009 :: 14:25:18
 
Ты хочешь сказать что прямо в код страницы пихать надо это?!!:
Код:
function simple_tooltip(target_items, name) {
  $(target_items).each(function(i) {
    $("body").append("<div class='" + name + "' id='" + name + i + "'><p>" + $(this).attr('title') + "<\/p><\/div>");
    var my_tooltip = $("#" + name + i);

    $(this).removeAttr("title").mouseover(function() {
	my_tooltip.css({
	  opacity: 0.8,
	  display: "none"
	}).fadeIn(400);
    }).mousemove(function(kmouse) {
	my_tooltip.css({
	  left: kmouse.pageX - 30,
	  top: kmouse.pageY + 20
	});
    }).mouseout(function() {
	my_tooltip.fadeOut(400);
    });
  });
}
$(document).ready(function() {
  simple_tooltip(".help", "tooltip");
}); 

Лучше напиши - что надо скачать (дай линк), как это прилепить к странице (что в код стр. лепить), что надо писать в блоке (titile, alt и т.д.). И желательно как на Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
только не оранжевая рамочка нужна, а серая.
Наверх
 
 
WWW xPA3OPx 482032743   IP записан
Ramzies
Администратор
*****
Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male
Re: Загловок в окошке
Ответ #3 - 03.07.2009 :: 14:33:27
 
Скачать 1.3.2 версию можно тут: Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!


Выглядеть все будет так: Код:
[script type="text/javascript" src="Путь_к_jquery"][/script]

[script type="text/javascript"]
function simple_tooltip(target_items, name) {
  $(target_items).each(function(i) {
    $("body").append("<div class='" + name + "' id='" + name + i + "'><p>" + $(this).attr('title') + "<\/p><\/div>");
    var my_tooltip = $("#" + name + i);

    $(this).removeAttr("title").mouseover(function() {
	my_tooltip.css({
	  opacity: 0.8,
	  display: "none"
	}).fadeIn(400);
    }).mousemove(function(kmouse) {
	my_tooltip.css({
	  left: kmouse.pageX - 30,
	  top: kmouse.pageY + 20
	});
    }).mouseout(function() {
	my_tooltip.fadeOut(400);
    });
  });
}
$(document).ready(function() {
  simple_tooltip(".help", "tooltip");
});
[/script]

<a href="#" class="help" title="Jūsu izvēlēta bannera cena.">help</a>
 



Только замени [ на < и ] на >

Этот скрипт, когда курсор попадает на кнопку с class="help" создает форму Код:
<div id="tooltip0" class="tooltip" style="opacity: 0.8; left: 295px; top: 324px; display: none;">
<p>Тут_появляться_надпись</p>
</div> 



Тоесть в CSS ты можешь сам создавать цвета этой появляющейся форы, например Код:
.tooltip {
background-color:#DEDEDE;
border:1px solid #FFFFFF;
display:none;
left:-9999px;
padding:5px;
position:absolute;
width:230px;
z-index:999;
}

.tooltip p {
background-color:#222222;
color:#FFFFFF;
font-size:11px;
margin:0;
padding:2px 7px;
text-align:justify;
} 

Наверх
 
 

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
WHacker
Предмет симпатий
****
Вне Форума

ololo

Сообщений: 214
Латвия
Пол: male
Re: Загловок в окошке
Ответ #4 - 03.07.2009 :: 14:48:55
 
Ммм... Опять не то... Видишь ли, у тебя только для кнопки, да и на кнопку у меня не работает, как пихаю ее внутрь дива - пропадает, див убираю - кнопка и все.... Короче мне надо что бы это на картинки действовало больше чем на кнопки...
+ А нет, все работает! Спасибо!! Просто я до этого пихал скрипт в head а надо было в body, меня подтолкнуло на body то что у тебя под скриптом есть линк.
Улыбка Очень довольный
Наверх
 
 
WWW xPA3OPx 482032743   IP записан
Ramzies
Администратор
*****
Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male
Re: Загловок в окошке
Ответ #5 - 03.07.2009 :: 14:51:34
 
Пожалуйста.
Наверх
 
 

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
Kaktus
Его знают
***
Вне Форума

Я люблю
www.privet.lv

Сообщений: 150

Пол: male
Re: Загловок в окошке
Ответ #6 - 23.07.2009 :: 21:54:18
 
Можно еще такое юзать: Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Наверх
 
 

Я бы уничтожил весь мир... но я уже в пижаме... Улыбка
  IP записан
Страниц: 1
Печать Bookmark and Share
www.privet.lv

Privet.lv/forum » Powered by YaBB 2.2.3 (fix)!
YaBB © 2000-2012. Все права защищены.
Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge