طراحی وب سایت - وب کاران
  |  
ساعت سایر نقاط جهان
صفحه اصلی > خدمات وب > کدهای جاوا اسکریپت (صفحه 1)
کدهای جاوا اسکریپت
 
تماس با ما(Whois Lookup) جستجوی دامنه
خدمات وب: 
به اشتراک گذاری این صفحه در فیس بوک
به هنگام استفاده از کدها به موارد ذیل توجه نمایید:
  • هنگام استفاده از هر کد به عملکرد آن در مرورگرهای مختلف توجه نمایید.
  • پیش فرض استفاده از کدها بدون بکارگیری <...DOCTYPE!> میباشد. لذا در صورت تعیین نسخه HTML برای صفحه مورد نظر، عملکرد کد انتخابی خود را در مرورگرهای مختلف بررسی نمایید.
  • جهت مشاهده عملکرد کدها، کد انتخابی را در Notepad کپی کرده و با پسوند html ذخیره نمایید.
  • برای پیشگیری از هر گونه به هم ریختگی در نمایش متنهای فارسی Encoding صفحه را روی utf-8 تنظیم نمایید.
CDN جی کوئری:         (?) CDN چیست؟
جدیدترین اسکریپت (ها):
  • افکت نمایش پیغام در صفحه | 92/11/17
  • اسکریپت محاسبه زمان بارگذری صفحه | 92/6/7
  • افکتی زیبا برای منو با جی کوئری | 92/4/21
  • تنظیم اندازه فونت محتوای صفحه توسط کاربر | 92/3/25
  • جی کوئری پاپ آپ ویندو | 92/2/10
  1. افکت نمایش پیغام در صفحه
  2. اسکریپت محاسبه زمان بارگذاری صفحه
  3. افکتی زیبا برای منو با جی کوئری
  4. تنظیم اندازه فونت محتوای صفحه توسط کاربر
  5. جی کوئری پاپ آپ ویندو
  6. اسلایدر تصویر - Image Slider
  7. افکت سربرگ باز شونده برای گوشه صفحه
  8. اسکریپت بستن IP
  9. افکتی برای checkbox و radio button
  10. جی کوئری اسکرول بار
  11. اسلایدشو با قابلیت پیش نمایش فریم ها
  12. گالری تصاویر زیبا و حرفه ای با jQuery و CSS3
  13. متن متحرک با افکت تایپ شدن
  14. افکت تصویر کاربردی و زیبا با جی کوئری
  15. ماشین حساب پیشرفته
  16. اسکریپت بارگذاری تصاویر در صفحه (Preload Image)
  17. افکتی کاربردی برای منوهای آبشاری
  18. جستجوگر دو حالته گوگل (جستجو در سایت/وبلاگ و اینترنت)
  19. افکتی زیبا برای نمایش تصاویر در صفحه (Lightbox image viewer)
  20. محتوای داینامیک - نمایش محتوا به صورت اسلایدی
  21. دکمه ای جهت انتقال به بالای صفحه با افکتی زیبا (jQuery)
  22. انتخاب و کپی متن از یک فیلد Textarea با یک کلیک
  23. نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip
  24. اعتبار سنجی فیلد ایمیل قبل از ثبت یک فرم
  25. اسکریپت گالری تصاویر با قابلیت صفحه بندی
  26. محدود کردن تعداد حروف و کاراکترهای ورودی در فیلدهای یک فرم
  27. قرار دادن لوگوی سایت در صفحه به صورت ثابت
  28. تغییر تصویر پس زمینه (Background) صفحه با انتخاب کاربر
انتخاب صفحه:
افکت نمایش پیغام در صفحه
Firefox, IE 8+, Chrome, Opera
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
.message-box {
padding: 15px;
text-align: center;
border-radius: 5px;
background-color: #e5e5e5;
display: none;
box-shadow: 0 0 4px 0 #666;
border: 1px solid #fff;
font: normal 13px tahoma;
position: fixed;
width: 40%;
top: 25px;
left: 30%;
z-index: 50;
text-shadow: 0 0 1px #fff;
direction: rtl;
}
.message-box img {
vertical-align: middle;
}
.screen {
position: fixed;
width: 100%;
height: 100%;
opacity: .7;
background-color: #fff;
top:0;
left:0;
z-index:45;
display:none;
padding:0;
margin:0;
}
.sample-btn {
font: normal 12px tahoma;
padding: 5px 10px;
}
</style>
<script>
function showMessage(){
$('.message-box').slideDown().delay(3000).slideUp();
$('.screen').delay(3500).fadeOut();
}

$(function(){
$('.sample-btn').on('click',function(){$('.screen').fadeIn(),showMessage()});

});
</script>
</head>
<body>
<button class="sample-btn">نمایش پیغام</button>
<div class="screen"></div>
</body>

راهنمای استفاده راهنمای استفاده
با استفاده از این اسکریپت می توانید پیغام های مورد نظر خود را در صفحه نمایش دهید.

مطابق نمونه، کد را در دو قسمت head و body صفحه قرار دهید. با ویرایش کلاس message-box ، ظاهر کادر نمایش پیغام را به سلیقه خود تغییر دهید. div با کلاس screen را حتما در قسمت ‌‌body صفحه قرار دهید.

با تغییر مقدار delay در اسکریپت فوق (بخش قرمز رنگ) زمان نمایش پیغام تا مخفی شدن آن را تنظیم نمایید. (مقدار delay بر حسب میلی ثانیه می باشد)

در پایان تعدادی آیکن پیش فرض آورده شده است که در صورت نیاز می توانید از آنها استفاده نمایید.


اسکریپت محاسبه زمان بارگذاری صفحه
Firefox, IE 7+, Chrome, Opera
<head>
<style>
#load_time {
width: 20%;
position: absolute;
background-color: #fff;
opacity: .85;
padding: 12px;
text-align: center;
left: 40%;
direction: ltr;
font-family: tahoma;
font-size: 12px;
background-color: #f5f5f5;
z-index: 200;
border: 1px solid #ddd;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"> </script>
<script>
function verPosition(){
var $this=$("#load_time");
$("#load_time").css('top',$(window).height()/2);
};
$(function(){
verPosition();
});
$(window).resize(function(){
verPosition();
});

//Get Page Load Time Script ================
//http://www.webkaran.com ==================
var beforeload = (new Date()).getTime();
function getPageLoadTime(){
var afterload = (new Date()).getTime();
seconds = (afterload-beforeload) / 1000;
$("#load_time").html('زمان بارگذاری صفحه: ' + '<b>'+seconds+'</b>' + ' ثانیه ');
$("#load_time").fadeIn().delay(2000).fadeOut();

}
window.onload = getPageLoadTime;

// =========================================
</script>
</head>

<body>
<div id="load_time"></div>
</body>

راهنمای استفاده راهنمای استفاده
این اسکریپت زمان بارگذاری یا لود شدن صفحه را محاسبه و پس از لود کامل نمایش می دهد. مطابق نمونه قسمت های مختلف اسکریپت را در دو قسمت head و body صفحه قرار دهید.

جهت افزایش یا کاهش مدت زمان نمایش پیغام ،عدد 2000 را در کد تغییر دهید.
$("#load_time").fadeIn().delay(2000).fadeOut();
افکتی زیبا برای منو با جی کوئری
Firefox, IE 8+, Chrome, Opera
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/gooeymenu.js"></script>
<link rel="stylesheet" type="text/css" href="css/gooeymenu.css">

</head>

<body>

<!------------------- Type 01---------------------->
<ul id="gooeymenu1" class="gelbuttonmenu">
<li><a href="#">صفحه نخست</a></li>
<li><a href="#" class="selected">خدمات</a></li>
<li><a href="#">محصولات</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">تماس با ما</a></li>
<li><a href="#">اخبار</a></li>
</ul>
<script>
gooeymenu.setup({id:'gooeymenu1', selectitem:1})
</script>
<hr />

<!------------------- Type 02---------------------->
<ul id="gooeymenu2" class="solidblockmenu">
<li><a href="#">صفحه نخست</a></li>
<li><a href="#" class="selected">خدمات</a></li>
<li><a href="#">محصولات</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">تماس با ما</a></li>
<li><a href="#">اخبار</a></li>
</ul>
<script>
gooeymenu.setup({id:'gooeymenu2', selectitem:1, fx:'swing'})
</script>
<hr />

<!------------------- Type 03 ---------------------->
<ul id="gooeymenu3" class="underlinemenu">
<li><a href="#">صفحه نخست</a></li>
<li><a href="#" class="selected">خدمات</a></li>
<li><a href="#">محصولات</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">تماس با ما</a></li>
<li><a href="#">اخبار</a></li>
</ul>
<script>
gooeymenu.setup({id:'gooeymenu3', fxtime:250})
</script>
<hr />

