Эффекты на основе Java Script

Ручное изменение размеров картинки

Width: Height:	<Вернуться в каталог>
	Скопируйте и вставте
	Внутри тега <HEAD> - </HEAD>
	<STYLE> /* задаём кнопку на движке / .ui-widget-content .ui-state-default {FONT-WEIGHT: bold; BACKGROUND: url(http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/894/img/but1.gif) no-repeat; COLOR: #333333; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none; outline: none} .ui-widget-content .ui-state-hover {FONT-WEIGHT: bold; BACKGROUND: url(http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/894/img/but1.gif) no-repeat; COLOR: #212121; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none; outline: none} .ui-widget-content .ui-state-focus {FONT-WEIGHT: bold; BACKGROUND: url(http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/894/img/but1.gif) no-repeat; COLOR: #212121; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none; outline: none} .ui-widget-content .ui-state-active {FONT-WEIGHT: bold; BACKGROUND: url(http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/894/img/but1.gif) no-repeat; COLOR: #ffffff; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none; outline: none} / прочие параметры и стили / .ui-slider {POSITION: relative; TEXT-ALIGN: left} .ui-slider .ui-slider-handle {Z-INDEX: 2; WIDTH: 16px; CURSOR: default; POSITION: absolute; HEIGHT: 16px} .ui-slider .ui-slider-range {BORDER-TOP-WIDTH: 0px; DISPLAY: block; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 0.7em; Z-INDEX: 1; BORDER-BOTTOM-WIDTH: 0px; POSITION: absolute; BORDER-RIGHT-WIDTH: 0px;} / начальное местоположение кнопки движка / .ui-slider-horizontal .ui-slider-handle {MARGIN-LEFT: -0.6em; TOP: -0.3em} / цвет и стиль шкалы движка */ .ui-widget-content {BORDER-RIGHT: #aaaaaa 1px solid; BORDER-TOP: #aaaaaa 1px solid; BORDER-LEFT: #aaaaaa 1px solid; COLOR: #2c4359; BORDER-BOTTOM: #aaaaaa 1px solid} </STYLE> <script> var shir_min = 100; // минимальный горизонтальный размер картинки var shir_max = 666; // максимальный горизонтальный размер картинки </script> <SCRIPT src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/894/js/jquery-1.3.2.min.js" type=text/javascript></SCRIPT> <SCRIPT src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/894/js/jquery-ui-1.7.2.custom.min.js" type=text/javascript></SCRIPT> <SCRIPT type=text/javascript src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/894/jsizmenen_razmer_kartinki.js"></SCRIPT>
	Для изменения размеров картинки кликните в нужном месте шкалы, или возьмитесь на движок и перетащите его в нужное место шкалы. Текущие размеры картинки в пикселах Вы видите на табло. Все основные параметры вынесены сюда и подписаны. В самих скриптах менят нечего.
	Внутри тега <BODY> - </BODY> там где у Вас будет движок с таблом и картинкой.
<DIV class=demo style="MARGIN-LEFT: 50px"> <!-- задаём формы для выводи размеров картинки и их параметры и стиль --> <P><LABEL for=amount>Width:</LABEL> <INPUT id=amount style="BORDER-TOP-WIDTH: 0px; FONT-WEIGHT: bold; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 30px; COLOR: #f6931f; BORDER-RIGHT-WIDTH: 0px; background:#666666;"> <LABEL for=amount2>Height:</LABEL> <INPUT id=amount2 style="BORDER-TOP-WIDTH: 0px; FONT-WEIGHT: bold; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 30px; COLOR: #f6931f; BORDER-RIGHT-WIDTH: 0px; background:#666666;"> </P> <DIV id=slider style="WIDTH: 220px; HEIGHT: 6px"></DIV> <!-- Здесь задаём движок --> <!-- здесь задаём саму картинку, её начальные размеры, местоположение и стиль --> <DIV id=images style="MARGIN-TOP: 40px; POSITION: relative;"><IMG style="POSITION: absolute; z-index: 101;" height=150 src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/894/img/anna.jpg" width=100></DIV></DIV>
Здесь задаём табло и его стиль, картинку и её местоположение. Данный скрипт значительно экономит место на страничке и при этом позволяет иметь достаточно большие размеры картинки для просмотра.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.