Смена изображения

[fragilewelldone]

Здравствуйте, подтолкните на мысль как реализовать конструкцию в которой нажатие на ссылки приводит к смене фона.

В общем Вот

Должно работать в IE6!

Заранее спасибо.

PS. c javascript дело не имел)

[hedgehog]

a {
  display: block;
  background: url('background.png.') no-repeat;
}

a:active {
  background: url('active.png') no-repeat;
}

оно?

для ие6 может понадобиться haslayout

[Softlink]

Актив подойдет, но это, наверное, не то что нужно автору. Для поддержки ИЕ6,7 не знаю, но в принципе это сделать возможно. Например через :focus

[fragilewelldone]

Суть в том что менять фон нужно не у ссылок а у отдельного блока)

ща почитаю про :focus

Edited November 18, 2011 by fragilewelldone

[hedgehog]

  On 11/18/2011 at 6:46 PM, fragilewelldone said:

Суть в том что менять фон нужно не у ссылок а у отдельного блока)

ща почитаю про :focus

т.е. кликнули по ссылке, а фон сменился у какого-то другого блока на этой же странице? тогда фокус тут не поможет. для CSS3 браузеров :target, для устаревших - JS. если опять не то, опишите подробно задачу.

[Softlink]

Вот о таком варианте я говорил.

[hedgehog]

  On 11/18/2011 at 7:20 PM, Softlink said:

Вот о таком варианте я говорил.

очень круто, плюсую! мне еще учиться и учиться... появились некоторые мысли по этому поводу:

1. при потере фокуса ссылкой блок возвращается в исходное положение, а с :target, как я понимаю, возможен вариант, когда состояние сохраняется до обновления страницы

2. вместо невидимых блоков можно использовать свойство "content", если нет ничего вложенного?

3. в ие6-7 все равно нужен JS или можно обойтись классами для ссылок (в варианте с :focus)?

[fragilewelldone]

  On 11/18/2011 at 5:39 PM, Softlink said:

Актив подойдет, но это, наверное, не то что нужно автору. Для поддержки ИЕ6,7 не знаю, но в принципе это сделать возможно. Например через :focus

Да, то что нужно ! Только жаль не для старых браузеров... Придется изучать javascript, но все равно спасибо! Порадовало)

[Softlink]

  On 11/18/2011 at 8:05 PM, hedgehog said:

1. при потере фокуса ссылкой блок возвращается в исходное положение, а с :target, как я понимаю, возможен вариант, когда состояние сохраняется до обновления страницы

2. вместо невидимых блоков можно использовать свойство "content", если нет ничего вложенного?

3. в ие6-7 все равно нужен JS или можно обойтись классами для ссылок (в варианте с :focus)?

1. с target не пробовал это повторить, надо будет на досуге позаниматься

2. про невидимые блоки не понял. Если вы про блок, в котором меняется изображение, то вряд ли это подойдет. Насколько мне понимается картинки могут генериться какой-нибудь cms-кой.

3. в 6-7 :focus не работает. Как его заставить там работать, я не знаю.

  On 11/18/2011 at 8:27 PM, fragilewelldone said:

  On 11/18/2011 at 5:39 PM, Softlink said:

Актив подойдет, но это, наверное, не то что нужно автору. Для поддержки ИЕ6,7 не знаю, но в принципе это сделать возможно. Например через :focus

Да, то что нужно ! Только жаль не для старых браузеров... Придется изучать javascript, но все равно спасибо! Порадовало)

Да, старые остались в сторонке. Но это тоже не идеальный вариант. Скорее одно из частных решений. Вся неуниверсальность заключается в самом :фокусе. Стоит только щелкнуть в любом месте и блок возвращается в исходную.

[hedgehog]

На jQuery это можно реализовать в две строки. Набросаю пример, когда буду за компом

jQuery: http://jsfiddle.net/dCdCJ/ или http://jsfiddle.net/yYSj3/

Edited November 19, 2011 by hedgehog

[fragilewelldone]