<!------------------- Type 04 --------------------- >
<ul id="gooeymenu4" class="framemenu">
<li><a href="#">صفحه نخست</a></li>
<li><a href="#">خدمات</a></li>
<li><a href="#">محصولات</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">تماس با ما</a></li>
<li><a href="#">اخبار</a></li>
</ul>
<script>
gooeymenu.setup({id:'gooeymenu4', snapdelay:500})
</script>

</body>

راهنمای استفاده راهنمای استفاده
همانطور که در پیش نمایش این اسکریپت ملاحظه می کنید به چهار شکل مختلف می توانید از این منو استفاده نمایید. مطابق کد نمونه هر منو با تگ <ul> شروع و به <ul/> ختم می شود.هر منو id و class خود را دارد. (بخش قرمز رنگ در کد نمونه) همچنین برای هر منو یک اسکریپت هم وجود دارد که با رنگ آبی مشخص شده است. پس از انتخاب منو ی مورد نظر خود، کد HTML آن را به همراه اسکریپت مربوطه (بخش آبی رنگ ) کپی کرده و در کد html صفحه خود قرار دهید. همچنین فایل ضمیمه را نیز دانلود نموده و در قسمت head صفحه فایل های js و css را فراخوانی نمایید.

فایل ضمیمه: jqueryMenuEffect.zip
تنظیم اندازه فونت محتوای صفحه توسط کاربر
Firefox, IE 7+, Chrome, Opera
<head>
<script type="text/javascript" src="js/textsizer.js"></script>
</head>

<body>
<span dir="rtl">
<a href="javascript:ts('body',1)">+ افزایش اندازه</a> | <a href="javascript:ts('body',-1)">+ کاهش اندازه</a></span>
</body>
راهنمای استفاده راهنمای استفاده
با استفاده از این اسکریپت می توانید به کاربران سایت خود این امکان را بدهید که به دلخواه اندازه فونت محتوای صفحه را کوچک یا بزرگ نماید. استفاده از این کد بسیار ساده بوده و به راحتی می توانید در سایت یا وبلاگ خود استفاده نمایید.

جهت استفاده ابتدا فایل ضمیمه را دانلود نموده و مطابق کد نمونه در قسمت head صفحه فراخوانی نمایید و آدرس آن را در صورت لزوم اصلاح کنید. سپس محتوای قسمت body را کپی کرده و در محل مورد نظر خود در سایت یا بلاگ خود قرار دهید.
جهت تغییر واحد اندازه فونت، در فایل textsizer.js کد زیر را یافته و واحد مورد نظر خود را مانند 11px, 12x, 13px و ... جایگزین کنید. در کد زیر اندازه فونت پیش فرض روی small تنظیم شده است.

var szs = new Array( 'xx-small','x-small','small','medium','large');
این اسکریپت به صورت پیش فرض اندازه فونت محتوای body را تغییر می دهد. در صورتیکه بخواهید متن قسمت مشخصی از صفحه قابل تنظیم باشد. به آن قسمت یک id اختصاص داده و آن را بدون علامت # در کد زیر به جای body جایگزین نمایید. با این کار فقط اندازه فونت محتوای قسمت تعیین شده تغییر می کند.
<a href="javascript:ts('body',1)">+ افزایش اندازه</a> | <a href="javascript:ts('body',-1)">+ کاهش اندازه</a></span>

فایل ضمیمه: textsizer.js
جی کوئری پاپ آپ ویندو
Firefox, IE 8+, Chrome, Opera
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: #e5e5e5;
text-align: center
}
.popup-screen {
position: fixed;
opacity: .8;
filter: alpha(opacity=80) !important;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #000;
display: none
}
.show-popup, .login-btn {
font: normal 12px tahoma;
padding: 5px 12px 7px 12px;
margin: 0;
}
.btn-position {
margin-top: 200px;
}
.popup-win {
min-width: 450px;
height:300px;
background-color: #fff;
z-index: 10;
position: fixed;
display: none;
direction:rtl;
overflow:auto;
padding:15px;

}
.input {
padding: 5px;
direction: ltr;
font-family: tahoma;
font-size: 12px;
margin: 0
}
.close-btn {
width: 20px;
height: 20px;
left: 7px;
top: 7px;
z-index: 100;
background: url(images/close-icon-20px.png) no-repeat center;
position: absolute;
cursor: pointer;
opacity: .7;
filter: alpha(opacity=70);
}
.close-btn:hover {
opacity: 1;
filter: alpha(opacity=100);
}
.login-items {
margin: 50px auto;
}
.login-items td {
padding: 3px;
font: normal 12px tahoma
}
</style>
<script type="text/javascript">
//----- jquery popup window ---------
function setPosVer(){
var $popupWin =$('.popup-win');
var popupWinWidth=$popupWin.width();
$popupWin.css('left',$popupWin.parent().width()/2-$popupWin.width()/2);
};
function setPosHor(){
var $popupWin =$('.popup-win');
var popupWinHeight=$popupWin.height();
$popupWin.css('top',$(window).height()/2-$popupWin.height()/2);
};

$(function(){
setPosVer();
setPosHor();
$('.show-popup').click(function(){
$('.popup-screen').fadeIn(300,function(){
$('.popup-win').slideDown();
});
});
$('.close-btn').click(function(){
$('.popup-win').slideUp(300,function(){
$('.popup-screen').fadeOut();
});
});
});
$(window).resize(function(){
setPosVer();
setPosHor();
});

</script>
</head>
<body>
<div class="popup-screen"></div>
<div class="popup-win">
محل قرار گرفتن محتوای پنجره
<div class="close-btn"></div>
</div>
<button class="show-popup btn-position">جی کوئری پاپ آپ ویندو</button>
</body>
راهنمای استفاده راهنمای استفاده
کد را مطابق نمونه در دو قسمت head و body صفحه قرار دهید. در قسمت head صفحه، فایل جی کوئری به همراه استایل ها و اسکریپت مربوطه قرار دارند. بهتر است از نسخه جی کوئری که در فایل ضمیمه قرار دارد استفاده کنید. در صورتیکه بخواهید پنجره، علاوه بر دکمه "x" ، با کلیک روی محیط بیرون پنجره نیز بسته شود، کد زیر را در اسکریپت اصلی یافته و طبق نمونه بعدی قسمت نارنجی رنگ را اضافه کنید.

