JavaScript - смена картинок при клике на ссылку

Ребят, помогите исправить ситуацию, очень нужно.

покажите код

<div class="images">
<a style="float:left; position: absolute; margin-top: 360px; margin-left: 565px; color: #fff; font-weight: bold;" href="#" id="switch">Выключить свет</a>
<br />
<img style="margin-top: -15px;" src="<?php bloginfo("template_url"); ?>/images/2.png" />

<script type="text/javascript">

//картинка солнца
$sun = '<?php bloginfo("template_url"); ?>/images/2.png';
//каринка луны
$moon = '<?php bloginfo("template_url"); ?>/images/1.png';

$('a#switch').click(function() {
    if ($(this).html() == 'Выключить свет') {
        $('img').attr('src', $moon);
        $(this).html('Включить свет');
    }
    else{
        $('img').attr('src', $sun);
        $(this).html('Выключить свет');        
       }
    event.stopPropagation();
});​
</script>	
</div>

Вот сайт тут, там есть включить выключить свет. Он только в опере работает, и то криво, если нетрудно посмотрите. В других браузерах вообще не работает(((

$('img').attr('src', $moon);

Здесь вы все изображения меняете,

а вам нужно конкретное

1. делайте id для картинки

<img id="on_off" ....

и меняйте указанную строку на

$('#on_off').attr('src', $moon);

2. можно получить родителя ссылки (т.е div, потом в родителе нужно найти картинку, и ее уже менять

не проверял, но должно работать:

$(this).parent().find('img').attr('src', $moon);

Сделал 1 вариант как и написано

<img id="#on_off" style="margin-top: -15px;" src="<?php bloginfo("template_url"); ?>/images/2.png" />

<script type="text/javascript">



//картинка солнца

$sun = '<?php bloginfo("template_url"); ?>/images/2.png';

//каринка луны

$moon = '<?php bloginfo("template_url"); ?>/images/1.png';



$('a#switch').click(function() {

    if ($(this).html() == 'Выключить свет') {

        $('#on_off').attr('src', $moon);

        $(this).html('Включить свет');

    }

    else{

        $('').attr('src', $sun);

        $(this).html('Выключить свет');        

       }

    event.stopPropagation();

});​

</script>	

В опере по прежнему меняет все картинки, в других браузерах вообще не реагирует:( Второй день сижу, не могу понять почему так(((

Что это?

$('').attr('src', $sun);

А что должно быть?

Про оперу - обновите кеш

---------- Добавлено 06.09.2012 в 11:17 ----------

id="#on_off"

А это что??? Разве я так показывал?

Digidie, вы безнадёжны...

Это что за пурга? Что вам в 15 посте написали?

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

Вы просите помощи - сделайте за меня.

Вам показывают направление, но вы все время уходите в сторону и что-то делаете самостоятельно не придерживаясь указанного курса.

А дальше... или... или...

Неправильной дорогой идете (с)

Если бы я хотел чтобы за меня сделали, то я бы денег заплатил и не мучался:). Просто мне нужно понять как это реализовывается, так как мне возможно еще придется столкнуться с такой проблемой. просто код:

<img id="#on_off"...

не об очень многом говорит. Где я должен это прописать, нужно ли второй такое изображение вставлять, нужны ли вообще $moon и $sun. Вы видели мой код. Я попробовал сделать так как понял из вашего поста. Получается нетак понял)

Я понял так, что в переменных $moon и $sun я ничего не трогаю. Мне нужно было(как я понял) прописать id для <img id="on_off" src="<?php bloginfo("template_url"); ?>/images/2.png" />, я это сделал, затем сделать так $('#on_off').attr('src', $moon); При этом вопрос в том, нужно ли мне писать еще раз например <img id="on_on" путь и т.д. />