• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
مشکل با رویدادهای موس
#1
سلام
من یه تگ a دارم که توش یه نوشته هست با یه آیکن
میخوام وقتی میرم روی تگ تصویر عوض بشه و از سیاه و سفید بشه رنگی، این تابع جاوااسکریپت رو دارم براش:

کد:
function changeIcon(ID, Icon, Text)
{
    document.getElementById(ID).innerHTML=Text+" <img src=\""+Icon+"\" /> "
}

خود تگ a هم مثلاً یه همچین چیزی هست:

کد:
<div>
        <a href="#" id="save"   onmouseover="changeIcon('save','gtk-save.png','sample ')"
                                onmouseout="changeIcon('save','gtk-save-gray.png','sample ')">
        sample
        <img  src="gtk-save-gray.png" />
        </a>
</div>

مشکل اینجاست که وقتی میرم رو نوشته تصویر عوض میشه و رنگی میشه و وقتی موس رو از رو نوشته بر میدارم هم تصویر سیاه و سفید میشه، اما وقتی میرم رو تصویر، تصویر رنگی میشه و وقتی هم از رو تصویر میرم تصویر رنگی میمونه!

کلاً innerHtml من روی تگ a داره عمل میکنه، پس نباید بین img و text داخلش فرق بزاره، یعنی مشکل از چیه؟


.zip   sample.zip (اندازه 2.47 KB / تعداد دانلود: 9)
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
تشکر شده توسط :
#2
اخه وقتی jquery خلق شده چرا خودتو اذیت میکنی !!؟
  پاسخ
تشکر شده توسط : zoghal undefined hamid_80386
#3
اگه متن داخل لینک ثابته دیگه تغییرش نده، و می تونی به عکسه یه ID بدی و وقتی روی لینک رفتی از طریق ID ایش src‌ عکس رو تغییر بده

مثلا اینطوری:
کد:
...
<script language="javascript" type="text/javascript">
    window.addEventListener("load", function(){
        var saveIconID = document.getElementById("saveIcon"),
            aLink = document.getElementById("save");
            
        aLink.addEventListener("mouseover", function(){
        
            changeIcon('gtk-save.png');
        }, false);
        
        aLink.addEventListener("mouseout", function(){
        
            changeIcon('gtk-save-gray.png');
        }, false);
          
        function changeIcon(Icon)
        {
            var img = document.getElementById("saveIcon");
                  
            img.src = Icon;
        }
    }, false);

        
</script>

...

        <a href="#" id="save">sample <img id="saveIcon" src="gtk-save-gray.png" /></a>

...

اون ... نقطه ها هم تگ های دیگه که تو فایل ضمیمه تون بود هست Smile
  پاسخ
تشکر شده توسط : hamid_80386
#4
نقل قول:اخه وقتی jquery خلق شده چرا خودتو اذیت میکنی !!؟
حمید واقعیت اینه که جی کوئریم زیر خط فقره، فقط میتونم استفاده کنم، البته یه ذره بلد بودم، ولی به مرور زمان یادم رفت!!!


حسین جان ممنون، خیلی عالی کار کرد، منتهی الان برام سوال شد که چرا وقتی کد جاوا اسکریپت رو بصورت تفکیکی ننوشته بودیم جواب نمیداد؟

بعدم من چون چند تا آیکن دارم نمیخوام این چندین خط جاوا رو هی تکرار کنم، کد شما رو اینطوری تغییر دادم، ولی کار نکرد، البته پر واضحه که کد اشتباه هست، ولی روش صحیحش چیه؟

کد:
<script language="javascript" type="text/javascript">
    window.addEventListener("load", function(){
        var saveIconID = document.getElementById("saveIcon"),
            aLink1 = document.getElementById("save");
            ChangeI("gtk-save.png","gtk-save-gray.png","saveIcon",aLink1);

            aLink1 = document.getElementById("paste");
            ChangeI("gtk-paste.png","gtk-paste-gray.png","pasteIcon",aLink1);

        function ChangeI(iconOn,IconOff,IconID,aLink)
        {
                aLink.addEventListener("mouseover", function(){
                
                    changeIcon(IconOn);
                }, false);
                
                aLink.addEventListener("mouseout", function(){
                
                    changeIcon(IconOff);
                }, false);
                  
                function changeIcon(Icon)
                {
                    var img = document.getElementById(IconID);
                          
                    img.src = Icon;
                }
        
        } // end ChangeI
            

     }, false);  
    
    
</script>

.
.
.
<div>
        <a href="#" id="save" >
        save
        <img id="saveIcon" src="gtk-save-gray.png" />
        </a>
        
        <a href="#" id="paste" >
        open
        <img id="pasteIcon" src="gtk-paste-gray.png" />
        </a>
        
</div>
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
تشکر شده توسط :
#5
کدهای جاوااسکریپت رو اینجوری تغییر بده:

کد:
<script language="javascript" type="text/javascript">
    window.addEventListener("load", function(){
        var saveIconID = document.getElementById("saveIcon"),
            aLink1 = document.getElementById("save");
            ChangeI("gtk-save.png","gtk-save-gray.png","saveIcon",aLink1);

            aLink2 = document.getElementById("paste");
            ChangeI("gtk-paste.png","gtk-paste-gray.png","pasteIcon",aLink2);

        function ChangeI(IconOn,IconOff,IconID,aLink)
        {
                aLink.addEventListener("mouseover", function(){
                
                    changeIcon(IconOn, IconID);
                }, false);
                
                aLink.addEventListener("mouseout", function(){
                
                    changeIcon(IconOff, IconID);
                }, false);
                  
                function changeIcon(Icon, IconID)
                {
                    var img = document.getElementById(IconID);
                    img.src = Icon;
                }
        
        } // end ChangeI
            

     }, false);  
    
    
</script>

از این کنسول کروم و اینا هم واسه دیباگ استفاده کنی، خیلی به کارت سرعت می ده
  پاسخ
تشکر شده توسط : hamid_80386
#6
کار نکرد حسین جان، فکر کنم این شیوه نوشتن اون فانکشن ChangeI اون وسط مشکل داره، ولی چیکارش کنم نمیدونم! Sad

وقتی فانکشن رو تو sharePoint انتخاب میکنم که select ش کنه مثل عکس زیر select میکنه، یعنی کامل نمیشناسه:

   
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان