Jump to content

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


Recommended Posts

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

 

 

<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>

 

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

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

спасибо

Share this post


Link to post
Share on other sites

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

 

Подключаю

<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[// ]]>

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More