Добре дошли!

Добре дошли в нашите форуми, пълни с полезна информация. Имате проблем с компютъра или телефона си? Публикувайте нова тема и ще намерите решение на всичките си проблеми. Общувайте свободно и открийте безброй нови приятели.

Моля, регистрирайте се за да публикувате тема и да получите пълен достъп до всички функции.

RQ: HTML код за "помощни балони"

Последователи

Нова тема
Отговор в тази тема

10 юли 200619 г.

Сигурно се сещате в АренаБГ и ДейтаБГ при преместване курсора на мишката върху определен торент се появява описанието му. Трябва ми код за тези "помощни балони", опитах се да го взема от самите страници, но като се опитам да го направя на моята страница не излизат такива. Моля ако някой знае да пише. Благодаря ви предварително!

Цитирай

10 юли 200619 г.

alt=" * "

Цитирай

10 юли 200619 г.

Администратор

Търси в dynamicdrive.com за tooltip - ще намериш много подобни скриптове

Цитирай

10 юли 200619 г.

Автор

Не стана и така.

Забравил съм да спомена - не ми трябва да излиза инфо от друг изтрочник, а просто коментар. Дори въпросният текст върху който трябва да е курсора не е линк. А ако е задължително да е линк не е фатално. Просто ми трябва да излиза коментар.

Цитирай

10 юли 200619 г.

alt е най-елементарния атрибут в HTML за добавяне на коментар.

Давам ти пример за коментар на сложена снимка:

PS: Да poisk, за линковете е title

Всъщност това е по-коректния начин да се показва 'tool tip' в броузер различен от IE

Редактирано 10 юли 200619 г. от yvsot (преглед на промените)

Цитирай

10 юли 200619 г.

Администратор

При линковете се прави с title, а не с alt

Цитирай

10 юли 200619 г.

Между <body> и </body> слагаш:

<div id="dhtmltooltip"></div>


<script type="text/javascript">


var offsetxpoint=-60 //Customize x offset of tooltip

var offsetypoint=20 //Customize y offset of tooltip

var ie=document.all

var ns6=document.getElementById && !document.all

var enabletip=false

if (ie||ns6)

var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""


function ietruebody(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}


function ddrivetip(thetext, thecolor, thewidth){

if (ns6||ie){

if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"

if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor

tipobj.innerHTML=thetext

enabletip=true

return false

}

}


function positiontip(e){

if (enabletip){

var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;

var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;

//Find out how close the mouse is to the corner of the window

var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20

var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20


var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000


//if the horizontal distance isn't enough to accomodate the width of the context menu

if (rightedge<tipobj.offsetWidth)

//move the horizontal position of the menu to the left by it's width

tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"

else if (curX<leftedge)

tipobj.style.left="5px"

else

//position the horizontal position of the menu where the mouse is positioned

tipobj.style.left=curX+offsetxpoint+"px"


//same concept with the vertical position

if (bottomedge<tipobj.offsetHeight)

tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"

else

tipobj.style.top=curY+offsetypoint+"px"

tipobj.style.visibility="visible"

}

}


function hideddrivetip(){

if (ns6||ie){

enabletip=false

tipobj.style.visibility="hidden"

tipobj.style.left="-1000px"

tipobj.style.backgroundColor=''

tipobj.style.width=''

}

}


document.onmousemove=positiontip


</script>

След това на картинката или линка вмъкваш код, по следния образец:

<img src="snimka.jpg" onMouseover="ddrivetip('Aз и Петко','#CFF3FE')";

onMouseout="hideddrivetip()">

Цитирай

10 юли 200619 г.

Автор

Благодаря на всички ви! Всички стана идеално

Цитирай

15 юли 200619 г.

http://kandev.com/overlib.js

http://kandev.com/overlib_fade.js

Например при линковете направи така:

<a onmouseover="return overlib('Това ще е текста който ти излиза в т.нар. подсказващ балон', FADEOUT, OPACITY, 80);" onmouseout="return nd();" href="neshto.php">Нещо</a></td>

Ако пък искаш в/у някоя таблица да ти излиза този подксазващ балон номера става така:

<table onmouseover="return overlib('Това ще е текста който ти излиза в т.нар. подсказващ балон като отидеш в/у таблицата', FADEOUT, OPACITY, 80);" onmouseout="return nd();" width="175" border="0" cellspacing="0" cellpadding="0" bgcolor="#eeeeee">

Това разбира се са само примери. Ти можеш да експирементираш и да променяша .js-тата така както ти искаш и ти е удобно.

Поздрави

Цитирай

Добавете отговор

Можете да публикувате отговор сега и да се регистрирате по-късно. Ако имате регистрация, влезте в профила си за да публикувате от него.

Публикацията ви съдържа термини, които не допускаме! Моля, редактирайте съдържанието си и премахнете подчертаните думи по-долу. Ако замените букви от думата със звездички или друго, за да заобиколите това предупреждение, профилът ви ще бъде блокиран и наказан!

Напишете отговор в тази тема...