$('.close-btn').click(function(){
$('.close-btn,.popup-screen').click(function(){
جهت انجام اصلاحات مورد نظر خود روی ابعاد پنجره ، رنگ آمیزی و سایر موارد استایل های مربوطه را به سلیقه خود تغییر دهید.
فایل ضمیمه: jqueryPopupWindow
جی کوئری اسلایدشو
Firefox, IE 8+, Chrome, Opera
<head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/coin-slider-styles.css">
</head>

<body>
<div id="slider"><a href="#" target="_blank"><img
src="frame1.jpg" alt="اینترنت" width="565" height="290"><span><b>اینترنت</b><br>
اینترنت را باید بزرگ‌ترین سامانه‌ای دانست که تاکنون به دست انسان طرّاحی، مهندسی و اجرا گردیده‌است. ریشهٔ این شبکهٔ عظیم جهانی به دههٔ ۱۹۶۰باز می گردد که سازمان‌های نظامی ایالات متّحدهٔ آمریکا برای انجام پروژه‌های تحقیقاتی ...</span></a><a href="#"
target="_blank"><img alt="" src="frame2.jpg"></a><a
href="#" target="_blank"><img alt=""
src="frame3.jpg"></a><a
href="#" target="_blank"><img alt="" src="frame4.jpg"></a><a
href="#" target="_blank"><img alt="" src="frame5.jpg"></a></div>

<script>$(document).ready(function() {
$('
#slider').coinslider({ hoverPause: false });
});
</script>

</body>
راهنمای استفاده راهنمای استفاده
فایل ضمیمه را از انتهای همین بخش دانلود و به ترتیب زیر عمل نمایید:
کد را مطابق نمونه در دو بخش head و body صفحه قرار دهید. مسیر فایل های فراخوانی شده در قسمت head را در صورت لزوم اصلاح نمایید. سعی کنید از فایل جی کوئری اسلایدر استفاده نمایید. در صورت استفاده از جی کوئری نسخه های بالاتر عملکرد آن را روی اسلایدر بررسی نمایید. در صورت تکثیر اسلاید شو در صفحه، از آن بخش از کد که در بخش Body قرار گرفته است یک کپی گرفته و در بخش مورد نظر صفحه قرار داده، سپس مطابق کد نمونه قسمت های آبی رنگ را که همان id اسلایدر هستند به نام جدید (مثلا: slider2) تغییر دهید.
جهت درج توضیحات روی اسلاید، پس از تصویر هر اسلاید یک تگ <span> باز کرده و داخل آن توضیحات را بنویسید. (مطابق توضیحات اسلاید 1 در کد نمونه)

جهت انجام تنظیماتی از قبیل: پهنا، ارتفاع، میزان تاخیر بین هر اسلاید، شفافیت رنگ زمینه دکمه های کناری و توضیحات اسلاید ها ، نمایش یا عدم نمایش دکمه های کنترل و ... کد زیر را در انتهای فایل coin-slider.min.js بیابید و مقادیر آن را به دلخواه تغییر داده و تنظیم نمایید.

defaults={width:565,height:290,spw:7,sph:5,delay:3000,sDelay:30,opacity:0.7,titleSpeed:500,effect:'',navigation:true,
links:true,hoverPause:true}
فایل CSS این اسکریپت بسیار ساده بوده و به راحتی می توانید به سلیقه خود تغییرات لازم را در آن اعمال نمایید.
تعداد فریم ها با افزایش تصاویر بیشتر به طور خودکار افزایش می یابند.
فایل ضمیمه: CoinSlider.rar
رمز دسترسی: webkaran.com
افکت سربرگ باز شونده برای گوشه صفحه
Firefox, IE 8+, Chrome, Opera
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="peel.js"></script>
</head>
راهنمای استفاده راهنمای استفاده
افکتی زیبا و کاربردی که برای مواردی همچون تبلیغات، مطالب مهم ، مناسبت ها و ... می توان استفاده کرد. فایل ضمیمه این اسکریپت را از لینک پایین همین بخش دانلود نمایید. مطابق کد نمونه فایل jquery و peel.js را در قسمت head صفحه فراخوانی نمایید. در فایل ضمیمه دو عکس larg.jpg و small.jpg قرار دارد که تصاویر مورد نظر خود را به جای آنها جایگزین نمایید. به اندازه تصاویر توجه داشته باشید. در فایل peel.js به جای http://www.webkaran.com ، لینک مورد نظر خود را قرار دهید.

توجه: آدرس دو تصویر و دو فایل swf این اسکریپت در فایل peel.js تعریف شده است. لذا در صورت تغییر مکان فایل peel.js ، آدرس تصاویر و فایل های swf موجود در آن را اصلاح نمایید.


فایل ضمیمه: Corner-View-Effect.zip
اسکریپت بستن "آی پی"
Firefox, IE 8+, Chrome, Opera
<head>
<script language="JavaScript" type= "text/javascript" >

var banned_ip_page = "http://www.google.com"; // This is the page to direct to if the ip is banned

// get the visitor's IP address

var visitor_ip = '88.176.68.51'; // This is the visitor's IP address as returned by the server

// User defined test - add as many groups as you need for all the banned ips;
// Make sure you modify these example ip addresses and do not lock yourself out.
// The || (vertical bars or pipe lines) mean "or" and the == is used to test equality
// Each individual test is enclosed in parentheses
// The entire set of tests is enclosed in parentheses

if ( // opening parenthesis for the entire test

// You may change the tests from here
(visitor_ip == "88.176.68.51" )
|| (visitor_ip == "198.74.51.33" )
|| (visitor_ip == "198.74.61.68" )

|| (visitor_ip == "66.55.61.68" )
// until here ...

) // closing parenthesis for the entire test
{ alert("Sorry, your IP has been banned from this site");
document.location = banned_ip_page; }

</script>
</head>
راهنمای استفاده راهنمای استفاده
با استفاده از این کد، IP های تعیین شده را می توانید روی صفحه یا صفحات مورد نظر خود ببندید. این اسکریپت را هم در قسمت head و هم در قسمت body می توانید قرار دهید.
روش کاربرد: ابتدا یکی از IPها را در قسمت سبز رنگ کد قرار داده و دقیقا" همان IP را در بخش قرمز رنگ نیز تکرار کنید. سپس بقیه IP ها را به هر تعداد که هست در قسمت قرمز رنگ قرار دهید. بخش آبی رنگ کد، پیغامی است که در صورت بسته بودن IP نمایش داده می شود. که می توانید آن را بنا به سلیقه خود تغییر دهید. همچنین به جای http://www.google.com ، آدرس صفحه مورد نظر خود را که می خواهید بازدیدکننده پس از مشاهده بسته بودن IP به آن صفحه هدایت شود، قرار دهید.
افکتی برای checkbox و radio button
Firefox, IE 9+, Chrome, Opera
<head>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<style type="text/css">
input[type="checkbox"],input[type="radio"] {
padding:0;
margin:0;
opacity:0;
}
.div-as-checkbox,.div-as-radio{
border:1px solid #ddd; float:left; position:relative; margin-left:20px; border-radius:3px; background-color:#f2f2f2;
border-left-color:#c5c5c5; border-top-color:#c5c5c5; direction:ltr !important
}
.div-as-checkbox:hover,.div-as-radio:hover{
border-color:#aaa;
}
.div-as-radio{
border-radius:10px;
}
.div-as-radio img{
margin:0 1px 1px 2px;
}
.div-as-radio img.selected,.div-as-checkbox img.selected{
display:block
}
.div-as-checkbox img,.div-as-radio img{
display:none
}
.radio,.tick {
left:0
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".div-as-checkbox input[type='checkbox']").click(function() {
$(this).parent().find('img.tick').toggle();
});
$(".div-as-radio input[type='radio']").click(function() {
$('.div-as-radio').not(this).parent().find('img.radio').hide();
$(this).parent().find('img.radio').show().addClass('selected');
});

});
</script>
</head>

<body>
<div class="div-as-checkbox"><img src="../images/radio-checkbox/tick-icon.png" style="position:absolute; bottom:1px" class="tick" />
<input name="test" type="checkbox" value="" border="0" />
</div>
<div class="div-as-checkbox"><img src="../images/radio-checkbox/tick-icon.png" style="position:absolute; bottom:1px" class="tick selected" />
<input name="test" type="checkbox" value="" border="0" />
</div>
<div class="div-as-checkbox"><img src="../images/radio-checkbox/tick-icon.png" style="position:absolute; bottom:1px" class="tick" />
<input name="test" type="checkbox" value="" border="0" />
</div>
<div class="div-as-radio"><img src="../images/radio-checkbox/radio-icon.png" style="position:absolute; bottom:1px" class="radio selected" />
<input name="test" type="radio" value="" border="0" />
</div>
<div class="div-as-radio"><img src="../images/radio-checkbox/radio-icon.png" style="position:absolute; bottom:1px" class="radio" />
<input name="test" type="radio" value="" border="0" />
</div>
<div class="div-as-radio"><img src="../images/radio-checkbox/radio-icon.png" style="position:absolute; bottom:1px" class="radio" />
<input name="test" type="radio" value="" border="0" />
</div>
</body>

راهنمای استفاده راهنمای استفاده
با استفاده از این اسکریپت checkbox و radio button های صفحه را می توانید از حالت پیش فرض مرورگر خارج کرده و ظاهر آن را زیباتر و رنگ بندی آن را متنوع نمایید. مطابق کد نمونه در بخش head صفحه ، استایل ها ، کد جی کوئری و اسکریپت فراخوانی جی کوئری قرار دارد که آنها را در قسمت Head صفحه خود کپی نمایید. در قسمت body نیز بخش نمایشی کد قرار دارد که آن در قسمت مورد نظر صفحه قرار دهید. جهت کاهش یا افزایش تعداد radio button ها کد زیر را اضافه یا حذف نمایید:
<div class="div-as-radio"><img src="../images/radio-checkbox/radio-icon.png" style="position:absolute; bottom:1px" class="radio" />
<input name="test" type="radio" value="" border="0" />
</div>

جهت کاهش یا افزایش تعداد checkbox ها کد زیر را اضافه یا حذف نمایید:
<div class="div-as-checkbox"><img src="../images/radio-checkbox/tick-icon.png" style="position:absolute; bottom:1px" class="tick selected" />
<input name="test" type="checkbox" value="" border="0" />
</div>

رنگ بندی را به سلیقه خود می توانید از تصاویر موجود انتخاب نموده و نام تصویر را در کد اصلاح نمایید.
توجه: این اسکریپت در IE9 و بالاتر کار می کند.
                        
جی کوئری اسکرول بار
Firefox, IE 8+, Chrome, Opera
<head>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen"/>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
</script>
</head>
<body>

<div id="scrollbar1">
<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
<h3>راهنمای جستجوی صحیح در اینترنت</h3>
<p>امروزه موتورهای جستجوی زیادی بر روی شبکه وب فعال هستند که هر یک الگوریتم جستجوی خاص خود را دارد و به نحوی به جستجوی سایتهای موردنظر شما می پردازند. اما یکی از پرکاربردترین و مفیدترین موتورهای جستجو گوگل نام دارد که این روزها جام پیروزی را از دیگر رقبا ربوده است و روز به روز بر تعداد کاربران خود می افزاید. بدون تردید شما هم حداقل برای یکبار گذرتان به http://www.google.com خورده است و صفحه ساده و در عین حال پرقدرت این جستجوگر را دیده اید. جستجوگری که با پشتیبانی از زبانهای متنوع دنیا کاربران زیادی را به خود جذب کرده است. و شاید همین پشتیبانی از زبان فارسی است که در میان ایرانیان نیز از اقبال خوبی برخوردار شده است.</p>
<p>در این ترفندها می کوشیم تا ضمن آشنایی با نحوه صحیح کار با این جستجوگر کارایی بهره مندی از آنرا نیز بالا ببریم.
برای جستجو نمودن یک موضوع در گوگل کافی است که چند کلمه توصیفی و اصلی موضوع را در نوار مربوطه تایپ نمائید و سپس کلید Enter را فشار دهید و یا اینکه روی دکمة Search که در جلوی نوار جستجو تعبیه شده است کلیک نمائید، تا به لیستی از وب سایتهای مرتبط با موضوع دست یابید.
از آنجائیکه گوگل وب سایتهایی را لیست می کند که «همه» کلمات مورد جستجوی شما در آن باشند لذا بایستی سعی کنید تا در نوار جستجو، کلماتی را وارد کنید که اساسی تر هستند و از وارد کردن کلمات اضافی بپرهیزید تا نتایج جستجو به آنچه که شما می خواهید نزدیکتر باشند. </p>
<p>» کلمات اصلی را بنویسید
همانگونه که گفته شد برای بهتر نتیجه گرفتن از جستجو لازم است که کلمات اصلی را در نوار جستجو وارد کنید. برای اینکار هر قدر که می توانید، موضوع جستجو را ریزتر و معین تر نمائید. برای مثال بجای آنکه در نوار جستجو تایپ کنید "نقاش" بهتر است که نام نقاش مورد نظرتان را تایپ کنید، مثلاً بنویسید "پیکاسو". یا اینکه بجای "اتومبیل" بهتر است بنویسید "پژو" و یا...
همچنین دقت نمائید تا کلماتی را بکار برید که احتمال وجود توضیحات دربارة آنها بیشتر باشد. مثلاً به جای نوشتن "گذراندن یک شب خوب در تهران" بهتر است تایپ کنید "هتلهای تهران".</p><br />
» از آوردن حروف اضافه خودداری کنید
گوگل بطور پیش فرض فقط سایتهائی را لیست می نماید که تمام کلمات مورد جستجو در آنها باشند. و نیازی نیست که شما بین کلمات جستجو از کلمة پیوند دهندة "و" استفاده نمائید. به خاطر داشته باشید که وارد نمودن چنین کلماتی و کلماتی نظیر در، به، و... بر نتیجه جستجو تاثیر خواهد گذشت. بطور مثال برای جستجو در مورد تعطیلات در شمال بجای تایپ نمودن "گذراندن تعطیلات در شمال" بهتر است تنها بنویسید: "تعطیلات شمال".
خودِ گوگل هم برای بالا بردن کیفیت جستجوها بطور اتوماتیک کلمات معمولی و کاراکترهائی همچون "کجا" و "چطور" را از کلمات مورد جستجو حذف می نماید. چون این گونه کلمات باعث کندی عمل جستجو می شوند و تاثیری هم در بهبود جستجو ندارند و حتی کیفیت نتایج جستجو را کاهش هم می دهند.
حروف بزرگ و کوچک فرق نمی کنند
</div>
</div>
</div>
</body>
راهنمای استفاده راهنمای استفاده
این اسکریپت بسیار ساده و کاربردی بوده و به سادگی می توانید جایگزین اسکرول بار پیش فرض مرورگر نمایید. ابتدا فایل ضمیمه را که شامل یک فایل CSS و یک فابل js می باشد دانلود کرده، سپس مطابق کد نمونه در قسمت head صفحه فراخوانی نمایید. محتوای اسکرول بار را نیز در بخش body (body محلی است که می خواهید اسکرول بار شما نمایش داده شود) کپی نمایید. مسیر فایل های js و CSS را در صورت لزوم اصلاح نمایید.
توجه: چون فایل jquery مستقیما" از سایت jquery فراخوانی می گردد نیازی به تغییر ندارد.
اندازه، رنگ و ابعاد فضای اسکرول بار را می توانید از فایل CSS به سادگی تغییر دهید.
دریافت فایل ضمیمه
اسلایدشو با قابلیت پیش نمایش فریم ها
Firefox, IE 8+, Chrome, Opera
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery slideshow</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>

</head>
<body>
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><a href="#"><img src="data1/images/slide1.jpg" alt="" title="" id="wows1_0"/></a>توضیحات اسلاید 1</li>
<li><a href="#"><img src="data1/images/slide2.jpg" alt="" title="" id="wows1_1"/></a>توضیحات اسلاید 2</li>
<li><a href="#"><img src="data1/images/slide3.jpg" alt="" title="" id="wows1_2"/></a>توضیحات اسلاید 3</li>
<li><a href="#"><img src="data1/images/slide4.jpg" alt="" title="" id="wows1_3"/></a>توضیحات اسلاید 4</li>
</ul>
</div>
<div class="ws_bullets">
<div> <a href="#" title="اسلاید 1"><img src="data1/tooltips/slide1.jpg" alt="اسلاید 1"/>1</a> <a href="#" title="اسلاید 2"><img src="data1/tooltips/slide2.jpg" alt="اسلاید 2"/>2</a> <a href="#" title="اسلاید 3"><img src="data1/tooltips/slide3.jpg" alt="اسلاید 3"/>3</a> <a href="#" title="اسلاید 4"><img src="data1/tooltips/slide4.jpg" alt="اسلاید 4"/>4</a> </div>
</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
راهنمای استفاده راهنمای استفاده
ابتدا فایل ضمیمه را دانلود نمایید.
کد را مطابق نمونه در دو قسمت head و body قرار دهید.
مسیر فایل های js و CSS را در صورت نیاز اصلاح نمایید.

جهت افزایش تعداد اسلاید ها کد های زیر را اضافه کنید:
کد تصویر بزرگ:
<li><a href="#"><img src="data1/images/slide5.jpg" alt="" title="" id="wows1_3"/></a>توضیحات اسلاید 5 </li>

کد تصویر کوچک (پیش نمایش اسلاید):
<a href="#" title="اسلاید 5 "><img src="data1/tooltips/slide5.jpg" alt="اسلاید 5 "/>5</a>

سپس تصویر slide5.jpg را با ابعاد مربوطه در فولدرهای tooltips و images کپی نمایید. برای اسلاید های بیشتر نیز به همین ترتیب عمل کنید.
در فایل script.js سرعت و ابعاد اسلایدها را تنظیم نمایید.

فایل ضمیمه: Professional-Slider___webkaran.com.rar
رمز فایل: webkaran.com
گالری تصاویر حرفه ای - جی کوئری
Firefox, IE 8+, Chrome, Opera
راهنمای استفاده راهنمای استفاده
با این اسکریپت می توانید صفحاتی حرفه ای و زیبا برای تصاویر ، صفحه ورودی سایت و ... ایجاد نمایید. استفاده از آن بسیار ساده بوده و تنها کافیست تصاویر مورد نظر خود را جایگزین و در صورت نیاز گرافیک آن را بنا به سلیقه خود تغییر دهید.
جهت استفاده از این اسکریپت، فایل ضمیمه را دانلود و اصلاحات مورد نظر خود را اعمال نمایید.
توجه:
  • در صفحه index.html مسیر فایل های js و CSS را که در قسمت head صفحه فراخوانی شده اند را در صورت لزوم اصلاح نمایید.
  • این اسکریپت دارای یک فایل PHP می باشد. لذا جهت مشاهده دموی کامل این اسکریپت آن را روی هاست خود آپلود یا روی سرور لوکال اجرا نمایید.
  • فایل PHP به صورت پیش فرض در کنار صفحه index.html قرار دارد. در صورت تغییر محل آن، در فایل script.js آدرس آن را اصلاح کنید.
  • برای افزایش تعداد تصاویری که پس از کلیک نمایش داده می شوند، تنها کافیست در فولدر مربوطه تصاویر مورد نظر خود اضافه نمایید.
  • جهت افزایش تعداد بلاک های متحرک کد زیر را به تعداد دلخواه در فایل index.html اضافه نمایید:
    <div class="ps_album" style="opacity:0;"><img src="albums/album10/thumb/thumb.jpg" alt="">
    <div class="ps_desc">
    <h2>عنوان بلاک جدید </h2>
    <span>توضیحات</span></div>
    </div>
    سپس به ازای هر کد اضافه شده یک فولدر با نام album به ترتیب شماره ایجاد و مطابق الگوی فولدر های قبلی تصاویر خود را در آن ذخیره نمایید.

دریافت فایل ضمیمه | حجم فایل: 1.04 MB
متن متحرک با افکت تایپ شدن
Firefox, IE 8+, Chrome, Opera
<head>
<script type="text/javascript">
var theSummaries = new Array( "گوگل بزرگترین موتور جستجوگر در اینترنت","آلکسا ، ارائه دهنده خدمات رنکینگ و رتبه بندی وب سایت ها","شرکت اپل با ارزشترین شرکت فن آوری"," وب کاران : طراحی وب سایت","outlook ، جدیدترین سامانه ارائه دهنده خدمات ایمیل از مایکروسافت");
var theSiteLinks = new Array( "http://www.google.com","http://www.alexa.com","http://www.apple.com","http://www.webkaran.com","http://www.outlook.com" );
</script>
</head>

<body>

<div style="text-align:right; background:#333; padding:7px">
<div class="MyTicker"><span id="theTicker">&nbsp;</span></div>
<script src="../Scripts/Ticker.js" type="text/javascript"></script>
</div>
</body>
راهنمای استفاده راهنمای استفاده
کد را مطابق نمونه در دو قسمت head و قسمتی که می خواهید متن شما در آنجا نمایش داده شود قرار دهید. در قسمت head این اسکریپت متن های مورد نظر و لینک مربوطه را قرار دهید. تعداد متن ها نامحدود بوده و به هر تعداد می توانید افزایش دهید. در صورتیکه می خواهید تعدادی از متن ها به لینک دار نباشد، لینک مربوط به آن متن را خالی بگذارید. این کد یک فایل js نیز دارد که از لینک زیر می توانید دانلود نمایید. پس از دریافت فایل آن را مانند نمونه در کنار محل نمایش متن فراخوانی نمایید. جهت تنظیم میزان سرعت تایپ شدن حروف و همچنین فاصله زمانی نمایش بین هر متن ، کدهای زیر را در فایل js ویرایش نمایید.

var theCharacterTimeout = 60; : با افزایش این عدد سرعت تایپ حروف کاهش می یابد و بالعکس
var theStoryTimeout = 4000; : با افزایش یا کاهش این عدد فاصله زمانی بین نمایش هر متن را به دلخواه خود تغییر دهید.
فایل ضمیمه: ticker.js
افکت تصویر کاربردی و زیبا با جی کوئری
Firefox, IE 8+, Chrome, Opera
<head>
<style type="text/css">
.temp {
margin: 0px 5px 5px; width: 250px;
}
.temphol {
width: 250px; height: 165px; overflow: hidden; position: relative;
}
.temphol img {
left: 0px; top: 0px; position: absolute;
}
</style>
<script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../js/hover_effect.js">
</script>
</head>

<body>

<table border="0" cellpadding="0" cellSpacing="0" style="margin-top:10px" align="center">
<tr>
<td><div class="temp">
<div class="temphol"><a href="#"
target="_blank"><img border="0" alt="توضیحات" src="../images/js_prev_pics/gall_pics/back.jpg"> </a><img src="../images/js_prev_pics/gall_pics/sample1.jpg" alt="دوره های آموزش حضوری" width="250" height="165" border="0"
class="front"></div>
</div></td>
<td><div class="temp">
<div class="temphol"><a href="#"
target="_blank"><img border="0" alt="توضیحات"
src="../images/js_prev_pics/gall_pics/back.jpg"></a><img
src="../images/js_prev_pics/gall_pics/sample2.jpg" alt="توضیحات" width="250" height="165" border="0"
class="front"></div>
</div></td>
<td><div class="temp">
<div class="temphol"><a href="#"
target="_blank"><img border="0" alt="توضیحات"
src="../images/js_prev_pics/gall_pics/back.jpg"></a><img src="../images/js_prev_pics/gall_pics/sample3.jpg" alt="توضیحات" width="250" height="165" border="0"
class="front"></div>
</div></td>
</tr>
<tr>
<td><div class="temp">
<div class="temphol"><a href="#"
target="_blank"><img border="0" alt="توضیحات" src="../images/js_prev_pics/gall_pics/back.jpg"> </a><img
class="front" border="0" alt="توضیحات" src="../images/js_prev_pics/gall_pics/sample4.jpg"></div>
</div></td>
<td><div class="temp">
<div class="temphol"><a href="#"
target="_blank"><img border="0" alt="توضیحات"
src="../images/js_prev_pics/gall_pics/back.jpg"> </a><img
class="front" border="0" alt="توضیحات" src="../images/js_prev_pics/gall_pics/sample5.jpg"></div>
</div></td>
<td><div class="temp">
<div class="temphol"><a href="#"
target="_blank"><img border="0" alt="توضیحات"
src="../images/js_prev_pics/gall_pics/back.jpg"></a><img
src="../images/js_prev_pics/gall_pics/sample6.jpg" alt="توضیحات" width="250" height="165" border="0"
class="front"></div>
</div></td>
</tr>
</table>
</body>
راهنمای استفاده راهنمای استفاده
کد را مطابق نمونه در دو بخش head و body صفحه قرار دهید. فایل های ضمیمه شامل تصاویر نمونه و فایل های جاوا اسکریپت را در ادامه مطلب دریافت و آدرس عکس ها و فایل ها را مطابق با مسیر مورد نظر خود اصلاح نمایید. با تکرار کلاس های temp و temphol تعداد تصاویر را به میزان دلخواه افزایش دهید. با تغییر اندازه ابعاد تعریف شده در کلاس های مذکور، اندازه تصاویر را مطابق سلیقه خود تغییر دهید.
دریافت فایل ضمیمه
ماشین حساب پیشرفته
Firefox, IE 8+, Chrome, Opera
<head>
<script language="JavaScript">
function addChar(input, character) {
if(input.value== null || input.value== "0")
input.value= character
else
input.value += character
}
function cos(form) {
form.display.value= Math.cos(form.display.value);
}
function sin(form) {
form.display.value= Math.sin(form.display.value);
}
function tan(form) {
form.display.value= Math.tan(form.display.value);
}
function sqrt(form) {
form.display.value= Math.sqrt(form.display.value);
}
function ln(form) {
form.display.value= Math.log(form.display.value);
}
function exp(form) {
form.display.value= Math.exp(form.display.value);
}
function deleteChar(input) {
input.value= input.value.substring(0, input.value.length - 1)
}
function changeSign(input) {
if(input.value.substring(0, 1) == "-")
input.value= input.value.substring(1, input.value.length)
else
input.value= "-" + input.value
}
function compute(form) {
form.display.value= eval(form.display.value)
}
function square(form) {
form.display.value= eval(form.display.value) * eval(form.display.value)
}
function checkNum(str) {
for (var i = 0; i < str.length; i++) {
var ch = str.substring(i, i+1)
if (ch < "0" || ch > "9") {
if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "."
&& ch != "(" && ch!= ")") {
alert("invalid entry!")
return false
}
}
}
return true
}
</SCRIPT>
<style type="text/css">
form#calculator,table#calculator td{
margin:0; padding:0
}
input.cal{width:50px !important; text-align:center; border:1px outset #bbb; background:#f5f5f5; height:23px; margin-top:1px}
input.back{width:154px !important; text-align:center; border:1px outset #bbb; background:#f5f5f5; height:23px; margin-top:1px}
input.view{width:246px !important; background:#ffd; border:1px inset #999; height:21px; padding:2px 5px; font:normal 12px verdana }
</style>
</head>

<body>

<form name="sci-calc">
<table border="0" cellpadding="0" cellspacing="0" id="calculator">
<tr>
<td colspan="5" align="center"><INPUT name="display" value="0" MAXLENGTH="25" class="view"></td>
</tr>
<tr>
<td align="center"><input type="button" class="cal" value=" exp " onClick="if (checkNum(this.form.display.value)) { exp(this.form) }"></td>
<td align="center"><input type="button" class="cal" value=" 7 " onClick="addChar(this.form.display, '7')"></td>
<td align="center"><input type="button" class="cal" value=" 8 " onClick="addChar(this.form.display, '8')"></td>
<td align="center"><input type="button" class="cal" value=" 9 " onClick="addChar(this.form.display, '9')"></td>
<td align="center"><input type="button" class="cal" value=" / " onClick="addChar(this.form.display, '/')"></td>
</tr>
<tr>
<td align="center"><input type="button" class="cal" value=" ln " onClick="if (checkNum(this.form.display.value)) { ln(this.form) }"></td>
<td align="center"><input type="button" class="cal" value=" 4 " onClick="addChar(this.form.display, '4')"></td>
<td align="center"><input type="button" class="cal" value=" 5 " onClick="addChar(this.form.display, '5')"></td>
<td align="center"><input type="button" class="cal" value=" 6 " onClick="addChar(this.form.display, '6')"></td>
<td align="center"><input type="button" class="cal" value=" * " onClick="addChar(this.form.display, '*')"></td>
</tr>
<tr>
<td align="center"><input type="button" class="cal" value=" sqrt " onClick="if (checkNum(this.form.display.value)) { sqrt(this.form) }"></td>
<td align="center"><input type="button" class="cal" value=" 1 " onClick="addChar(this.form.display, '1')"></td>
<td align="center"><input type="button" class="cal" value=" 2 " onClick="addChar(this.form.display, '2')"></td>
<td align="center"><input type="button" class="cal" value=" 3 " onClick="addChar(this.form.display, '3')"></td>
<td align="center"><input name="button" type="button" class="cal" onClick="addChar(this.form.display, '-')" value=" - "></td>
</tr>
<tr>
<td align="center"><input type="button" class="cal" value=" sq " onClick="if (checkNum(this.form.display.value)) { square(this.form) }"></td>
<td align="center"><input type="button" class="cal" value=" 0 " onClick="addChar(this.form.display, '0')"></td>
<td align="center"><input type="button" class="cal" value=" . " onClick="addChar(this.form.display, '.')"></td>
<td align="center"><input type="button" class="cal" value=" +/- " onClick="changeSign(this.form.display)"></td>
<td align="center"><input type="button" class="cal" value=" + " onClick="addChar(this.form.display, '+')"></td>
</tr>
<tr>
<td align="center"><input type="button" class="cal" value=" ( " onClick="addChar(this.form.display, '(')"></td>
<td align="center"><input type="button" class="cal" value="cos" onClick="if (checkNum(this.form.display.value)) { cos(this.form) }"></td>
<td align="center"><input type="button" class="cal" value=" sin" onClick="if (checkNum(this.form.display.value)) { sin(this.form) }"></td>
<td align="center"><input type="button" class="cal" value=" tan" onClick="if (checkNum(this.form.display.value)) { tan(this.form) }"></td>
<td align="center"><input type="button" class="cal" value=" ) " onClick="addChar(this.form.display, ')')"></td>
</tr>
<tr>
<td align="center"><input type="button" class="cal" value="clear" onClick="this.form.display.value= 0 "></td>
<td align="center" colspan="3"><input type="button" class="back" value="backspace" onClick="deleteChar(this.form.display)"></td>
<td align="center"><input type="button" class="cal" value="=" name="enter" onClick="if (checkNum(this.form.display.value)) { compute(this.form) }"></td>
</tr>
</table>
</form>
</body>
راهنمای استفاده راهنمای استفاده
کد را مطابق نمونه در دو قسمت head و قسمتی که می خواهید ماشین حساب در آنجا نمایش داده شود قرار دهید.
اسکریپت بارگذاری تصاویر در صفحه
---
Firefox, IE 8+, Chrome, Opera
<script type="text/javascript">
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
//Enter path of images to be preloaded inside parenthesis. Extend list as desired.
preloadimages("sample1.gif ","sample2.gif","sample3.gif")

</script>

راهنمای استفاده راهنمای استفاده
سرعت بارگذاری صفحات وب و تصاویر موجود در آنها همواره یکی از فاکتورهای مهم در طراحی صفحات و از جمله مواردی است که یک طراح وب باید آنها را در نظر داشته باشد. بارگذاری تصاویر صفحات متناسب با حجم آنها و سرعت اینترنت مدت زمانی را طلب می کند. با این اسکریپت می توانید سرعت بارگذاری صفحات و در نتیجه بارگذاری کلی صفحه را بهبود بخشید. کد را در قسمت head صفحه قرار داده و در قسمت انتهایی (بخش قرمز رنگ)، مسیر عکس های مورد نظر خود را وارد نمایید. این کد حالت پیش نمایش ندارد.
افکتی کاربردی برای منوهای آبشاری
Firefox, IE 8+, Chrome, Opera
<head>
<script language="javascript" src="chainedselects.js"></script>
<script language="javascript" src="exampleconfig2.js"></script>

</head>
<html>
<body onLoad="initListGroup('vehicles', document.forms[0].make, document.forms[0].type, document.forms[0].model, 'cs')">
<form>
<table align="center"><tr>
<td>انتخاب کنید: </td>
<td><select name="make" style="width:160px;"></select></td>
<td><select name="type" style="width:160px;"></select></td>
<td><select name="model" style="width:160px;"></select></td>
<td><input type="button" value="Reset" onClick="resetListGroup('vehicles')">
</tr></table>
</form></body></html>
راهنمای استفاده راهنمای استفاده
افکتی کاربردی در طراحی فرم های مختلف که ترتیب انتخاب در آنها مهم است. مطابق نمونه در قسمت های head و body صفحه، کد را قرار دهید. در داخل تگ body، مقدار onload را مطابق کد نمونه اضافه نمایید. این اسکریپت دارای دو فایل جاوا اسکریپت می باشد که می بایست در قسمت head ، آنها را فراخوانی نموده و مسیر آنها را در صورت نیاز اصلاح نمایید.

»
فایل ضمیمه: pulldown_effect.rar
جستجوی دو حالته گوگل (جستجو در سایت و اینترنت)
Firefox, IE 8+, Chrome, Opera
<!-- ----- Start google search code by www.webkaran.com ----- -->
<form target='_blank' method="get" action="http://www.google.com/search" style="margin:0; padding:0">
<table width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl" style="margin: 0 auto 12px auto; width:220px; font:normal 11px tahoma; line-height:20px">

<tr>
<td colspan="2" style="text-align:right"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="48%"><input name="q" size="15" maxlength="255" style="direction:rtl; padding:2px 3px; direction:rtl; width:150px; font-family:Tahoma; font-size:11px" /></td>
<td width="52%"><input type="submit" name="btnG" value="جستجو" style="padding:2px 5px; font-size:11px; font-family:Tahoma; margin-right:3px" /></td>
</tr>
</table></td>
</tr>
<tr>
<td width="10%" style="text-align:right"><input value='webkaran.com' type="radio" name="sitesearch" checked='' /></td>
<td width="100%" style="text-align:right">در سایت وب کاران </td>
</tr>
<tr>
<td style="text-align:right"><input type="radio" name="sitesearch" value="" /></td>
<td style="text-align:right">در اينترنت
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="oe" value="UTF-8" /></td>
</tr>
</table>
</form>
<!-- ----- The End of google search Code ----- -->
راهنمای استفاده راهنمای استفاده
جستجوی گوگل یکی از کاربردی ترین ابزاری است که در هر سایت یا وبلاگی قابل استفاده می باشد. در اینجا اسکریپت جستجوی دو حالته گوگل را به شما معرفی می کنیم که این امکان را به کاربر می دهد که در سایت / وبلاگ یا در اینترنت به جستجو بپردازد.
کد را کپی و در محل مورد نظر در سایت یا وبلاگ خود قرار دهید. در کد، به جای webkaran.com، آدرس سایت یا وبلاگ مورد نظر خود را قرار دهید. استایل های کد را به راحتی و منطبق با گرافیک مورد نظر خود می توانید تغییر دهید.
افکتی زیبا جهت نمایش تصاویر در صفحه
Firefox, IE 8+, Chrome, Opera
<head>
<script type="text/javascript" src="lightbox.js"></script>
<link href="lightbox.css" rel="stylesheet" type="text/css" media="screen"/>
</head>

<body>

<a href="img001_500px.jpg" rel="lightbox"><img src="img001.jpg" width="140" height="105" border="0"></a>
<br>
<a href="img002_500px.jpg" rel="lightbox"><img src="img002.jpg" width="140" height="105" border="0"></a>
<br>
<a href="img003_500px.jpg" rel="lightbox"><img src="img003.jpg" width="140" height="105" border="0"></a>
<br>
<a href="img003_500px.jpg" rel="lightbox">lightbox gallery</a>
</body>
راهنمای استفاده راهنمای استفاده
با این افکت ساده می توانید نحوه نمایش تصاویر را جذاب تر نمایید. کلیه فایل های لازم جهت این اسکریپت در یک فایل zip ذخیره شده است. پس از دانلود و باز کردن فایل طبق کد نمونه بالا عمل نمایید. فایل js و CSS را در بخش head فرا خوانی نمایید. از فایل CSS تغییرات مورد نظر خود را اعمال نمایید. مسیر فایل های loading.gif و close.gif را در فایل js، در صورت نیاز، اصلاح نمایید. در تگ <a ... مطابق کد نمونه عبارت rel="lightbox" را قرار دهید.

» فایل ضمیمه: LightBoxGallery.zip
محتوای داینامیک - نمایش محتوا به صورت اسلایدی
Firefox, IE 8+, Chrome, Opera
<head>
<script type="text/javascript" src="contentslider.js"></script>
<link href="contentslider.css" rel="stylesheet" type="text/css">
</head>

<body>

<!-- =================== نمونه 1 ==================== -->
<div align="center">

<div id="slider1" class="sliderwrapper">
<div class="contentdiv">
محتوای شماره 1
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>
</div>

<div class="contentdiv">
محتوای شماره 2
</div>

<div class="contentdiv">
محتوای شماره 3
</div>

</div>
<div id="paginate-slider1" class="pagination">

</div>
<script type="text/javascript">

featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})

</script>
<!-- ---------------------------------- انتهای کد نمونه 1 ------------------------------ -->

<!-- =================== نمونه 2 ==================== -->

<div id="slider2" class="sliderwrapper">

<div class="contentdiv">
محتوای شماره 1
</div>

<div class="contentdiv">
محتوای شماره 2 <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider2', 1)">Go back to 1st slide</a></p>
</div>

<div class="contentdiv">
محتوای شماره 3
</div
>

</div>

<div id="paginate-slider2" class="pagination">

<a href="#" class="toc">page 1</a> <a href="#" class="toc anotherclass">page 2</a> <a href="#" class="toc">page 3</a> <a href="#" class="prev" style="margin-left: 10px"><strong><</strong></a> <a href="#" class="next"><strong>></strong></a></div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider2", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [false, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>
</body>

راهنمای استفاده راهنمای استفاده
محتوای داینامیک یا نمایش به صورت اسلایدی امروزه کاربردهای زیادی در صفحات وی دارد و در قسمت های مختلف سایت از این ابزار مناسب و کاربردی استفاده می شود. در اینجا اسکریپت نسبتا" ساده ای از محتوای داینامیک را آورده ایم. این کد سه فایل ضمیمه دارد که می بایست ابتدا آنها را دانلود نمایید. این سه فایل عبارتند از یک فایل js, یک فایل CSS و آیکن لودینگ (Loading). مطابق کد نمونه در قسمت head فایل های CSS و js را فرا خوانی نمایید. کد نمونه 1 یا 2 (کد پیشنهادی: نمونه 2) را کپی و در بخش مورد نظر از صفحه قرار دهید. با استفاده از فایل CSS ساختار گرافیکی را مطابق سلیقه خود می توانید اصلاح نمایید. با استفاده از قسمت هایی که در کد به صورت پررنگ نمایش داده شده است سرعت تغییر فریم و افکت و تنظیمات کنترلی را می توانید تغییر دهید. در صورت افزایش تعداد فریم ها، بخشی از کد را که با رنگ آبی مشخص شده به تعداد دلخواه اضافه نمایید، با افزایش هر فریم شماره مربوطه به صورت خودکار اضافه می شود. به جای محتوای شماره 1، 2 و 3 محتوای مورد نظر خود را جایگزین نمایید. تگ <a> که با رنگ قرمز مشخص شده است یک لینک میانبر به فریم مورد نظر شما می باشد. در فایل js آدرس آیکن لودینگ را در صورت نیاز اصلاح نمایید.
توجه: هر دو نمونه 1 و 2 یکسان بوده و تنها در چیدمان و شکل لینک های کنترلی تفاوت دارند.
در اسکریپت نمونه 2 به جای لینک متنی، از تصویر نیز می توانید استفاده نمایید. (بخش سبز رنگ)

دانلود فایل ضمیمه: DynamicContent.zip
دکمه ای جهت انتقال به بالای صفحه با افکتی زیبا (jQuery)
Firefox, IE 8+, Chrome, Opera
<head>
<script type="text/javascript" src="Scripts/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/scrolltopcontrol.js"></script>
</head>

<body>

<a href="#top">بالای صفحه</a>
</body>
راهنمای استفاده راهنمای استفاده
این اسکریپت با jquery ایجاد شده و در همه مرورگرها کار می کند. این کد دارای دو فایل جاوا اسکریپت خارجی است که پس از دانلود، آنها را در قسمت head صفحه قرار داده و مسیر آن را اصلاح نمایید. (مطابق کد نمونه) سپس در انتهای صفحه لینک مورد نظر خود را قرار دهید. به جای متن از آیکن هم می توانید استفاده نمایید.

» فایل ضمیمه: scrolltopcontrol.zip
انتخاب و کپی متن از یک فیلد Textarea با یک کلیک
Firefox, IE 8+, Chrome, Opera
<head>
<script type="text/javascript">
i=0;
s=0;
num=0;
seq1="",seq2="";
ie = document.all?1:0;
ns = document.layers?1:0;
ns6 = document.getElementById?1:0;
svet = "";
function selectCode()
{
padText=document.pad.text;
if(padText.value.length>0)
{
if (ie)
{
therange=padText.createTextRange();
therange.execCommand("Copy");
window.status="Code copied into Clipboard!";
setTimeout("window.status=''",1800);
}
padText.focus();
padText.select();
}
else alert('!متنی برای انتخاب وجود ندارد') //Nothing to be selected!
}
</script>
</head>

<body>

<form name="pad" method="post">
<table cellSpacing="0" cellPadding="0" border="0" align="center">
<tr>
<td align="left" valign="middle">
<b>HTML Code:&nbsp;&nbsp;</b></td>
<td align="center"><textarea name="text" rows="8" cols="50"></textarea></td>
</tr>
<tr>
<td></td>
<td align="center"><input onClick="selectCode()" type="button" value="Select / Copy" name="select"></td>
</tr>
</table>
</form>
</body>
راهنمای استفاده راهنمای استفاده
کد را به ترتیبی که آمده در قسمت های head و محل مورد نظر در کد صفحه قرار دهید.
نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip
Firefox, IE 8+, Chrome, Opera
<head>
<style type="text/css">
#hintbox{ /*CSS for pop up hint box */
position:absolute;
top: 0;
background-color: #ffffee;
width: 160px; /*Default width of hint.*/
padding: 3px;
border:1px solid black;
font:normal 11px Verdana;
line-height:18px;
z-index:100;
border-right: 3px solid black;
border-bottom: 3px solid black;
visibility: hidden; font-family:Tahoma
}

.hintanchor{ /*CSS for link that shows hint onmouseover*/
font-weight: bold;
color: navy;
margin: 3px 8px;
}
</style>

<script type="text/javascript">
var horizontal_offset="9px" //horizontal offset of hint box from anchor link

/////No further editting needed

var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.
var ie=document.all
var ns6=document.getElementById&&!document.all

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
if (whichedge=="rightedge"){
var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
}
else{
var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
}
return edgeoffset
}

function showhint(menucontents, obj, e, tipwidth){
if ((ie||ns6) && document.getElementById("hintbox")){
dropmenuobj=document.getElementById("hintbox")
dropmenuobj.innerHTML=menucontents
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (tipwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=tipwidth
}
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
dropmenuobj.style.visibility="visible"
obj.onmouseout=hidetip
}
}

function hidetip(e){
dropmenuobj.style.visibility="hidden"
dropmenuobj.style.left=""
}

function createhintbox(){
var divblock=document.createElement("div")
divblock.setAttribute("id", "hintbox")
document.body.appendChild(divblock)
}

if (window.addEventListener)
window.addEventListener("load", createhintbox, false)
else if (window.attachEvent)
window.attachEvent("onload", createhintbox)
else if (document.getElementById)
window.onload=createhintbox

</script>

</head>

<body>
<form>
<table width="40%" border="0" cellspacing="0" cellpadding="0" style="font-size:11px">
<tr>
<td width="22%" height="30" align="left" valign="middle">Name:</td>
<td width="78%" align="left" valign="middle"><input name="text" type="text" class="test" />
<a href="#" class="hintanchor" onMouseOver="showhint('Description ...', this, event, '150px')">[?]</a>
<!-- پهنای فضای نمایش توضیحات می باشد . این مقدار قابل حذف یا تغییر می باشد 150px -->
</td>
</tr>
<tr>
<td height="30" align="left" valign="middle">Tel. :</td>
<td align="left" valign="middle"><input name="text2" type="text" class="test" />
<a href="#" class="hintanchor" onMouseOver="showhint('Description ...', this, event, '150px')">[?]</a></td>
</tr>
<tr>
<td height="30" align="left" valign="middle">Education :</td>
<td align="left" valign="middle"><input name="text2" type="text" class="test" />
<a href="#" class="hintanchor" onMouseOver="showhint('Description ...', this, event, '150px')">[?]</a>
</td>
</tr>
<tr>
<td height="30" align="left" valign="middle">Address:</td>
<td align="left" valign="middle"><textarea name="text3" rows="4" class="test" style="margin-top:3px"></textarea>
<a href="#" class="hintanchor" onMouseOver="showhint('Description ...', this, event, '150px')">[?]</a></td>
</tr>
</table>
</form>
</body>

راهنمای استفاده راهنمای استفاده
این کد دارای دو قسمت می باشد که در بخش های head و Body صفحه قرار می گیرد. با استفاده از style هایی که در قسمت head تعریف شده است می توانید ظاهر و گرافیک آن را به سلیقه خود تغییر دهید.
اعتبار سنجی فیلد ایمیل قبل از ثبت یک فرم
Firefox, IE 8+, Chrome, Opera
<script type="text/javascript">
var emailfilter=/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i
function checkmail(e){
var returnval=emailfilter.test(e.value)
if (returnval==false){
alert("Please enter a valid email address.")
e.select()
}
return returnval
}
</script> <form>
<input name="myemail" type="text" style="width: 250px">
<input type="submit" onClick="return checkmail(this.form.myemail)" value="Submit" />
</form>
راهنمای استفاده راهنمای استفاده
کدی ساده و کاربردی برای بررسی صحت آدرس ایمیل در فرم ها قبل از تکمیل و ثبت. کد را در قسمتی از فرم که مربوط به پر کردن فیلد ایمیل می باشد قرار داده و تنظیمات را طبق آنچه در کد آمده است انجام دهید.
اسکریپت گالری تصاویر با قابلیت صفحه بندی
Firefox, IE 8+, Chrome, Opera
<head>

<script type="text/javascript" src="photogallery.js">
</script>

<style type="text/css">

.photogallery{ /*CSS for TABLE containing a photo album*/
text-align:center
}

.photogallery img{ /*CSS for images within an album*/
border: 2px solid #333;
}

.photonavlinks{ /*CSS for pagination DIV*/
font: bold 14px Arial; padding:2px; text-align:center; width:700px}

.photonavlinks a{ /*CSS for each navigational link*/
margin-right: 2px;
margin-bottom: 3px;
padding: 1px 5px;
border:1px solid gray;
text-decoration: none;
background-color: white;
}

.photonavlinks a.current{ /*CSS for currently selected navigational link*/
background-color: #ffffdd;
}
</style>

</head>

<body>

<script type="text/javascript">

//Define your own array to hold the photo album images
//Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]

var myvacation=new Array()
myvacation[0]=["../images/js_prev_pics/img1.jpg", "sample 1", "http://www.webkaran.com"]
myvacation[1]=["../images/js_prev_pics/img2.jpg", "sample 2", "http://www.yahoo.com"]
myvacation[2]=["../images/js_prev_pics/img3.jpg", "sample 3", "http://www.google.com"]
myvacation[3]=["../images/js_prev_pics/img1.jpg", "sample 4", "http://www.webkaran.com"]
myvacation[4]=["../images/js_prev_pics/img2.jpg", "sample 5", "http://www.yahoo.com"]
myvacation[5]=["../images/js_prev_pics/img3.jpg", "sample 6", "http://www.google.com"]
myvacation[6]=["../images/js_prev_pics/img1.jpg", "sample 7", "http://www.webkaran.com"]
myvacation[7]=["../images/js_prev_pics/img2.jpg", "sample 8", "http://www.yahoo.com"]
myvacation[8]=["../images/js_prev_pics/img3.jpg", "sample 9", "http://www.google.com"]

//initiate a photo gallery
//Syntax: new photogallery(imagearray, cols, rows, tablewidth, tableheight, opt_[paginatetext_prefix, paginatetext_linkprefix])
var thepics=new photogallery(myvacation, 3, 2, '700px', '200px')

//----------------------------- راهنمایی ---------------------------------
// 3: تعداد تصاویر در هر ردیف
// 2: تعداد تصاویر در هر ستون
// 700: پهنای فضای گالری
// 200: ارتفاع فضای گالری
//--------------------------------------------------------------------------

//OPTIONAL: Run custom code when an image is clicked on, via "onselectphoto"
//DELETE everything below to disable
//Syntax: function(img, link){}, whereby img points to the image object of the image, and link, its link object, if defined
thepics.onselectphoto=function(img, link){
if (link!=null) //if this image is hyperlinked
window.open(link.href, "", "width=800, height=600, status=1, resizable=1")
return false //cancel default action when clicking on image, by returning false instead of true
}
</script>
</body>

راهنمای استفاده راهنمای استفاده
این اسکریپت دارای دو بخش بوده که در قسمت های head و body صفحه قرار می گیرند. همچنین فایل ضمیمه را دانلود نموده و مسیر آن را در کد اصلاح نمایید. تعداد تصاویر در هر سطر و ستون و ابعاد فضای گالری طبق توضیح آمده در کد قابل تنظیم می باشد. با style های تعریف شده در قسمت head، گرافیک کلی سایت را می توانید تغییر دهید.هر تصویر با یک عدد (در کد نمونه از 0 تا 8) تعریف شده است که با افزایش تصویر ، اعداد بعدی نیز تعریف می گردد.

