Информационная лента
Чат


Загрузка данных...

Необходимо авторизоваться!

Свежие обсуждения


Загрузка данных...

Топ активов

  • 1 · Посты: 4944 · Репутация: 187
  • 2 · Посты: 3193 · Репутация: 333
  • 3 · Посты: 2321 · Репутация: 1319
  • 4 · Посты: 1613 · Репутация: 373
  • 5 · Посты: 1038 · Репутация: 42

Форум
Страница 1 из 11
Форум » WEB » JS » Смена изображения при клике
Смена изображения при клике
Оффлайн
WolFoX · Написал: 3 сообщения · Репутация: 0 · Группа: «Starter»
В общем, нашла два "живых" скрипта. Пытаюсь настроить, чтобы при onclick менялся аватар пользователя.
Итак, первый вариант.

В шаблон страница между head и /head

<!-- Переключение автаров -->
<script type="text/javascript">
function setBigImage(foto) {
document.getElementById("bigimg").src = foto.src;
}
</script>
<!-- / Переключение автаров -->

В шаблон Вид материалов

<img alt="Аватар" title="$USERNAME$" id = "bigimg" class="userAvatar" border="0" src="$AVATAR_URL$" width="245" height="320"></a>

<img src = '/Avatar/Alexander_Lee/Alexander_Lee.png' width = '25' onclick = 'setBigImage(this)' alt = 'Изображение 1' />
<img src = '$AVATAR_URL$' width = '25' onclick = 'setBigImage(this)' alt = 'Изображение 2' />

Появляются два милых окошечка под аватаром
<img src="http://foxy-world.ucoz.ru/1.jpg" border="0" alt="" />
Аватар они переключают, все в порядке. НО ... они переключают аватар только для пользователя, являющегося автором темы. Для других пользователей скрипт не срабатывает. В чем может быть причина?

И второй вариант:
<img src="$AVATAR_URL$" onclick="this.setAttribute('src','/Avatar/Alexander_Lee/Alexander_Lee.png')" />
Гораздно проще, но он переключает изображения только "в одну сторону" =( мне нужно, чтобы с аватара переключался на второе изображение, а при повторном клике обратно...и так до бесконечности, при каждом клике аватар менялся. Это можно реализовать?
20.07.2013, в 11:20 | # 1 · | Понравилось: 0

Оффлайн
HeadMad · Написал: 46 сообщений · Репутация: 51 · Группа: «Проверенный»
А для чего вообще нужна смена аватара? Не совсем понимаю...
20.07.2013, в 11:25 | # 2 · | Понравилось: 0

Оффлайн
WolFoX · Написал: 3 сообщения · Репутация: 0 · Группа: «Starter»
У нас ФРПГ =) есть тип персонажа, который имеет два облика. Нужно дать возможность пользователяям посомтреть, как персонаж выглядить и в том и в другом. При назначении аватара, будет виден только один облик, поэтому хочу предусмотреть при onclick показ второй картинки, которая будет задаваться ссылкой, либо условным оператором Козы)
20.07.2013, в 11:32 | # 3 · | Понравилось: 0

Оффлайн
HeadMad · Написал: 46 сообщений · Репутация: 51 · Группа: «Проверенный»
Можно так:
Аватары следующего вида
Код
<img src="/ava/my-ava.png" data-url="/ava/second-ava.png" class="avatar">

атрибут data-url содержит ссылку на второй аватар.

и собственно js:
Код
<script>
$('.avatar').live('click', function(){
var dataUrl = $(this).attr('data-url');
var srcUrl = $(this).attr('src');
$(this).attr('src', dataUrl);
$(this).attr('data-url', srcUrl);
})
</script>
20.07.2013, в 12:57 | # 4 · | Понравилось: 0

Оффлайн
WolFoX · Написал: 3 сообщения · Репутация: 0 · Группа: «Starter»
HeadMad, благодарю Вас, работает =)
А по первому варианту можете предположить причину? Что заменяется изображение только для первого пользователя темы, а для остальных не работает?
20.07.2013, в 16:40 | # 5 · | Понравилось: 0

Оффлайн
HeadMad · Написал: 46 сообщений · Репутация: 51 · Группа: «Проверенный»
Я не особо силен в программировании. Но думаю, проблема в том что вы обращаетесь к элементу по его ID. А с одинаковым ID на странице не может быть больше одного элемента (в этом собственно и отличие от классов). Поэтому скрипт обращается к первому совпавшему элемент набора. То есть, картинка, что по коду стоит выше.
20.07.2013, в 17:41 | # 6 · | Понравилось: 0

Форум » WEB » JS » Смена изображения при клике
Страница 1 из 11
Поиск:
uJS.su - сайт, посвященный уникальным разработкам для системы uCoz. У нас Вы найдете десятки готовых интересных уникальных решений для Вашего сайта, а также сможете оставить свою идею, которую мы постараемся реализовать.