Как поместить много ролловеров изображений на одной странице? без JS - PullRequest
Новая
       36

Как поместить много ролловеров изображений на одной странице? без JS

0 голосов
/ 12 марта 2012

Это мой первый пост в качестве члена stackoverflow.

Привет, мой вопрос: как мне сделать много изображений, которые меняются, когда вы наводите на них курсор мыши?У меня есть веб-сайт для небольшого приложения, которое я сделал, и у меня есть страница с изображениями для загрузки для каждой версии, и эти изображения являются целью.Я пробовал два способа сделать их ролловером, и каждый из них работает нормально, пока я не поместил изображения на одной странице.Тогда они не работают.

1-й способ 

<a href='Destination URL' target="_top" onmouseover="document.sub_but.src='onrollimage'"onmouseout="document.sub_but.src='image'"><img src="image" width="281" height="55" name="sub_but"></a>

2-й способ 

<a href="Destination URL"  onmouseover= "if (document.images) document.bn_off.src= 'onrollimage';" onmouseout= "if (document.images) document.bn_off.src= 'image';"><img src="image" name="bn_off"></a>

, если я использую один и тот же метод дважды, это не сработает, но еслиЯ поставил первое изображение в одну сторону, а второе - в другую.Я мог бы оставить это так, но в функцию я хочу добавить больше.Пожалуйста, покажите мне, как я могу разместить несколько ролловеров изображений на одной и той же странице.

Проверьте конкретную страницу на http://www.torrentcleaner.tk/download.html Также, если вы хотите проверить это http://www.torrentcleaner.tk/dimg/

1 Ответ

1 голос
/ 12 марта 2012

Прямой ответ - изменить код на 

onmouseover= "this.children[0].src= 'onrollimage';"

и 

onmouseout= "this.children[0].src= 'image';"

Правильный способ будет использовать CSS .. 

a.downloadButton{
    display:inline-block;
    height:55px;
    width:281px;
    background:url('path/to/image') top left no-repeat;

    text-indent:-9999px;
    overflow:hidden;
}

a.downloadButton:hover{
    background-image:url('path/to/onrollimage');
}

и измените ссылки на 

<a href="Destination URL" class="downloadButton">download</a>
...