Стилизованная подсказка и доступ к 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, время: 10:36. |