Разъединенные проблемы ролловера в проводнике и сафари

Question

Я получил разрозненный скрипт ролловера от Dax Assist: www. Daxassist. ком / JS / disjointedrollovers.cfm

посмотрите страницу, над которой я работаю: http://www.gherkin.co.nz/tester/

Ролловеры довольно хорошо работают в Firefox, но в Explorer большие изображения отображаются под центральным div, а в Safari они, похоже, не работают вообще.

Есть идеи?

Answer 1

При попытке отладки подобных проблем хорошим первым шагом будет проверка: http://validator.w3.org/check?verbose=1&uri=http://www.gherkin.co.nz/tester/

Существуют и другие проблемы, но в некоторых браузерах возникает проблема, связанная с повторяющимися атрибутами идентификаторов ваших изображений (идентификаторы элементов должны быть уникальными) и идентификаторами onmousover / onmouseout, на которые вы ориентируетесь.

В вашем случае функция changer2, которая вызывается при наведении на элементы, ищет изображения по id (используя document.images [id]). Firefox возвращает одно изображение, а некоторые другие браузеры (chrome, предположительно safari) возвращают массив изображений, и тогда функция не работает должным образом.

Итак, шаг первый: исправьте ваши идентификаторы и третий аргумент ваших функций changer2.

Answer 2

Похоже, ваши изображения наследуют атрибут text-align: center CSS. Либо переопределите это в своем CSS для стиля large_card1, либо удалите его вообще.

EDIT Я посмотрел на ваш HTML, и кажется, что на вашей странице есть куча элементов img, каждый из которых имеет идентификатор "holder". У вас должны быть только уникальные идентификаторы для ваших элементов.

Я бы посоветовал вам удалить все эти дублированные теги img, поскольку вы заинтересованы только в замене одного из них. Я подозреваю, что IE выгружает изображение для последнего <img id="holder"...>, которое он находит, Firefox использует первое, а Safari говорит: "Отверни это! Я слишком запутался" и ничего не обменивает.