второй вариант не катит потому что фон скидывается при нажатии на сам блок с фоном) А за первый вариант большое спасибо. И вопрос, что такое jQuery? Вид javascript?

Обновлено: понял второй вариант ))

Edited November 19, 2011 by fragilewelldone

[hedgehog]

  On 11/19/2011 at 5:51 PM, fragilewelldone said:

второй вариант не катит потому что фон скидывается при нажатии на сам блок с фоном) А за первый вариант большое спасибо.

Обновлено: понял второй вариант ))

разнца в подходах в первом варианте фон передается через атрибут data-, а во-втором - привязан в скрипте к положению в DOM. третий вариант - добавлять атрибут onclick элементу, вызывающий функцию смены фона

  On 11/19/2011 at 5:51 PM, fragilewelldone said:

И вопрос, что такое jQuery? Вид javascript?

это весьма популярный фреймворк. здесь можно обойтись и чистым JS, но я сходу не берусь на нем набросать подобное, разве что с использованием onclick... с JS/jQuery я только начинаю знакомиться

[fragilewelldone]

Ок и последний вопрос) куда записывать это??? В тег <script> </script> или?...

[gurylyov]

  On 11/19/2011 at 7:09 PM, fragilewelldone said:

Ок и последний вопрос) куда записывать это??? В тег <script> </script> или?...

да, в него. предварительно подключив в <head> jQuery.

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>

[fragilewelldone]

Правильно ли я делаю?

http://screencast.com/t/PwVVHTZpVCfj

В классе идентификаторе opacity три ссылки в трех дивах , мне нужно по нажатию на одну из них чтобы цвет фона дива с идентификатором header менялся(вообще нужно чтоб картинка в бэкграунде менялась но пока и цвет поменять не получается.)

Еще мне интересно что означает конструкция:

.eq(0)

.eq(1)

.eq(2)

Edited November 19, 2011 by fragilewelldone

[gurylyov]

.eq()

вроде как всё правильно.

если конечно в фразе "три ссылки в трех дивах" не подразумевается конструкция <div><a></a></div>.

[fragilewelldone]

  On 11/20/2011 at 2:54 AM, gurylyov said:

.eq()

вроде как всё правильно.

если конечно в фразе "три ссылки в трех дивах" не подразумевается конструкция <div><a></a></div>.

Подразумевается!)

Вложенность такая:

<div id=opacity>

<div><a></a></div>

<div><a></a></div>

<div><a></a></div>

</div>

PS убрать eq()или сделать во всех eq(0) я еще вчера пытался)

Edited November 20, 2011 by fragilewelldone

[hedgehog]

Клик на блоке со ссылкой или на ссылке меняет цвет фона: http://jsfiddle.net/YuntS/

Клик только на ссылке меняет цвет фона: http://jsfiddle.net/BWYem/

Следующая конструкция означает, что по клику на ссылке в первом div'е внутри элемента #opacity будет задавать определенный цвет фона для #target

$('#opacity div').eq(0).find('a').click(function(){$('#target').css('background', 'red');});

подключать либо отдельным файлом (как jquery), либо так:

<script type="text/javascript">
$(document).ready(function(){
  $('#opacity div').eq(0).find('a').click(function(){$('#target').css('background', 'red');});
  $('#opacity div').eq(1).find('a').click(function(){$('#target').css('background', 'blue');});
  $('#opacity div').eq(2).find('a').click(function(){$('#target').css('background', 'green');});
});
</script>

если будет ругаться что-то вроде "$ not a function", то придется заменить все $ на jQuery или заключить весь этот код внутрь такой конструкции:

(function ($) {
некий код
})(jQuery); 

если честно, я еще не до конца понимаю, почему в одних случаях нужно объявлять эту функцию, а в других - нет. возможно, дело в других подключенных скриптах

[fragilewelldone]

Спасибо!)Изменил все $ на jQuery и все заработало, скоро выложу результат)

Добавлено: Результат

Edited November 20, 2011 by fragilewelldone

[hedgehog]

можно добавить эффекты для смены изображения. например: http://api.jquery.com/fadeIn/

там две Demo есть.