Логин:

Пароль:

Форумы
Общие вопросы
Document Object Model
Обсуждаем конференцию
Web Usability (test)

Общие вопросы

универсальный image-rollover

> Leechy!
> Вы не могли бы написать коротенькое руководство по созданию САБЖа. Чтобы везде работал.

Я не Leechy, так что можете и не слушать, что я тут болтаю ;). Тем не менее, такой скрипт можно сделать по-разному. Все зависит от того, сколько изображений надо менять и во многих ли местах.

Ситуация 1. Менять надо какой-нибудь bullet в меню, картинка маленькая и предварительно загружать ее не нужно, да и пунктов в меню немного. Пишем просто:

<html>
<head><title>Simple Rollover</title></head>
<body>
<a href="one.html"
.onmouseover="document.images?b1.src='two.gif':''"
.onmouseout="document.images?b1.src='one.gif':''">
<img name=b1 src=one.gif border=0 alt="*"> Menu</a><br>
<a href="two.html"
.onmouseover="document.images?b2.src='two.gif':''"
.onmouseout="document.images?b2.src='one.gif':''">
<img name=b2 src=one.gif border=0 alt="*"> Menu</a>
</body>
</html>

Ситуация 2. То же самое, но хотелось бы предварительно загрузить картинки. Делаем простейший preload:

<html>
<head>
<title>Simple Rollover</title>
<script>
<!--
d = document
// preload
if(document.images){
.one = new Image(); one.src = 'one.gif'
.two = new Image(); two.src = 'two.gif'
}
//-->
</script>
</head>
<body>
<a href="one.html"
.onmouseover="d.images?b1.src=two.src:''"
.onmouseout="d.images?b1.src=one.src:''">
<img name=b1 src=one.gif border=0 alt="*"> One</a><br>
<a href="two.html"
.onmouseover="d.images?b2.src=two.src:''"
.onmouseout="d.images?b2.src=one.src:''">
<img name=b2 src=one.gif border=0 alt="*"> Two</a>
</body>
</html>

Ситуация 3. Картинок до черта, мест куда их надо вставить еще больше. Вариантов тут может быть миллион, но вот один из них:

<html>
<head>
<title>Rollover</title>
<script>
<!--
d = document
imagesNum = 2
if (d.images) {
.ovrImages = []; outImages = []
.for (i=1;i<=imagesNum;i++) {
..ovrImages[i] = new Image()
..ovrImages[i].src = 'ovr' + i + '.gif'
..outImages[i] = new Image()
..outImages[i].src = 'out' + i + '.gif'
.}
}
function roll(i, isOver) {
.if (d.images) {
..d.images['b' + i].src = isOver ? ovrImages[i].src : outImages[i].src
.}
}
//-->
</script>
</head>
<body>
<a href="one.html"
.onmouseover="roll(1,1)"
.onmouseout="roll(1)"><img name=b1 src=out1.gif border=0 alt="*"> One</a><br>
<a href="two.html"
.onmouseover="roll(2,1)"
.onmouseout="roll(2)"><img name=b2 src=out2.gif border=0 alt="*"> Two</a><br>
...
</body>
</html>

Надо только обозвать все картинки соответствующими именами: out1.gif, out2.gif, ovr1.gif, ovr2.gif и т.д...


Все эти скрипты должны работать везде, где есть document.images (начиная с NN3 и IE4), ну а там где их нету (очень тяжело вообще-то найти человека настолько консервативного ;) - ошибок все равно быть не должно

> Прошелся по сети - везде юзают ДримВиверский скрипт - так он не читаемый..... неоправдано, на мой взгляд.

Ага, куда не глянь - везде эти MMPreloadImages или как их там...
СообщениеАвторДата
универсальный image-rollover
Indeyets16.04.2001 21:26
универсальный image-rollover
Mipa17.04.2001 21:26
Спасибо. А теперь более сложная ситуация... :-)
Indeyets18.04.2001 09:04
Всё просто! ;-)
Konstantin A. M.18.04.2001 10:20