Спойлер в описании товара! Как доработать?

[kotkotan]

На просторах сети наткнулся на подобный спойлер для Престы:

 

 

<div class="spoil">
<div class="smallfont"><input class="input-button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = '>>> Cкрыть <<<'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = '<<< Показать >>>'; }"type="image" src="ссылка на картинку" /></div>
<div class="alt2">
<div style="display: none;">
<p style="text-align: center;">
ТЕКСТ ПОД СПОЙЛЕРОМ
</p>
</div>
</div>
</div>

 

смысл в том, чтобы при нажатии на картинку открывался текст/графика.

подскажите как доработать, чтобы при наведении на картинку она подсвечивалась или подставлялалась другая картинка, например была черно-белая, а при наведении стала цветной.

спасибо

[absent]

используйте fadein fade out

имхо удобнее

[kotkotan]

используйте fadein fade out

имхо удобнее

а можно на примере?

[absent]

а можно на примере?

 

http://jquery-docs.ru/effects/fadeout/

http://jquery-docs.ru/effects/fadein/

[kotkotan]

с этими примерами я не разберусь. есть идеи как доработать тот код, который выложил выше?

[absent]

напиши в поиске fadeIn и fadeOut

и смотри. там легко.

[kotkotan]

напиши в поиске fadeIn и fadeOut

и смотри. там легко.

здесь на форуме не нахожу....

[Dimitri Yelquin]

Это не на форуме. Посмотрите в Гугле!

[absent]

здесь на форуме не нахожу....

 

http://jquery-docs.ru/effects/fadein/

Edited June 15, 2013 by absent (see edit history)

[kotkotan]

с jQuery какие-то проблемы. при вставке скрипта он закрывается каким-то [CDATA]

[absent]

с jQuery какие-то проблемы. при вставке скрипта он закрывается каким-то [CDATA]

 

Как вставляешь?

[kotkotan]

Пробую эффект "Черно-бело становится цветным при наведении"

 

Подключаю

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/grayscale.js"></script>

 

Изображения

 

<img class="color" src="img/g1.png">
<img class="color" src="img/g2.png">

 

Дальше скрипт

 

 

<script type="text/javascript">
$(document).ready(function(){
 grayscale.prepare($('.color'));
 grayscale($('.color'));
 $('.color').hover(function(){
  grayscale.reset($(this));
 }, function(){
  grayscale($(this));
 });
});
</script>

 

После обновления скрипт помещается в

 

<![CDATA[// ]]>

и с картинкой ничего не происходит