کد جاوای صفحه اول مجید آنلاین

hasanak852

hasanak852

Active Member
سلام
میخوام طریقه درست کردن لینکهایی رو آموزش بدم که وقتی موس میره روشون یه توضیح درباره لینک تو یه قسمت مشخص نمایش داده بشه مثل صفحه اول مجید آنلاین .

Untitled-1.jpg



خوب ابتدا باید کد جاوای زیر رو توی صفحه مورد نظر کپی کنین :

<script language="javascript" type="text/javascript">
<!—
var FadingObject = new Array();
var FadeRunning=false;
var FadeInterval=30;
var hexDigit=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
function dec2hex(dec)
{
return(hexDigit[dec>>4]+hexDigit[dec&15]);
}
function hex2dec(hex)
{
return(parseInt(hex,16))
}
function createFaderObject(theDiv, numSteps, startColor)
{
if(!startColor)
startColor = "000000";​

this.name = theDiv;
this.text = null;
this.color = "FFFFFF";
this.next_text = null;
this.next_color = null;
this.state = "OFF";
this.index = 0;
this.steps = numSteps;
this.r = hex2dec(startColor.slice(0,2));
this.g = hex2dec(startColor.slice(2,4));
this.b = hex2dec(startColor.slice(4,6));
}​

function FadingText(theDiv, numSteps, startColor)
{
FadingObject[theDiv] = new createFaderObject(theDiv, numSteps, startColor);
}
function start_fading()
{
if(!FadeRunning)
FadeAnimation();
}
function set_text(f)
{
if(navigator.appName.indexOf("Netscape") != -1
&& document.getElementById)
{
var theElement = document.getElementById(f.name);
var newRange = document.createRange();
newRange.setStartBefore(theElement);
var strFrag = newRange.createContextualFragment(f.text); ​

while (theElement.hasChildNodes())
theElement.removeChild(theElement.lastChild);
theElement.appendChild(strFrag);
theElement.style.color="#"+f.startColor;
}
}
function getColor(f)
{
var r=hex2dec(f.color.slice(0,2));
var g=hex2dec(f.color.slice(2,4));
var b=hex2dec(f.color.slice(4,6));​

r2= Math.floor(f.r+(f.index*(r-f.r))/(f.steps) + .5);
g2= Math.floor(f.g+(f.index*(g-f.g))/(f.steps) + .5);
b2= Math.floor(f.b+(f.index*(b-f.b))/(f.steps) + .5);​

return("#" + dec2hex(r2) + dec2hex(g2) + dec2hex(b2));
}
function setColor(fadeObj)
{
var theColor=getColor(fadeObj);
var str="<FONT COLOR="+ theColor + ">" + fadeObj.text + "</FONT>";
var theDiv=fadeObj.name;​

if(document.all)
{
document.all[theDiv].innerHTML=str;
}
else if(document.layers)
{
document.nscontainer.document.layers[theDiv].document.write(str);
document.nscontainer.document.layers[theDiv].document.close();
}
Abstraction for more info.
else if (document.getElementById)
{
theElement = document.getElementById(theDiv);
theElement.style.color=theColor;
}​

}
function fade_up(theDiv, newText, newColor)
{
var f=FadingObject[theDiv];​

if(newColor == null)
newColor="FFFFFF";​

if(f.state == "OFF")
{
f.text = newText;
f.color = newColor;
f.state = "FADE_UP";
set_text(f);
start_fading();
}
else if( f.state == "FADE_UP_DOWN"
|| f.state == "FADE_DOWN"
|| f.state == "FADE_DOWN_UP")
{
if(newText == f.text)
f.state = "FADE_UP";
else
{
f.next_text = newText;
f.next_color = newColor;
f.state = "FADE_DOWN_UP";
}
}
}
function fade_down(theDiv)
{
var f=FadingObject[theDiv];​

if(f.state=="ON")
{
f.state="FADE_DOWN";
start_fading();
}
else if(f.state=="FADE_DOWN_UP")
{
f.state="FADE_DOWN";
f.next_text = null;
}
else if(f.state == "FADE_UP")
{
f.state="FADE_UP_DOWN";
}
}
function FadeAnimation()
{
FadeRunning = false;
for (var d in FadingObject)
{
var f=FadingObject[d];​

if(f.state == "FADE_UP")
{
if(f.index < f.steps)
f.index++;
else
f.index = f.steps;
setColor(f);​

if(f.index == f.steps)
f.state="ON";
else
FadeRunning = true;
}
else if(f.state == "FADE_UP_DOWN")
{
if(f.index < f.steps)
f.index++;
else
f.index = f.steps;
setColor(f);​

if(f.index == f.steps)
f.state="FADE_DOWN";
FadeRunning = true;
}
else if(f.state == "FADE_DOWN")
{
if(f.index > 0)
f.index--;
else
f.index = 0;
setColor(f);​

if(f.index == 0)
f.state="OFF";
else
FadeRunning = true;
}
else if(f.state == "FADE_DOWN_UP")
{
if(f.index > 0)
f.index--;
else
f.index = 0;
setColor(f);​

if(f.index == 0)
{
f.text = f.next_text;
f.color = f.next_color;
f.next_text = null;
f.state ="FADE_UP";
set_text(f);
}
FadeRunning = true;
}
}​

if(FadeRunning)
setTimeout("FadeAnimation()", FadeInterval);​

}
{
FadingText("fade1",سرعت محو شدن و به وجود آمدن,"رنگ پس زمینه");
FadeInterval=30;
}
//-->
</script>​

