Javascript: функция onmouseover - PullRequest
Новая
       10

Javascript: функция onmouseover

0 голосов
/ 01 декабря 2011

У меня проблема с изменением атрибутов onmouseover и onmouseout на динамических изображениях.То, как я хочу, чтобы это работало, всегда, когда я помещаю свою мышь на изображения, изображения должны измениться, и когда я убираю мою мышь, это должно быть изменено к исходному изображению.и всякий раз, когда я выбираю любое изображение, это изображение должно быть изменено на изображение, которое отображалось при перемещении мыши по изображению.и когда я выбираю любое другое изображение, должен происходить тот же процесс, но предыдущее изображение, которое было изменено, должно быть заменено на исходное изображение.

Я выполнил все вышеперечисленное, но моя проблема заключается в том, когда я выбираю несколькоизображения и наведите курсор мыши на ранее выбранные изображения, эти изображения не изменяются (атрибут onmouseover больше не работает с ними). ​​

<script language="javascript">
    function changeleft(loca){
        var od=''
        var imgs = document.getElementById("leftsec").getElementsByTagName("img"); 
        for (var i = 0, l = imgs.length; i < l; i++) {  
            od=imgs[i].id;

            if(od==loca){
                imgs[i].src="images/"+od+"_over.gif";
                imgs[i].onmouseover="";
                imgs[i].onmouseout="";
            }else{
                od = imgs[i].id;
                imgs[i].src="images/"+od+".gif";
                this.onmouseover = function (){this.src="images/"+od+"_over.gif";};
                    this.onmouseout = function (){this.src="images/"+od+".gif";};
            }

        }
    }
</script>

<div class="leftsec" id="leftsec" >
    <img id='wits' class="wits1"  src="images/wits.gif" onmouseover="this.src='images/wits_over.gif'" onmouseout="this.src='images/wits.gif'" onclick="changeleft(this.id)" /><br />

    <img id='city' class="city1" src="images/city.gif" onmouseover="this.src='images/city_over.gif'" onmouseout="this.src='images/city.gif'" onclick="changeleft(this.id)" /><br />

    <img id='organise' class="city1" src="images/organise.gif" onmouseover="this.src='images/organise_over.gif'" onmouseout="this.src='images/organise.gif'" onclick="changeleft(this.id)" /><br />

    <img id='people' class="city1" src="images/people.gif" onmouseover="this.src='images/people_over.gif'" onmouseout="this.src='images/people.gif'" onclick="changeleft(this.id)" /><br />
</div>

1 Ответ

1 голос
/ 01 декабря 2011

Я бы рекомендовал использовать библиотеку Ajax (jQuery, YUI, dojo, ExtJS, ...). В jQuery я бы сделал что-то вроде:

Редактировать: Расширенный пример с возможностью .click(). 

var ignoreAttrName = 'data-ignore';

var imgTags = jQuery('#leftsec img'); // Select all img tags from the div with id 'leftsec'

jQuery(imgTags)
.attr(ignoreAttrName , 'false') // Supplying an ignore attribute to the img tag
.on('click', function () {
    jQuery(imgTags).attr(ignoreAttrName, 'false'); // Resetting the data tag
    jQuery(this).attr(ignoreAttrName, 'true'); // only the current will be ignored
    // Do whatever you want on click ...
})
.on('mouseover', function () {
    // This will be called with the img dom node as the context
    var me = jQuery(this);

    if (me.attr(ignoreAttrName) === 'false') {

        me.attr('src', me.attr('id') + '.gif');
    }
})
.on('mouseout', function () {
    // This will be called when leaving the img node
    var me = jQuery(this);

    if (me.attr(ignoreAttrName) === 'false') {
        me.attr('src', me.attr('id') + '-over.gif');
    }
});

Думаю, с библиотекой она чище и масштабируемее, и вероятность того, что она будет работать в других браузерах, также увеличится:

Надеюсь, это поможет вам!

...