| |
|
|
| | Добрый день!
У меня следующая проблема.
Есть ссылка в виде кнопки. Есть 3 картинки. При наведении мышки на кнопку на кнопке должна отображаться 1я из картинок. При следующем наведении - 2я. При еще одном наведении - 3я. Потом - снова 1я, потом - 2я, потом - 3я, опять1я... и т.д. по кругу. Все должно происходить без обновления страницы. Картинки должны сменяться по порядку при каждом наведении на кнопку. Если понятно объяснил, пожалуйста, помогите со скриптом! | |
| |
|
|
| |
|
|
| |
для: igorilla
(05.11.2009 в 08:22)
| | | ЕСЛИ:
1. Все три картинки будут иметь одинаковые размеры по высоте и ширине. Например, 23 х 45 пикселей.
2. Картинки будут иметь типовые имена, включающие номер от 0 до 2. Например: image0.gif, image1.gif, image2.gif.
3. Все три картинки будут находиться в одной папке на сервере.
4. Первая картинка будет на кнопке сразу, в HTML-коде.
То ТОГДА скрипт таков:
<input type="image" height="23" width="45" src="image0.gif"
onmouseover="with(this){z=src.charAt(src.length-5)*1; z=(z!=2)?(z+1):0;src=src.replace(/\d(?=\.gif$)/,z)}">
|
Чтобы смена картинок происходила без задержки, надо реализовать "HTML-прелоадер", т.е. сразу после тега <body> прописать в "невидимом" исполнении все картинки, кроме первой (коя изначально находится на кнопке):
<span style="display: none"><img src="image1.gif"><img src="image2.gif"></span>
|
---
Скрипт можно использовать для максимум 10-ти картинок (с номерами от 0 до 9) - в соответствии с последним номером нужно будет изменить число в условии (z!=2)
Можно использовать картинки иного формата (jpg или png) при соответствующей замене .gif в JS-коде на нужное расширение. | |
| |
|
|
| |
|
|
| |
для: АЯ
(05.11.2009 в 08:48)
| | | Спасибо большое, получилось, но не совсем то, что хотел. Сейчас по другому опишу то, что требуется достичь: есть кнопка, когда неактивная - это gif0. Навели на нее мышку - кнопка стала gif1. Убрали мышку - gif0. Без перезагрузки страницы опять навели мышку на кнопку - gif2. Убрали - gif0. Еще раз навели - gif3. Убрали - gif0. Опять навели - gif1. И так далее по кругу.
Используя Ваш код, получаю смену картинок, но без возврата к исходной картинке, когда мышку увожу с кнопки.
Если добавляю
onmouseout="src='gif0.gif';"
картинки перестают сменяться
Если подскажете, буду очень благодарен! | |
| |
|
|
| |
|
|
| |
для: igorilla
(05.11.2009 в 08:22)
| | | В этом случае, видимо, лучше иметь одну картинку-спрайт как фоновое изображение элемента, и при наведении мыши изменять ее положение. | |
| |
|
|
| |
|
|
| |
для: sim5
(05.11.2009 в 09:57)
| | | >"В этом случае, видимо, лучше..."
Нет, не лучше. | |
| |
|
|
| |
|
|
| |
для: АЯ
(05.11.2009 в 10:44)
| | | Как сказать.... | |
| |
|
|
| |
|
|
| |
для: sim5
(05.11.2009 в 10:56)
| | | >"Как сказать..."
Эффект будет тот же, но код будет байтов на 60-80 побольше.
Это не есть - "лучше", как ни говори. | |
| |
|
|
| |
|
|
| |
для: АЯ
(05.11.2009 в 12:06)
| | | Почему это больше? :) Это смотря как прикрутить... Кстати, уж лучше использовать атрибут lang в примере вашем - не будет видно этих нулей и единиц. ;-) | |
| |
|
|
| |
|
|
| |
для: sim5
(05.11.2009 в 12:15)
| | | >"Это смотря как прикрутить..."
Как ни крути, в строке src= много меньше символов, чем в строке style.backgroundPositionY=
>"уж лучше использовать"
Уж как вы любите вы это слово - "лучше". Рекламным агентом работаете? :-)
Нули и единицы при реальной работе (при нормальной загрузке изображений) видны не будут. Ибо атрибут ALT - это АЛЬТернатива, когда загрузка картинки не удалась.
А вот при проверке работы скрипта (без картинок) - самое то. | |
| |
|
|
| |
|
|
| |
для: АЯ
(05.11.2009 в 12:57)
| | | IE в любом случае отобразит ALT. | |
| |
|
|
| |
|
|
| |
для: sim5
(05.11.2009 в 09:57)
| | | Тогда так:
<input type="image" height="23" width="45" src="image0.gif" alt="0"
onmouseover="with(this){var z=alt*1; z=(z!=2)?(z+1):0; src=src.replace(/\d(?=\.gif$)/,z); alt=z}"
onmouseout="this.src = 'image0.gif'">
|
PS. Все условия и примечания к предыдущему варианту скрипта имеют ту же силу. | |
| |
|
|
| |
|
|
| |
для: АЯ
(05.11.2009 в 10:48)
| | | Уже почти то, что надо! Проблема только в том, что после цикла "навели на кнопку мышку - кнопка стала gif1. Убрали мышку - gif0. Опять навели мышку на кнопку - gif2. Убрали - gif0. Еще раз навели - gif3. Убрали - gif0" при следующем наведении получаем gif0, убираем gif0. Т.е. gif0 стал 4ым элементом в списке картинок для отображения активного состояния кнопки, а их должно быть 3. gif0 участвует только при отображении неактивного состояния.
И снова надеюсь на Ваше великодушие и помощь! | |
| |
|
|
| |
|
|
| |
для: АЯ
(05.11.2009 в 10:48)
| | | Сначала не помогло, но пораскинул мозгами, в выражении
z=(z!=2)?(z+1):0;
0 заменил на 1
и, о чудо! получил то, что хотел :)
Спасибо огромное! | |
| |
|
|
