Хак Всплывающие подсказки

[inokentik 45]

Много искал, но везде все криво было, но вот нашел данный хак, кому надо, забирайте, автор не я, арспространяется бесплатно...

Итак начнем...

1. Создаем файл mw_hint.js и кидаем его в templates/ваш шаблон/css/

2. В файл mw_hint.js вставляем этот код:

function MW_System_Load(){

this.wib = screen.width;

this.heb = screen.height;

this.documes = (document.getElementById || document.createElement || document.getElementsByTagName) ? true : false;

this.objects = window.addEventListener || window.attachEvent ? window : document.addEventListener ? document : null;

this.types = 'load';

}

MW_System_Load.prototype.addsevent = function(func){

if(this.objects.addEventListener){

this.objects.addEventListener(this.types,func,false);

return true;

} else if (this.objects.attachEvent){

this.objects.attachEvent("on" + this.types,func);

} else {

return false;

}

}

MW_System_Load.prototype.browser = function(){

this.ver = navigator.appVersion;

this.agent = navigator.userAgent.toLowerCase();

this.dom = document.getElementById ? 1:0;

this.all = document.all ? 1:0;

this.ie5 = (this.ver.indexOf("MSIE 5")>-1 && this.dom) ? 1:0;

this.ie6 = (this.ver.indexOf("MSIE 6")>-1 && this.dom) ? 1:0;

this.ie4 = (document.all && !this.dom) ? 1:0;

this.ie = this.ie4 || this.ie5 || this.ie6;

this.opera = this.agent.indexOf("opera")>-1;

this.gecko = (this.agent.indexOf("gecko")!=-1) ? 1:0;

this.bw = (this.ie || this.opera || this.gecko);

return this;

}

MW_System_Load.prototype.findobj = function(obj){

this.parent = window.document;

if(this.parent[obj]){ return this.parent[obj]; }

if(this.parent.all && this.parent.all[obj]){ return this.parent.all[obj]; }

if(this.parent.layers && this.parent.layers[obj]){ return this.parent.layers[obj]; }

if(this.parent.getElementById && this.parent.getElementById(obj)){ return this.parent.getElementById(obj); }

return null;

}

var MW = new MW_System_Load();

function MW_System_Hint(){}

MW_System_Hint.prototype.show = function(obj,str){

var hint = MW.findobj('hint');

if(!obj){ return; }

if(!MW.documes){ return; }

if(!hint){ return; }

hint.className = 'hint';

hint.style.left = 15;

hint.style.top = 50;


obj.onmouseout = function(advance){

hint.style.width = '';

hint.style.visibility = 'hidden';

if(hint.firstChild) hint.removeChild(hint.firstChild);

hint.appendChild(document.createTextNode(str));

};

obj.onmousemove = function(advance){

//str = str.replace(/</g,"&lt;");

//str = str.replace(/>/g,"&gt;");

hint.style.width = '';

hint.innerHTML = str;

vc = document.getElementsByTagName((document.compatMode && document.compatMode=="CSS1Compat") ? "HTML":"BODY")[0];

x = window.event ? event.clientX + vc.scrollLeft : advance.pageX;

y = window.event ? event.clientY + vc.scrollTop : advance.pageY;

vcwidth = vc.clientWidth ? vc.clientWidth + vc.scrollLeft : window.innerWidth + window.pageXOffset;

vcheight = vc.innerHeight ? window.innerHeight + window.pageYOffset : vc.clientHeight + vc.scrollTop;

  if(hint.offsetWidth>500){ hint.style.width = '200'; }

  if((x + hint.offsetWidth + 15) > vcwidth){

   hint.style.left = x - hint.offsetWidth - 4;

  } else {

   hint.style.left = x + 15;

  }

  if((y + hint.offsetHeight + 19) > vcheight){

   hint.style.top = y - hint.offsetHeight;

  } else {

   hint.style.top = y + 25;

  }

  //if(typeof(hint.style.MozOpacity)!="undefined"){

  hint.style.opacity = '.91';

  hint.style.filter = "alpha(opacity:91)";

  //}

  hint.style.visibility = 'visible';

};

}