به جای نوشته "سرعت محو شدن" یک عدد مثل 5 را وارد کنید و به جای "رنگ پس زمینه" کد رنگ پس زمینه ای که توضیحات در آن جا نوشته می شود را وارد کنید مثلا اگر پس زمینه کارتان سفید است وارد کنید :
"FFFFFF"
(چون نوشته بعد از کنار رفتن موس از بین نمی رود و فقط رنگ آن تغییر می کند پس باید رنگ کد بالا همان رنگ پس زمینه باشد)
(در ضمن می توانید به جای گذاشتن کد بالا در صفحه آن را در یک فایل جاوا با فرمت .js ذخیره کنید و از صفحه خود به آن آدرس بدهید. مانند این فابل :(fader.js)
حالا در تگ نوشته یا عکس و یا هر شیئ که لینک کرده اید کد زیر را وارد کنید :
onMouseOver="fade_up('fade1','نوشته مورد نظر','رنگ نوشته')" onMouseOut="fade_down('fade1')"​



به جای "نوشته مورد نظر" توضیحی که می خواهید در مورد لینک بدهید بنویسید و به جای "رنگ نوشته" کد رنگ توضیحی رو که نوشتید مشخص کنید ، مثل :
<a href="sms.htm"><img src="sms.jpg" onMouseOver="fade_up('fade1','یک دنیا اس ام اس','d00000')" onMouseOut="fade_down('fade1')"></a>​

توجه کنید که قبل از کد رنگ نیازی به وارد کردن"#" نیست !
حالا مکانی را که می خواهید توضیحات در آنجا ظاهر شوند را انتخاب کرده و کد زیر را همان جا قرار دهید :

<DIV ID="fade1"></DIV>​
اگر کدهای بالا به گونه ای خراب شده فایل پیوستی زیر را دانلود کنید
(برای نمونه!)
 

پیوست ها

  • fader.zip
    8.8 کیلوبایت · بازدیدها: 3
آخرین ویرایش:
E-Boy

E-Boy

کاربر فعال انجمن طراحی وب سایت
سلام دوست عزیز .
شما که قصد نداشتین این کد رو بزارین و آموزش بدین اصلا چرا این تاپیک رو ایجاد کردین . :mad:
این پست شما می تونه یه اسپم حساب شه .
در ضمن اگر که حوصلتون میشه کد و آموزش استفادش رو بزارین تا دیگران هم استفاده کنند .
موفق باشید .
 
maysam.m

maysam.m

Well-Known Member
دوست عزیز جناب E-Boy جان درست میگه.
ولی باید این نکته را هم در نظر بگیریم که ایشون خواسته ببینه آیا کسی تمایل داره همچنین آموزشی را یاد بگیره یا نه؟ اون موقع اگر کسی خواست اضافه کنه!!
راستی من هم مشتاقم این آموزش را اینجا بگذارید.
موفق باشید
 
Mr.Steres

Mr.Steres

Active Member
بله دوستان این ادرس دارای فایل سورس ، سمپل و آموزش و توضیحات همچین چیزی هست :

کد: 
http://www.greywyvern.com/code/javascript/fade
 
foranyone

foranyone

Well-Known Member
اوووووووووووووووووووووووووو!!! چند خط کد برا این کار ساده !!!!!

اینم کد :

کد: 
<!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>
html{font-family:Tahoma;font-size:10pt;}
</style>
<script language="javascript" type="text/javascript">
function show(title){document.getElementById('showbox').innerHTML=title;}
function show_default(){document.getElementById('showbox').innerHTML='محل نمایش توضیحات';}
</script>
</head>
<body>
<center>
<a href="" title="نحوه ی استفاده از یه توصیح ساده موقع نشانه رفتن موس" onmouseover="show(this.title)" onmouseout="show_default()"> آموزش ساخت </a>
&nbsp;
<a href="" title="برای استفاده موثر از سیستم آموزشی کلیک کنید" onmouseover="show(this.title)" onmouseout="show_default()"> سیستم آموزش </a>
<br /><br /><br />
<div style="background-color:#FFCC33; border:1px solid #FFFF00; width:200px; height:100px;" id="showbox">
</div>
</center>
</body>
</html>
 
foranyone

foranyone

Well-Known Member
برای fade کردن هم میتونین از fadeIn و fadeOut فریم ورک Jquery استفاده کنین اگه خواستین یه مثال کوچولو براش میذاریم.
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

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

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

بالا