PDA

View Full Version : Code hiển thị nội dung của đường link giống như trang web tuoitre.com.vn



thangnd
03-12-2008, 09:05
Hi all,

Bác nào biết đoạn code khi mình đưa chuột vào một đường link thì nó sẽ hiện thị lên một cái khung hộp thoại trong đó là nội dung ghi chú của đường link ( giống như trang web của tuoitre.com.vn. Mà nội dung này được lấy từ datbase Mysql

Thanks alot

Thang

temp2
03-12-2008, 10:03
chú thích cho liên kết site:javascriptbank.com (http://www.google.com/search?client=opera&rls=en&q=ch%C3%BA+th%C3%ADch+cho+li%C3%AAn+k%E1%BA%BFt+si te:javascriptbank.com&sourceid=opera&ie=utf-8&oe=utf-8)
Results 1 - 10 of about 12,900 from javascriptbank.com for chú thích cho liên kết. (0.16 seconds)

thangnd
03-12-2008, 13:06
Thanks Temp2

Mình đã vào xem, nhưng mà không thấy đoạn code nào lấy chú thích từ dữ liệu database mysql cả. Nếu bác biết thì chỉ đường links đó cho mình với

Thanks alot

Thang

Bmb
03-12-2008, 13:34
Document: http://www.google.com.vn/search?hl=vi&q=ajax+tooltip&btnG=T%C3%ACm+v%E1%BB%9Bi+Google&meta=

Demo: http://soitrang.byethost15.com/

mylove9xvn
03-12-2008, 14:00
Mình cũng đang cần code này. Có ai có không giúp mình với

khanhdesignPHP
03-12-2008, 23:24
Dể mà pác. Bác bỏ đoạn script này vào nè :
<style type="text/css">

/* Fading Tooltips */
div#toolTip {
position:absolute;
width:220px;
background:#00009C;
border:2px double #fff;
text-align:left;
padding:5px;
-moz-border-radius:5px;
z-index:1000;
}
div#toolTip p {
margin:0;
padding:0;
color:#fff;
font:11px/12px verdana,arial,serif;
}
div#toolTip p em {
display:block;
margin-top:3px;
color:#FFCF31;
font-style:normal;
font-weight:bold;
}
</style>
<!--
This script downloaded from www.thegioitrevn.net
Come to view and download over 2000+ free javascript at www.thegioitrevn.net
-->

<script language="javascript" name="toolTipLib1.js">
// Created by: Dustin Diaz :: http://www.dustindiaz.com/

function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
EventCache.add(elm, evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}
function getEventSrc(e) {
if (!e) e = window.event;

if (e.originalTarget)
return e.originalTarget;
else if (e.srcElement)
return e.srcElement;
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload =
function() {
oldonload();
func();
}
}
}
var EventCache = function(){
var listEvents = [];
return {
listEvents : listEvents,

add : function(node, sEventName, fHandler, bCapture){
listEvents.push(arguments);
},

flush : function(){
var i, item;
for(i = listEvents.length - 1; i >= 0; i = i - 1){
item = listEvents[i];

if(item[0].removeEventListener){
item[0].removeEventListener(item[1], item[2], item[3]);
};

/* From this point on we need the event names to be prefixed with 'on" */
if(item[1].substring(0, 2) != "on"){
item[1] = "on" + item[1];
};

if(item[0].detachEvent){
item[0].detachEvent(item[1], item[2]);
};

item[0][item[1]] = null;
};
}
};
}();


addEvent(window,'unload',EventCache.flush, false);

</script>
<script type=text/javascript name="toolTipLib2.js">
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Dustin Diaz :: http://www.dustindiaz.com/ */

// Additional Info: http://www.dustindiaz.com/sweet-titles/

