Tool Tip؟

N

ntfs_eror

Member
سلام.
اگه ممکنه آموزش ساخت Tool Tip بعد از بردن کرسر موس روی یک عکس رو برای من بذارید.
در ضمن اگه این امکان وجود داره که این Tool tip زود نا پدید نشه هم یه تضیح بدید.
مرسی:oops:
 
yasak

yasak

Member
سلام،
یه روش ساده اما کاربردی و Search-Engine پسند استفاده از خصوصیت title مربوط به تگ img هست.
 
N

ntfs_eror

Member
سلام.

ممنون.
ولی در این روش کادر زود از بین میره.
اگه از دوستان روشی برای نمایش details هم بلد بودن خواهش می کنم توضیح بدن.
به این صورت که وقتی کرسر موس روی یه عکس میره مشخصات از پیش تعیین شده در کنار صفحه به نمایش در بیاد
مرسی
 
farik

farik

Well-Known Member
با سلام ..من براي اين همين چند روز پيش يك كد نوشتم فقط مشكل اينه كه خصوصيت onmouseover وonmouseout رو حذف ميكنه .اگه خواستين بگين بزارم....
 
yasak

yasak

Member
سلام،
اگه به Dream Weaver دسترسی داری در منو Window > Snippets و بعدش در قسمت Javascript > Layers مثال های زیادی از tooltip های آماده که در اکثر کاوشگر ها هم کار می کنه داره.
 
N

ntfs_eror

Member
مشکل من اینه که صفحات aspx رو دریم ویور نمیخونه و اجازه دسترسی به قسمت design رو نداریم.
در این صورت اگر هم با کد کار کنم فایل ساخته شده رو web developer نمی خونه وگرنه دریم ویور خیلی امکانات داره!
برای همینم بی خیاله تول تیپ شدم و میخوام به صورت details کار کنم که توی Asp.net بشه همچین کاری کرد.
ممنون
 
farik

farik

Well-Known Member
بفرماييد:
<html dir="rtl">

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>eawe</title>
</head>

<body>
<script>
var bgcolor='gray';
var fontcolor='yellow';
var bordercolor='#FF6600';
var bordermode='solid';
var borderthickness='1px';
var ti_align='left';
var ti_dir='ltr';
var on=new Array();
var ti=new Array();
var maxoptic=80;
var n=(document.all)?0:1;
var o=0;
var number;

document.write('<div id=title_show style="text-align:'+ti_align+';dir:'+ti_dir+';height:auto;width:150;border: '+borderthickness+' '+bordermode+' '+bordercolor+' ; background-color:'+bgcolor+';color:'+fontcolor+';visibility=hidden;position:absolute; Filter:alpha(opacity=0);" ></div>');
function get_ti()
{
var k=0;
a=document.getElementsByTagName('*');
for(i=0;i<a.length;i++)
{
if(a.title)
{

a.num=k;
on[k]=false;
ti[k]=a.getAttribute('title');
a.title="";
k++;
a.onmouseover=function(){on[this.num]=true;};
a.onmouseout=function(){on[this.num]=false;};
}

}
}
setTimeout('get_ti();',10);
document.onmousemove=show_title;
function blur(num)
{
if(number!=num)
{
o=0;
jid[num]=setInterval("if(o<=maxoptic){document.getElementById('title_show').style.filter='alpha(opacity:'+o+')';o++;}",5);
number=num;
}else{
if(o>=maxoptic)
{
clearInterval(jid[num]);
document.getElementById('title_show').style.filter='alpha(opacity:80)';
}
}

}
var jid=new Array();
function show_title(e)
{
var wh;
var bon=false;
if(n){x=e.pageX}else{x=event.x}
if(n){y=e.pageY}else{y=event.y}
for(i=0;i<on.length;i++)
{
if(on)
{
blur(i);
document.getElementById('title_show').innerHTML=ti;
document.getElementById('title_show').style.visibility='visible';
document.getElementById('title_show').style.left=x-5;
document.getElementById('title_show').style.top=y;
bon=true;
}
}
if(!bon)
{
document.getElementById('title_show').style.visibility='hidden';
document.getElementById('title_show').style.filter='alpha(opacity:0)';
}

}


</script>
<p title='faashad<br />far' >eawe</p>
<p title='farzan' >eawe</p>

<p title="farzaasdasdn">asdasdasdadssdasd</p>

</body>


</html>
کلیک کنید تا باز شود...
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا