تغییر cursor mouseدر طراحی سایت

 
elhamnaderi
elhamnaderi
کاربر تازه وارد
تاریخ عضویت : شهریور 1393 
تعداد پست ها : 65
محل سکونت : تهران

تغییر cursor mouseدر طراحی سایت

 

ممکن است شما در طراحی سایت خود نیاز به این داشته باشید که  cursorموس خود را وقتی بر روی برخی قسمت ها قرار می گیرد در قالبی دیگر در طراحی وب سایت شما به نمایش گذاشته شود. امکان این ایفکت موجب زیباتر نمودن طراحی سایت شما و در عین حال موجب جلب نظر کاربر به آن بخش خاص از سایت خواهد شد. با طراحی سایت متناسب با نظر و توجه کاربر موجب افزایش ترافیک به سمت وب سایت خود خواهید شد که به موجب آن تاثیرگذاری مثبتی را در سئو سایت خود خواهید داشت. در اینجا اسکریپی که بدین منظور می بایست در طراحی وب سایت شما لحاظ شود را درج نموده ایم.
 
قطعه کد زیر را می بایست در قسمت تگ <head>  وارد نمایید.
 
<STYLE TYPE="text/css">
 
<!--
 
 
 
BODY{
 
overflow-x:hidden;
 
}
 
 
 
.s1
 
{
 
  position  : absolute;
 
  font-size : 10pt;
 
  color     : blue;
 
  visibility: hidden;
 
}
 
 
 
.s2
 
{
 
  position  : absolute;
 
  font-size : 18pt;
 
  color     : red;
 
                visibility : hidden;
 
}
 
 
 
.s3
 
{
 
  position  : absolute;
 
  font-size : 14pt;
 
  color     : gold;
 
                visibility : hidden;
 
}
 
 
 
.s4
 
{
 
  position  : absolute;
 
  font-size : 12pt;
 
  color     : lime;
 
                visibility : hidden;
 
}
 
 
 
//-->
 
</STYLE>
 
 
 
و همچنین کد زیر را در قسمت تگ  <BODY>صفحه سایت خود وارد نمایید.
 
<DIV ID="div1" CLASS="s1">*</DIV>
 
<DIV ID="div2" class="s2">*</DIV>
 
<DIV ID="div3" class="s3">*</DIV>
 
<DIV ID="div4" class="s4">*</DIV>
 
 
 
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
 
<font face="arial, helvetica" size="-2"><a href="http://j-avascriptkit.com">JavaScript
 
Kit</a></font></p>
 
 
 
<SCRIPT LANGUAGE="javascript" TYPE="text/j-avascript">
 
 
 
/*
 
Script by Mike McGrath- http://website.lineone.net/~mike_mcgrath
 
Featured on JavaScript Kit (http://j-avascriptkit.com)
 
For this and over 400+ free scripts, visit http://j-avascriptkit.com
 
*/
 
 
 
//Updated Feb 20th, 08 by JavaScriptKit.com: Script now compatible in IE7/FF
 
 
 
var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
 
 
 
var nav = (!document.all || window.opera);
 
var tmr = null;
 
var spd = 50;
 
var x = 0;
 
var x_offset = 5;
 
var y = 0;
 
var y_offset = 15;
 
 
 
document.on-mousemove = get_mouse;
 
 
 
function get_mouse(e)
 
{   
 
  x = (nav) ? e.pageX : event.clientX+standardbody.scrollLeft;
 
  y = (nav) ? e.pageY : event.clientY+standardbody.scrollTop;
 
  x += x_offset;
 
  y += y_offset;
 
  beam(1);    
 
}
 
 
 
function beam(n)
 
{
 
  if(n<5)
 
  {
 
                                                                document.getElementById('div'+n).style.top=y+'px'
 
                                                                document.getElementById('div'+n).style.left=x+'px'
 
                                                                document.getElementById('div'+n).style.visibility='visible'
 
    n++;
 
    tmr=setTimeout("beam("+n+")",spd);
 
  }
 
  else
 
  {
 
     clearTimeout(tmr);
 
     fade(4);
 
  }  
 
}
 
 
 
function fade(n)
 
{
 
  if(n>0)
 
  {
 
                                                                document.getElementById('div'+n).style.visibility='hidden'
 
    n--;
 
    tmr=setTimeout("fade("+n+")",spd);
 
  }
 
  else clearTimeout(tmr);
 
}
 
 
 
// -->
 
</SCRIPT>
 
 
 
 به آسانی با درج کدهای بالا می توانید شکل موس خود را به منظور جلب توجه و نظر کاربر در طراحی سایت تغییر نمایید.
 
 
منبع: طراحی سایت
دوشنبه 1 دی 1393  9:43 AM
تشکرات از این پست
دسترسی سریع به انجمن ها