Стилизованная подсказка и доступ к title
http://learn.javascript.ru/play/eL6Hkb
Опять непосильная задача :( Перерыл весь гугл, пытался обратиться к атрибуту title в блоке div. Вместо title была пустая строка. Оказалось все дело в скрипте подсказки. В строке 46 скрипт сохраняет атрибут title в переменную, а сам атрибут удаляет, чтобы браузер не показывал свою подсказку параллельно. Так вот, проблема 1: Как теперь при клике по блоку узнать его атрибут title? И еще второй вопрос, хотелось бы упростить код подсказки, много буковок пугают каждый раз и привыкнуть к этому очень сложно. В скрипте подсказки есть переменная show_time, отвечающая за время, которое подсказка показывается. Мне эта переменная не нужна, подсказки должны быть видны бесконечно, отсюда просьба, помогите пожалуйста вырезать из скрипта эту переменную и все что с ней связано. |
фонарик,
:-?
<!DOCTYPE HTML>
<html>
<head></head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
#title {
/*Всплывающая подсказка*/
position:absolute;
display:block;
text-shadow: -1px -1px 0px #FFFFFF;
border:2px ridge #bb9f72;
border-radius:9px;
padding:4px;
min-height:5px;
max-height:300px;
min-width:50px;
max-width:530px;
color:#332207;
background-color: rgba(221, 203, 174, 0.8);
background-size:100% 100%;
}
</style>
<body>
<div id='ff' class='tt' title='ololo' style="width:100px; height:100px; background-color:gray; border:1px solid red;" onmousedown="info(this)"></div>
<script type="text/javascript">
function info(elem) {
alert(elem._title)
}
</script>
<script>
var s_x = 13,
s_y = 0; //смещения подсказки относительно курсора
$(document).ready(function () {
$(('<span id=title></span>')).appendTo('body').hide()
$('[title]').each(function (i, e) {
//запоминаем значение атрибута в свойстве _title
//сам атрибут удаляем (чтобы браузер не показывал собственные подсказки)
e._title = $(this).attr('title').replace(/\\n/gim, '<br>');
$(this).removeAttr('title')
.mouseover(function (evt) {
$('#title')
.html($(this).get(0)._title)
.fadeIn(0).css({
left: (evt.pageX + s_x) + 'px',
top: (evt.pageY + s_y) + 'px'
})
})
.mouseout(hide_title)
.mousemove(function (evt) {
$('#title').css({
left: (evt.pageX + s_x) + 'px',
top: (evt.pageY + s_y) + 'px'
})
});
})
})
function hide_title() {
$('#title').hide();
}
</script>
</body>
</html>
|
рони, да вы просто спецназ в своем деле :D Препарировали подсказку как матерый хирург и атрибуту title гайку прикрутили где ее не было :) Вы, наверное, думаете, как все просто )) В любом случае, спасибо большое :)
|
фонарик,
Может плагином? (Правдо jQuery
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://st1.bbcorp.ru/style/extra.26.css" />
<script type="text/javascript" src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://st1.bbcorp.ru/js/jquery.tipsy.min.js"></script>
<script type="text/javascript">$(document).ready(function() { $('img[title],a[title]').tipsy({fade: true, gravity: 's'});});</script>
<style>
.tipsy-inner {
font-size:13px;
font-family:'Times New Roman';
letter-spacing:1px;
}
</style>
</head>
<body style="heidht:100%;padding:39px;">
<a title="Привет Всем!" href="http://javascript.ru/forum/misc/35985-stilizovannaya-podskazka-i-dostup-k-title.html">Типо так</a>
</body>
</html>
http://onehackoranother.com/projects/jquery/tipsy/ |
| Часовой пояс GMT +3, время: 05:54. |