HTML+CSS+JavaScript

Не могу понять почему не работает. Согласно тому что я нашёл в Интернете, - должно работать. Где я ошибся?

<script type="text/javascript"> image1=new Image(); image1.src="http://***/image/bet_black.png"; image2=new Image(); image2.src="http://***/image/bet_rgb.png"; </script> <b><a href="http://***.ru/?page_id=48" onMouseOver="document.images[pic1].src=image2.src" onMouseOut="document.images[pic1].src=image1.src" ><img src="image1.src" BORDER=0 NAME="pic1">Ссылка</a></b>

ну это лучше делать другим способом:
сощдать 2 картинки: одну прозрачный гиф, воторай - те 2 ваши файла слитые в один (одну картинку под другую).

и потом такой код:

<style> a img {background: url(img.gif) 0 0 no-repeat;} a:hover img {background: url(img.gif) 0 100% no-repeat;} </style> <a href="http://***.ru/?page_id=48"><img src="d-t.gif" width="100" height="100" alt="" border="0" />Ссылка</a>

Но у меня таких ссылок 24! Как тогда это будет выглядеть например при 2-х ссылках.
И что прозрачно, d-t.gif или img.gif

И всё же, почему мой пример не работает? Где ошибка?

ошибка в матчасти. вместо индекса images[pict1] надо ставить циферку, каким по счёту являестя тот или иной рисунок, например images[0].

но в таком случае прибегать к скриптам это глупость. чтобы лучше понять как сделать меню, разберите пример с работой верхнего меню сайта www.apple.com

document.images[pic1].src=image2.src

изображению с именем pic1 присвоить image2.src (как то так)
не понимаю причём тут images[0], - у меня есть и другие изображения на странице.

Помогите исправить мой пример, чтобы работал как должен.

блин, мужик, учи матчасть.

document.images[] - это массив ссылок на изображения, которые есть на странице, а в массиве, как известно, индексы идут от 0 и до последнего элеимента: 0, 1, 2, ..., n.

то, что пытаешься прикрутить ты, это глупость, потому как вместо порядкового номера элемента в массиве document.images[], ты ставишь имя этого элемента. Т. е. вместо, например document.images[0], ты пишешь document.images['pic1']. понятна ошибка?

дальше.
делать скриптом, то что можно сделать стилями цсс - это ещё большая ошибка.

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

ЗЫ. пофиг, что у тебя много рисунков - пропиши для кажного отдельный стиль.

Вот это добавил в стиль:

a1 img {background: url(http://***/image/bet_black.png) 0 0 no-repeat;}  a1:hover img {background: url(http://***/image/bet_rgb.png) 0 100% no-repeat;}

zero.png - прозрачная картинка

вот такая получилась ссылка:

<a class="a1" href="http://***/?page_id=48"><img src="http://***/image/zero.png" width="64" height="40" alt="" border="0" />Бет</a>

Но никаких изображений нет! Текст конечно сдвинулся на ширину картинки, и всё ничего не видно что наводи, что отводи. Может что-то не так в стиле? Что означает в "a1:hover" значение 100%?

Мущина, ты шутки тут шутишь, чтоле? :)

ты как стили написал? для того чтоб написать стили для элемента надо писать так:

a {...}

для элемента с классом надо писать с точкой:

.class_name {...} .class_name:hover {...} или a.class_name {...} a.class_name:hover {...}

для элемента с id надо писать через диез:

#elem_id {...} #elem_id:hover {...} или a#elem_id {...} a#elem_id:hover {...}

напиши свои стили в соответсвиями с правилами цсс (судя по уровню познаний, тебе необходимо ознакомится с учебником по цсс)


Что означает в "a1:hover" значение 100%?
читай о свойстве background и подробнее о процентах в нём.

ЗЫ. я тебе о процентах говорил для случая если слепить 2 картинки (одну обычную, вторую для наведения) в одну.

Lelik, спасибо за ваше терпение. Про классы вы объяснили всё доходчиво, - теперь всё работает.
Огромное спасибо.

Lelik, но это же не предзагрузка. Сейчас добавляю изображения, и когда навожу курсор на новую ссылку с картинкой появляется у курсора вращающий кружок, т.е. идёт загрузка изображения.
А как чтобы сразу было загружено?

для этого надо лепить 2 картинки в одну.

т. е. при загрузке старицы она загружается, а потому уже изменением background-position ты показуешь необходимый участок фона.

пример:
2 картинки 20 на 20 собираем в фотошопе в одну картинку 20 пх шириной и 40 пх высотой.

далее в рисунок 20 на 20 стиваим эту картинку фоном. а при наведении мышки на ссылку пишем стиль картинки, что бы показывать фон не сверху, а снизу.

ещё раз рекомендую изучить пример верхнего меню на сайте apple.com. скачай файр баг для мозиллы ФФ и с помощью его посмотри какие стили, какие фоновые картини, и что да как :)

Я только не понял, почему там background-position: -515px (кстати и в Опера 11 тоже можно происпектировать).

<li id="gn-ipad"> <a href="/ipad/">iPad</a> </li> #globalheader #globalnav li#gn-ipad a {  background-position: -515px 0px; }

У меня получится сдвоенная картинка шириной 64 и высотой 80, т.е. одна картинка 64 на 40 пикселей. Подскажите пожалуйста как мне записать стиль.

вот мой рабочий вариант

a.show1 img {background: url(http://***/image/bet_black.png) 0 0 no-repeat;}  a.show1:hover img {background: url(http://***/image/bet_rgb.png) 0 0 no-repeat;} <a class="show1" title="***" href="http://***/?page_id=217"><img src="http://***/image/zero.png" width="64" height="40" alt="" border="0" />Текст</a>

почитай по ссылкам выше, я их не просто так сюда прикручивал

a.show1:hover img {background: url(http://***/image/bet_rgb.png) 0 100% no-repeat;}

только вместо bet_rgb.png напиши имя нового файла и везде где надо

Сюда зайди:тут доходчиво описано,как без всякой предзагрузки... http://htmlbook.ru/faq/kak-sdelat-chtoby-kartinka-menyalas-pri-navedenii-na-nee