var toolTipLib = {
xCord : 0,
yCord : 0,
obj : null,
tipElements : ['a','abbr','acronym'],
attachToolTipBehavior: function() {
if ( !document.getElementById ||
!document.createElement ||
!document.getElementsByTagName ) {
return;
}
var i,j;
addEvent(document,'mousemove',toolTipLib.updateXY, false);
if ( document.captureEvents ) {
document.captureEvents(Event.MOUSEMOVE);
}
for ( i=0;i<toolTipLib.tipElements.length;i++ ) {
var current = document.getElementsByTagName(toolTipLib.tipElemen ts[i]);
for ( j=0;j<current.length;j++ ) {
addEvent(current[j],'mouseover',toolTipLib.tipOver,false);
addEvent(current[j],'mouseout',toolTipLib.tipOut,false);
current[j].setAttribute('tip',current[j].title);
current[j].removeAttribute('title');
}
}
},
updateXY : function(e) {
if ( document.captureEvents ) {
toolTipLib.xCord = e.pageX;
toolTipLib.yCord = e.pageY;
} else if ( window.event.clientX ) {
toolTipLib.xCord = window.event.clientX+document.documentElement.scro llLeft;
toolTipLib.yCord = window.event.clientY+document.documentElement.scro llTop;
}
},
tipOut: function(e) {
if ( window.tID ) {
clearTimeout(tID);
}
if ( window.opacityID ) {
clearTimeout(opacityID);
}
var l = getEventSrc(e);
var div = document.getElementById('toolTip');
if ( div ) {
div.parentNode.removeChild(div);
}
},
checkNode : function(obj) {
var trueObj = obj;
if ( trueObj.nodeName.toLowerCase() == 'a' || trueObj.nodeName.toLowerCase() == 'acronym' || trueObj.nodeName.toLowerCase() == 'abbr' ) {
return trueObj;
} else {
return trueObj.parentNode;
}
},
tipOver : function(e) {
toolTipLib.obj = getEventSrc(e);
tID = setTimeout("toolTipLib.tipShow()",500)
},
tipShow : function() {
var newDiv = document.createElement('div');
var scrX = Number(toolTipLib.xCord);
var scrY = Number(toolTipLib.yCord);
var tp = parseInt(scrY+15);
var lt = parseInt(scrX+10);
var anch = toolTipLib.checkNode(toolTipLib.obj);
var addy = '';
var access = '';
if ( anch.nodeName.toLowerCase() == 'a' ) {
addy = (anch.href.length > 25 ? anch.href.toString().substring(0,25)+"..." : anch.href);
var access = ( anch.accessKey ? ' <span>['+anch.accessKey+']</span> ' : '' );
} else {
addy = anch.firstChild.nodeValue;
}
newDiv.id = 'toolTip';
document.getElementsByTagName('body')[0].appendChild(newDiv);
newDiv.style.opacity = '.1';
newDiv.innerHTML = "<p>"+anch.getAttribute('tip')+"<em>"+access+addy+"</em></p>";
if ( parseInt(document.documentElement.clientWidth+docu ment.documentElement.scrollLeft) < parseInt(newDiv.offsetWidth+lt) ) {
newDiv.style.left = parseInt(lt-(newDiv.offsetWidth+10))+'px';
} else {
newDiv.style.left = lt+'px';
}
if ( parseInt(document.documentElement.clientHeight+doc ument.documentElement.scrollTop) < parseInt(newDiv.offsetHeight+tp) ) {
newDiv.style.top = parseInt(tp-(newDiv.offsetHeight+10))+'px';
} else {
newDiv.style.top = tp+'px';
}
toolTipLib.tipFade('toolTip',10);
},
tipFade: function(div,opac) {
var obj = document.getElementById(div);
var passed = parseInt(opac);
var newOpac = parseInt(passed+10);
if ( newOpac < 80 ) {
obj.style.opacity = '.'+newOpac;
obj.style.filter = "alpha(opacity:"+newOpac+")";
opacityID = setTimeout("toolTipLib.tipFade('toolTip','"+newOpac+"')",20);
}
else {
obj.style.opacity = '.80';
obj.style.filter = "alpha(opacity:80)";
}
}
};
addEvent(window,'load',toolTipLib.attachToolTipBeh avior,false);
</script>
<!--
This script downloaded from www.thegioitrevn.net
Come to view and download over 2000+ free javascript at www.thegioitrevn.net
-->

</head>

<body>
<UL>
<LI><A title="This is an excellent Web site" href="" href="http://www.thegioitrevn.net/">thegioitrevn.net</A>
<LI><A title="Another nice Web site" href="http://www.thegioitrevn.net/">www.thegioitrevn.net</A>
<LI><A href="http://www.thegioitrevn.net/">thegioitrevn.net</A>
</LI></UL>
<!--
This script downloaded from www.thegioitrevn.net
Come to view and download over 2000+ free javascript at www.thegioitrevn.net
-->


</body>

thangnd
05-12-2008, 13:07
Thanks bạn nhiều nhé...

Mình đã làm được rồi

N. Thắng

[=========> Bổ sung bài viết <=========]

Hi

Bạn cho mình xin đoạn code hiển thị vừa chú thích vừa hình ảnh luôn với nhé

Thanks nhiều

N. Thắng