Javascript не работает IE 8 на Windows

Question

У меня есть 4 изображения, которые я использую в качестве навигационного меню, когда я нажимаю на одно, оно загорается (меняет изображение), и текущее изображение гаснет, и так далее.

Хорошо работает в chrome и ff (без ошибок firebug)

Но в IE8 функционирование кликов (где оно меняет представление о div) работает, просто не меняет img src, вот код:

<li id="bulletli1">
<a href="#"> 
    <img id="bullethover1" src="img/bulleto.png" height="30px" width="30px" style="position:absolute">
<img id="bullet1" name="bullet1" height="30px" width="30px" src="img/bulletwhite.png" onmousedown="this.src='img/bulletwhite.png';document.images['bullet2'].src='img/bullet.png';document.images['bullet3'].src='img/bullet.png';document.images['bullet4'].src='img/bullet.png'" style="opacity:0.4;filter:alpha(opacity=40)"/> 
    </a></li> 

Так что, в основном, то, что происходит, находится внутри одного объекта this.src настроен на белую пулю, а все остальные настроены на точку темной пули. В инструментах разработчика нет ошибок.

this.src не работает в IE8? Любой совет поможет, спасибо!

Answer 1

Я не могу воспроизвести описанное поведение.Изображения, кажется, заменены хорошо.Какие еще детали вы можете предоставить?Что происходит, когда вы нажимаете на другие 3 изображения?Получают ли они прямые URL своих изображений?

Answer 2

проверьте, если не существует более одного изображения с таким же именем / id-атрибутом.

В этом случае IE получит последнее изображений с тем же именем (обратите внимание, что document.images ['somename'] может быть массивом), в то время как другие агенты UserAgent получат первый один. Возможно, в этом случае вы не увидите изменения, например, если измененное изображение находится вне области просмотра.

приветствует

Answer 3

Вы не должны встраивать свой JS в свой код, как это. Хотя я советую использовать такую ​​библиотеку, как jQuery (которая облегчит вашу жизнь), я объясню без нее.

Не вставляйте свой JS в код. Если вам действительно нужно, пусть она вызовет такую ​​функцию:

<img id="bullet1" name="bullet1" height="30px" width="30px" src="img/bulletwhite.png" onmousedown="bulletClicked()" style="opacity:0.4;filter:alpha(opacity=40)"/>

Затем в разделе заголовка между тегами скрипта вы запустите свой javascript:

function bulletClicked() {
   this.src='img/bulletwhite.png';
   document.images['bullet2'].src='img/bullet.png';
   document.images['bullet3'].src='img/bullet.png';
   document.images['bullet4'].src='img/bullet.png';
}

Судя по тому, что вы делаете это неправильно, вы, вероятно, помещаете этот код onclikc в каждое изображение маркера, слегка измененное для каждого. Вместо этого, если бы вы просто использовали события, вы бы сильно упростили.

Если вы сделали что-то подобное ... (и указали свой рост, ширину и другие CSS в разделе стилей, где они принадлежат, не делайте то, что вы делали, когда-либо снова).

<img id="bullet1" name="bullet1" src="img/bulletwhite.png" onmousedown="bulletClicked(this)"/>

Тогда ваш javascript может быть ...

function bulletClicked(e) {
   document.images['bullet1'].src='img/bullet.png';
   document.images['bullet2'].src='img/bullet.png';
   document.images['bullet3'].src='img/bullet.png';
   document.images['bullet4'].src='img/bullet.png';
   e.src='img/bulletwhite.png';
}

Есть гораздо лучшие способы решения этой проблемы, и я настоятельно рекомендую вам взять jQuery и поработать с разделением ваших HTML, JavaScript и CSS компонентов на ваших страницах.