Эффекты на основе Java Script, jQuery и т.д.

Картинка с загибающимся уголком

Скопируйте и вставте
Внутри тега <HEAD> - </HEAD>
<style type="text/css"> /* размеры контейнера = размерам картинки / .demo {height: 150px; width: 200px;} / размеры картинки */ .demo img {height: 150px; width: 200px;} </style> <script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/kart_statichna/840/cvi_curl_lib.js"></script> <script type="text/javascript"> <!-- function toggle(obj) { cvi_curl.defaultSize = 50; // величина загибающегося участка cvi_curl.defaultColor = "#ffeeaa"; // цвет обратной стороны if(obj.tagName.toUpperCase() != 'IMG') { cvi_curl.remove(obj); }else { cvi_curl.add(obj); } } var size = 100; var direct = true; function increase(obj) { var max = 100; if(obj.tagName.toUpperCase() != 'IMG') { if(!direct && size>5 \|\| size>=max) { direct = false; size -= 5; }else if(direct && size<=5 \|\| size<max) { direct = true; size += 5; } cvi_curl.modify(obj, {size: size }); } } window.onload = function () { cvi_curl.add(document.getElementById("img2"), {size: 100 }); cvi_curl.add(document.getElementById("img3"), {size: 5 }); // cvi_curl.add(document.getElementById("img4"), {size: 75 }); }; --> </script>
Всё основное подписано. Проблем быть не должно.
Внутри тега <BODY> - </BODY> там где у Вас будет картинка.
Пример 1. При клике на картинку уголок загибается, при следующем клике - уголок разгибается.
	<div class="demo" onclick="toggle(document.getElementById('img1'));"> <img src="http://skriptkpbstudio.ucoz.ru/demo_srt/kart_statichna/840/example.jpg" title="" alt="" id="img1"> </div>

Пример 2. При наведении курсора на картинку уголок загибается, как только курсор выходит за область картинки уголок разгибается.
	<div class="demo" onmouseover="cvi_curl.modify(document.getElementById('img3'), {size: 50 });" onmouseout="cvi_curl.modify(document.getElementById('img3'), {size: 5 });"> <img src="http://skriptkpbstudio.ucoz.ru/demo_srt/kart_statichna/840/example.jpg" title="" alt="" id="img3"> </div>

Пример 3. При перемещении курсора в области картинки уголок изменяет угол своего загиба, как только курсор выходит за область картинки состояние загиба уголка фиксируется.
	<div class="demo" onmousemove="increase(document.getElementById('img2'));"> <img src="http://skriptkpbstudio.ucoz.ru/demo_srt/kart_statichna/840/example.jpg" title="" alt="" id="img2"> </div>

Показаны 3-и возможных варианта применения скрипта. Думаю, проблем у Вас возникнуть не должно.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.