Смена картинок при нажатии на ссылку

[Digidie]

Доброго времени! Нужно сделать небольшой скриптик по смене картинок при нажатии на ссылку. Что то типа "выключить свет", нажал на ссылку картинка светлая(включить свет), нажал еще раз, картинка стала опять темной(выключить свет). Подскажите пожалуйста как это сделать? Заранее спасибо!

[s0rr0w]

Доброго времени! Нужно сделать небольшой скриптик по смене картинок при нажатии на ссылку. Что то типа "выключить свет", нажал на ссылку картинка светлая(включить свет), нажал еще раз, картинка стала опять темной(выключить свет). Подскажите пожалуйста как это сделать? Заранее спасибо!

А что вас смущает?

[dostel1]

учи javascript.(События ,модель DOM,цикл if-else)

Все это будет происходить по событию onclick.

[keltanas]

Доброго времени! Нужно сделать небольшой скриптик по смене картинок при нажатии на ссылку. Что то типа "выключить свет", нажал на ссылку картинка светлая(включить свет), нажал еще раз, картинка стала опять темной(выключить свет). Подскажите пожалуйста как это сделать? Заранее спасибо!

Разместите картинку в div с черным фоном. Далее меняйте CSS св-во opacity на 0.5, например.

Как-то так

<style>
.half-opacity { opacity: 0.5; }
</style>
<div id="background">
    <img src="..." alt="...">
</div>
<a href="..." class="toggle">toggle</a>

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
$(document).on('click','a.toggle',function(){
    $('#background img').toggleClass('half-opacity');
});
</script>

[Digidie]

У меня есть вот такой код:

<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) которые есть на сайте, меняются на те которые я ставлю. Подскажите как решить эту проблему? Спасибо!

[keltanas]

У меня есть вот такой код:...

Но он почему то работает только в Опере и больше нигде. Мало того все изображения(img) которые есть на сайте, меняются на те которые я ставлю. Подскажите как решить эту проблему? Спасибо!

А вы различаете в этом коде, где HTML, где PHP, а где JavaScript?

Может стоит разбить все на отдельные файлы?

Попробуйте сделать 2 вложенных слоя :

<div class="background-1">
    <div class="background-2"></div>
</div>

Первому задайте бэкграундом одну картинку. Второму - вторую.

Потом при нажатии кнопки делайте внутреннему диву .show() или .hide()

[Digidie]

Я этот код взял отсюда вот. Он везде нормально работает, во всех браузерах, точно так же как по ссылке пробовал сделать у себя на сайте. Кстати сайт вот Сайт Там есть включить, выключить свет. Так вот оно работает только в опере и то криво. Помогите пожалуйста исправить это все. Заранее спасибо!

[keltanas]

Я этот код взял отсюда вот. Он везде нормально работает, во всех браузерах, точно так же как по ссылке пробовал сделать у себя на сайте. Кстати сайт вот Сайт Там есть включить, выключить свет. Так вот оно работает только в опере и то криво. Помогите пожалуйста исправить это все. Заранее спасибо!

Ну вот в хроме тоже работает. Надо только немного подождать.

Думаю, надо просто сделать прелоад второй картинки, которую собираетесь показывать.

ЗЫЖ Извиняюсь, но за "Спасибо" я не работаю Могу только дать совет ))