# زبان های اسکریپتی > JavaScript و Framework های مبتنی بر آن >  onmouseover برای حرکت دادن div

## ramin149

سلام دوستان اگر میشه یکی به من کمک کنه چون من توی جاوا اسکریپت خوب نیستم و زیاد کار نکردم 
من چند تا div در صفحه دارم و می خوام وقتی کاربر روی آنها رفت 10 پیکسل به سمت بالا بره 
این کد یکی از div های من که ببینید به چه صورت در صفحه قرار دادم 

            <div style="width: 296px; height: 438px; position: absolute; top: 232px; left: 208px; " 
                ID="home">
              
            </div>

و کد زیر هم اسکریپتی که نوشتم و کار هم نمی کنه و البته با id کار می کنه و نمی خوام این شکلی باشه ؟

<script language="javascript" type="text/javascript">
    function up() {
        var mytag = document.getElementById("home");
        mytag.style.top += 10;
    }
</script>

----------


## tux-world

اینو تست کن :
<script type="text/javascript">
            $(document).ready(function()
            {
                     $('#home').hover(function() { $(this).stop().animate({ top: -20 }, 'fast'); });
        }                       
</script>

----------


## ramin149

اگر این تابع به این صورت تعریف می شه که در بالا صفحه قرار بدییم و یک div با id="home" وجود داشته باشه و با آوردن موس div به بالا حرکت کنه ، این کار انجام نمی شه

----------


## tux-world

اینو اضافه کنید اولش :
<head>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>

تست کردم جواب داد

----------


## ramin149

آیا این دستور jquery اگر هست کتابخانه ای نمی خواد ؟

----------


## tux-world

گفتم که اون خط رو به اول اسکریپت اضافه کن

----------


## ramin149

خیلی ببخشید که تو زحمت افتادید من نمی دونم کجای کار رو اشتباه انجام دادم که نمی شه اگر امکانش هست فایل که تست کردید رو در سایت قرار دهید

----------


## tux-world

بفرمایید: البته روی فایرفاکس جواب میده. ie هم که ازش متنفرم نمیدونم باید از بقیه دوستان بپرسید
<html>
  <head>
<style>
.text_tooltip
{
    width:300px;
    height:50px;
    line-height:20px;
    position:fixed;
    padding-top:10px;
    left:-295px;
    opacity:.8;
    z-index:100;
    top:150px;
    padding-right:30px;
    -moz-border-radius:7px;    
    color:#FFF;
    direction:rtl;
    text-align:right;
      text-shadow: 0px 1px 2px #000;
    -moz-box-shadow: inset 0 0 15px rgba(4, 0, 0, 0.9);
    -moz-box-shadow:-0.2em 0.3em 1em rgba(4, 0, 0, 0.9);    
    background: -moz-linear-gradient(283px  0%  0deg , #005B02, #FF1000 0%);
}
</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript"> 
                $(document).ready(function()
            {
                     $('.text_tooltip')
                      .hover(function() {
                       $(this).stop().animate({ left: -20 }, 'fast');
                      }, function() {
                       $(this).stop().animate({ left: -295 }, 'fast');
                      });
            });
                        
</script>
  </head>
  <body>
<div class="text_tooltip" id="text_tooltip" >سلام</div>
</body>
</html>

----------


## ramin149

من کد بالا رو به صورت جاوا اسکریپت نوشتم ولی جواب نمی ده کجای کد من اشتباه 

    function ondiv(sender) {
        var w = sender.style.top;
        w = w + '10';
        sender.style.top = w;
   }

----------


## tux-world

چرا غذا رو از پشت سرتون میارید جلو می خورید :دی 
کد آماده دادم خدمتتون استفاده کنید هر جاش لازمه تغییر بدید

----------


## ramin149

ببخشید که خیلی مزاحمتون شدم و اسرار داشتم که از جاوا اسکریپت استفاده کنم . ممنون از کدتون

----------


## tux-world

خواهش میکنم شما ببخشید. ج کیوئری سمپل های فروانی داره که خیلی کارا میشه باهاش کرد. برای همین بهتره یه خورده سمتش برید. شرمنده که تند حرف زدم.ببخشید :خجالت:

----------


## ramin149

دوست عزیز می دونم ج کیوئری زبان باحالیه چند بار هم امدم یاد بگیرم ولی متاسفانه نتونستم از کجا شروع کنم و مشکل زمان هم داشتم ولی با کد شما حداقل یک برنامه رو بلد شدم خیلی ممنون

----------