MW_System_Hint.prototype.initialize = function(){

var hint = document.createElement("DIV");

hint.setAttribute('id','hint');

document.getElementsByTagName('body')[0].appendChild(hint);

hint.style.visibility = 'hidden';

var hintmarker = ['a','img'];

var textmarker = ['title','alt'];

var lenmarker = hintmarker.length;

for(var i=0; i<lenmarker; i++) {

atr = document.getElementsByTagName(hintmarker[i]);

for(var j=0; j<atr.length; j++)

if(viewhint=atr[j].getAttribute(textmarker[i])){

  atr[j].removeAttribute(textmarker[i]);

  HINT.show(atr[j],viewhint);

}

}

}

var HINT = new MW_System_Hint();

if(MW.objects){ MW.addsevent(HINT.initialize); }

3. В файле стилей дописываем строки

.hint

{

background-color:#336699;

line-height:10px;

color:white;

font-family:verdana;

font-size:11px;

width:auto;

border-top:1px solid white;

border-right:1px solid white;

border-bottom:1px solid white;

border-left:5px solid orange;

margin:0px;

padding:8px;

position:absolute;

visibility:hidden;

}

Немножко о настройках хинта. color: - само собой цвет текста. background-color: - цвет фона. font-family: - шрифт. font-size: - размер шрифта. width: - ширина. по умолчанию (auto) если хотите можете изменить. но она тогда будет фиксированная. 4. Далее в main.tpl вставляем вот эту строку:

<script type="text/javascript" src="{THEME}/css/mw_hint.js"></script>

[maks1192 96]

Покаж dеmo?

[inokentik 45]

Ну например тут млжно посмотреть mobilize.in наводишь на любую ссылку и видишь... Всплывает не у всех ссылок, а только у тех где прописан alt.

[kang 42]

Ну например тут млжно посмотреть mobilize.in наводишь на любую ссылку и видишь... Всплывает не у всех ссылок, а только у тех где прописан alt.

Что-то не нашел...

И нужно выводить не alt а title, так как alt - это атрибут для альтернативного текста, который является обязательным параметрам у изображений и который используется поисковиками, ну и когда изображение не найденно. И alt не отображается как подсказка в некоторых браузерах. Тем более как подсказка к ссылкам и тексту.

[inokentik 45]

Ну например тут млжно посмотреть mobilize.in наводишь на любую ссылку и видишь... Всплывает не у всех ссылок, а только у тех где прописан alt.

Что-то не нашел...

И нужно выводить не alt а title, так как alt - это атрибут для альтернативного текста, который является обязательным параметрам у изображений и который используется поисковиками, ну и когда изображение не найденно. И alt не отображается как подсказка в некоторых браузерах. Тем более как подсказка к ссылкам и тексту.

Запыхался вот и написал alt... Да, конечно же title... Пример вот хотя бы на картинке, в инете показать не могу

[kang 42]

Как раз скоро понадобится что-то подобное.

Есть еще вопросы:

1. Кроссбраузерность есть?

2. Многострочность поддерживается?

3. А html теги?

[inokentik 45]

1. Браузеры, проверил в IE8, Opera и Mozila, везде работает....

2. Многострочность да, в зависимости от того какую ширину задашь в стилях.

3. не пробывал

[veb74 10]

Ничего не вижу.

Где это???

Может скриншот окна целиком выложите, куда подводить курсор.

[gifanx 0]

Поставил, работает, но...подсказка всплывает внизу страницы, а не у курсора и если смотришь начало страницы, то и подсказки не видно. Как исправить? DLE 8.5 http://softterritory.ru/

Поправка: Это всё на Mazilla Firefox, На IE8 всё работает правильно, но при наведении курсора на картинку выходят 2 подсказки - эта и стандартная.

Изменено 9 июня 2010 пользователем gifanx