Нужен самый малообъемный скрипт показа собственной подсказки при наведении на ссылку.
Нужен самый малообъемный скрипт показа собственной подсказки (title) при наведении на ссылку.
Еще чтобы во всех браузерах работал. Один есть, но нужен ну очень маленький по объему. Вот этот есть:
<a href='#' onmouseover='hintshow(event,1);' onmouseout='hinthide();'>link1</a>
<a href='#' onmouseover='hintshow(event,2);' onmouseout='hinthide();'>link2</a>
<script language='JavaScript'>
<!--
function hinthide()
{
var div = document.getElementById('hintdiv').style;
div.visibility = 'hidden';
div.display = 'none';
}
function hintshow(e,id)
{
var e = e || window.event;
var x = e.x || e.clientX;
var y = e.y || e.clientY;
var dtop = 10;
var dleft = 15;
var rightw = 500;
var r = new Array();
r[1] = 'Подсказка1';
r[2] = 'Подсказка2';
var div = document.getElementById('hintdiv');
if ( !div )
{
div = document.createElement('div');
div.id = 'hintdiv';
div.style.backgroundColor = '#ffffff';
div.style.border = 'solid #333333 1px';
div.style.position = 'absolute';
div.style.padding = '5px';
document.body.appendChild(div);
div = document.getElementById('hintdiv');
}
div.innerHTML = r[id];
dst = div.style;
var s;
if ( typeof window.pageYOffset != 'undefined' )
{ s = window.pageYOffset; }
else if ( typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat' )
{ s = document.documentElement.scrollTop; }
else if ( typeof document.body != 'undefined' )
{ s = document.body.scrollTop; }
dst.top = s+y+dtop;
if ((screen.width-(rightw+50))<(x+dleft)) { dst.left = x - rightw; } else { dst.left = x + dleft; }
dst.visibility = 'visible';
dst.display = 'block';
}
// -->
</script>
|
попробуй аргумент тега <a alt="подсказка"/>
намного меньше :) |
evgen28,
может все-таки title? нету у ссылок alt-а. это атрибут для рисунков |
точно title. Спасибо за поправку Gvozd.
|
Доп. вопрос по теме: тотже title но уже без onmouse... на объекте. при наведении на какой либо объект и если у него есть не пустой title то он его показывает. ка можно реализовать? =)
|
Вот самый малообъемный :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <table style="border-collapse:collapse;border:1px solid gray"> <thead title="head" style="border:1px solid #e0e0e0"><tr><th>HEAD</th></tr></thead> <tfoot title="foot" style="border:1px solid #ccc"><tr><td>FOOT</td></tr></tfoot> <tbody title="body" style="border:1px solid #aaa"><tr><td>BODY</td></tr></tbody> </table> </body> </html> title можно чему хочешь указать, и если он есть -- отобразится. Если нужна специфическая подсказка -- ну тогда mouseover/mouseout |
В идеале скрипт должен сам найти все элементы с не пустыми alt или title, дописать к ним нужные обработчики и удалить/обнулить alt и title, что бы не вылезала стандартная подсказка. Т. е . верстальщик вообще не должен ни о чем беспокоиться.
|
Riim +1
А может теперь перейдем к реализации ;) Есть наброски? |
clgs,
а в чем проблема-то?) переходи к реализации. вот наброски
window.onload=funciton(){
var all=document.getElementsByTagName('*');
for(var i=0;i<all.length;i++){
var title=(all[i].alt||all[i].title);
if(title){
/*some magic*/
}
}
}
|
Вообще нужен обычный title, только через javascript.
Смысл вроде этого:
<script language="JavaScript">
<!--
function s() { return 'qwe'+'asd'; }
// -->
</script>
<a href="..." title="javascript:s();">link</a>
Но это не работает и я не нашел как сделать. Нужен именно через javascript - просто записать текст в title не подходит. Я e-mail хочу спрятать. :) Хотя, если вернуться к самому началу, то стоило бы спросить как можно показать людям свой e-mail так, чтобы всякие роботы его не смогли вычислить. |
Цитата:
<script language="JavaScript">
<!--
window.onload=function(){
document.getElementsById('email').title='qwe'+'asd';
}
// -->
</script>
<a href="..." id="email">link</a>
|
Цитата:
window.onload=funciton(){
В Мазиле 2.0.0.20 ОШИБКА
Init = function() {
var all=document.getElementsByTagName('*');
alert(all);
for(var i=0;i<all.length;i++){
var title=(all[i].title);
if(title){
alert(title);
}
}
}
if (window.attachEvent) window.attachEvent("onload", Init);
Нет ошибки, но и не работает, всё в тойже Мазиле. |
а в ie типа нету ошибки? сокращай код, пока не поймешь, в чем ошибка
|
Цитата:
Цитата:
---ADD--- в мазиле заработало так
if(window.addEventListener)
window.addEventListener('load', function () { Init(); }, false);
else
window.attachEvent('onload', function () { Init(); }, false);
просто нет такого метода, ну можно было намекнуть =) |
Цитата:
|
Вот на этом сайте реализованна эта возможность http://www.milliondollarhomepage.com/
Кто может, разберитесь как это там сделано и выложите пожалуйста готовый скрипт. |
Цитата:
|
Sweet,
Он похоже бааааальшой начальник)) Какая шикарная постановка вопроса )) "Разберитесь, доложите" ))) |
Ну извените, если уж это слишком огромная просьба. Я сам не особо силён в этих всех скриптах, подумал, что на этом сайте есть знающие люди.
Цитата:
Цитата:
Но как говориться "надежда умерает последней", всёже зайду сюда ещё пару раз, может быть всетаки появится кокойнибуть отдекватный ответ. |
Цитата:
|
maximsw,
уважаемый, давайте мы вас пораспрашиваем, как типичного представителя вашего вида. Почему вы считаете, что javascript.ru это на самом деле freelance.ru, но бесплатно и про javascript? Почему вы просьбу о написании вам скрипта называете вопросом? Для наглядности: предположим вы сантехник (в хорошем смысле этого слова). Сидите вечером на лавочке со своими коллегами-сантехниками, обсуждаете различные сантехнические проблемы. Тут прихожу я и говорю: "Мужики, а поменяйте мне сантехнику в доме.". Куда меня пошлют, предлагаю догадаться самому. И почему пошлют -- тоже нужно догадаться, это самое главное. В то же время, если я подойду и спрошу, а чё за фигня у меня с краном, я его и так крутил и так, а он всё равно течёт. Они мне что-нибудь посоветуют, и я пойду и САМ ВСЁ СДЕЛАЮ. Потому что советы бесплатны, работа -- платна. Хотя это если вы вопросы умеете задавать, тогда ответы бесплатны. Если не умеете, и за вас ещё надо и вопросы сформулировать, то это уже консалтинг, за него тоже деньги платят. |
Вопрос: Как в Opera отключить показ title при наведении на ссылку, скриптом при наведении на ссылку я заменяю содержимое title, в остальных браузерах подмена проходит гладко, а Opera успевает показать прежнее значение.
Можно конечно при загрузке документа изменить, но может до этой ссылки пользователь никогда не доберёться, поэтому подмену хочеться сделать "на лету" |
рони,
попробуйте опережать её. Т.е. при наведении на элемент, перебирайте его непосредственных детей, и у них убирайте title. |
рони,
Это такой хитрый способ обратиться к Kolyaj, Sweet, x-yuri, и Gvozd? Покажите скрипт которым значение меняете? |
inGray,
Показать то можно ))) но кое кому это сыграет на руку )))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
document.onmousemove = function (c) {
c = c || window.event;
var b = c.target || c.srcElement;
if (b.title || b.alt) {
b.help = b.title || b.alt;
b.title = b.alt = ""
}
if (b.help) {
if (!document.getElementById("msg")) {
a = document.createElement("div");
a.style.cssText = "position:absolute;border: solid 1px #8B4513;border-left: 4px solid #8B4513;background-color: #D3D3D3;padding: 1px 4px";
a.id = "msg";
document.body.appendChild(a)
}
if (a.innerHTML != b.help) a.innerHTML = b.help;
var d = document.documentElement,
f = document.body;
b =c.pageX||c.clientX + (d && d.scrollLeft || f && f.scrollLeft || 0) - (d.clientLeft || 0);
d =c.pageY||c.clientY + (d && d.scrollTop || f && f.scrollTop || 0) - (d.clientTop || 0);
a.style.left = 15 + b + "px";
a.style.top = d + "px";
}
else document.getElementById("msg") && document.body.removeChild(document.getElementById("msg"))
};
</script>
</head>
<body><a href="#" title="22222">22222</a>
<a href="#" title="123<br /><font color='#FFCC00'>456</font><br />789<br /><img src='http://javascript.ru/forum/images/smilies/yes4.gif' />">333333</a>
<a href="#" title="111111">111111</a>
<img src="http://javascript.ru/forum/images/smilies/yes4.gif" alt="123" />
</body>
</html>
|
рони,
В последней опере прекрасно работает)) |
Подскажите пожалуйста. Как сделать так, чтобы при наведении на ссылку расположенной на картинке, появлялась подсказка в собственном оформлении, с возможностью изменять шрифт, размер, и цвет текста и фона.
Хотелось бы добавить эту возможность в подобный код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ Без Имени</title>
<style type="text/css">
<!--
body {
background-color: #CCCCCC;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body>
<img src="img.png" width="400" height="300" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="122,69,305,111" href="http://javascript.ru/" target="_blank" title="Центральный Javascript-ресурс. Учебник с примерами скриптов. Форум. Книги и многое другое." />
<area shape="rect" coords="47,110,198,164" href="http://www.yandex.ru/" target="_blank" title="Яндек - поисковик" />
<area shape="rect" coords="279,20,376,61" href="http://www.youtube.com/" target="_blank" title="Видео" />
<area shape="rect" coords="70,200,339,281" href="http://www.google.ru/" target="_blank" title="Google - поисковик" />
</map>
</body>
</html>
|
maximsw,
вы все еще, требуете готового скрипта, не затратив нкиаких усилий со своей стороны специально для вас даже есть шаблончик: Цитата:
|
| Часовой пояс GMT +3, время: 03:54. |