فایل ضمیمه: photogallery.js
محدود کردن تعداد حروف و کاراکترهای ورودی در فیلدهای یک فرم
Firefox, IE 8+, Chrome, Opera
<head>
<style type="text/css">

.progress{
width: 1px;
height: 14px;
color: white;
font-size: 12px;
overflow: hidden;
background-color: navy;
padding-left: 5px;
}

</style>

<script type="text/JavaScript">
function textCounter(field,counter,maxlimit,linecounter) {
// text width//
var fieldWidth = parseInt(field.offsetWidth);
var charcnt = field.value.length;

// trim the extra text
if (charcnt > maxlimit) {
field.value = field.value.substring(0, maxlimit);
}

else {
// progress bar percentage
var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="Limit: "+percentage+"%"
// color correction on style from CCFFF -> CC0000
setcolor(document.getElementById(counter),percentage,"background-color");
}
}

function setcolor(obj,percentage,prop){
obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}
</script>
</head>

<body>
<form>
<textarea rows="5" cols="40" name="maxcharfield" id="maxcharfield"
onKeyDown="textCounter(this,'progressbar1',20)"
onKeyUp="textCounter(this,'progressbar1',20)"
onFocus="textCounter(this,'progressbar1',20)" ></textarea><br />

<div id="progressbar1" class="progress"></div>

<script>textCounter(document.getElementById("maxcharfield"),"progressbar1",20)</script>

</form>
</body>

راهنمای استفاده راهنمای استفاده
این اسکریپت را در دو بخش head و داخل فیلدهای فرم مورد نظر خود قرار دهید. در اینجا Textarea انتخاب شده است. جهت تغییر تعداد کاراکترهای ورودی، عدد 20 مشخص شده در کد را تغییر دهید. همچنین جهت تغییرات مورد نظر خود روی نوار نمایش وضعیت، تعداد کاراکتر ورودی style بخش head را اصلاح نمایید.
قرار دادن لوگوی سایت در صفحه به صورت ایستا
Firefox, IE 8+, Chrome, Opera
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="staticlogo.js"></script>
</head>
» پس از دانلود فایل ضمیمه، کد زیر را در فایل staticlogo.js که مربوط به موقعیت لوگو در صفحه و آدرس تصویر لوگو میباشد را با لوگوی مورد نظر خود اصلاح و جایگزین نمایید.

setting: {orientation:4, visibleduration:20000, fadeduration:[1000, 500]}, //orientation=1|2|3|4, duration=millisec, fadedurations=millisecs
offsets: {x:10, y:10},//offset of logo relative to window corner
logoHTML: '<a href="http://www.webkaran.com" title="webkaran"><img src="logo.gif" style="width:50px; height:47px; border:0" /></a>', //HTML for logo, which is auto wrapped in DIV w/ ID="mysitelogo"
فایل ضمیمه: StaticLogo.zip

راهنمای استفاده راهنمای استفاده
قسمتی از کد را در بخش head کپی نمایید. فایل ضمیمه را دانلود نموده و طبق توضیحات ذکر شده اصلاحات مربوط به لوگوی خود را در آن اعمال نمایید.
تغییر تصویر پس زمینه (Background) صفحه با انتخاب کاربر
IE 8+
<head>
<style>
.bgimages img {cursor:hand}
</style>
<script language="JavaScript1.2">
<!--
function tile(){
if (!document.all)
return
var source=event.srcElement
if (source.tagName=="IMG")
document.body.style.backgroundImage="url("+source.src+")"
} function restore(){
document.body.style.backgroundImage=''
}
document.body.onload=restore
//-->
</script>
</head>

<body>

<span class="bgimages" onClick="tile();event.cancelBubble=true"><img src="backgr10.jpg"><img src="backgr11.jpg"><img src="backgr13.jpg"><img src="backgr14.jpg"></span>
</body>


backgr01backgr04backgr03backgr02
راهنمای استفاده راهنمای استفاده
کد را در دو قسمت head و body کپی نمایید. تصاویر قابل افزایش به تعداد دلخواه میباشد.
انتخاب صفحه:
لطفا هر گونه سوال، اشکال و یا نظرات و پیشنهادات خود در مورد اسکریپت ها را در انجمن سایت مطرح نمایید.
پس از عضویت در انجمن وارد موضوع مربوطه شده و سوال یا اشکال مورد نظر خود را مطرح نمایید.
 
سایت وب کاران، برنده مدال الکترونیکی کیفیت برتر Elecitex


نشان تعالی
مدال الکترونیکی کیفیت برتر
کلیک برای تایید السیتکس