Календари на любой год - Календарь.Юрец.Ру

Анекдот в студию!!!



Плавное увеличение картинки при наведении на неё курсора мыши

Пример использования этого скрипта Вы можете увидеть на странице этого сайта, и если Вы решили его установить, то Вам предстоит сделать следующее...


1)Скопировать следующие файлы

img.expando{
border: none;
vertical-align: bottom;
}

Сохраните этот файл, как imagesize.css

и


if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};
expConIm.ims = {};
expConIm.r = new RegExp('\\bexpando\\b');
if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}

А этот файл сохраните, как imagesize.js

3) Поместите оба файла в папку imagesize и расположите эту папку в корне свего сайта.

4)Пути к файлам <link rel="stylesheet" href="http://Ваш сайт/imagesize/imagesize.css" type="text/css" />
                           <script type="text/javascript" src="http://Ваш сайт/imagesize/imagesize.js"></script>

поместите в голове сайта между тегами<head> и </head>

5)Затем скопируйие этот код, и разместите его в том месте, где бы Вы хотели его видеть.


<img class="expando" border="0" src="http://Ваш сайт/ваши фото.jpg" width="120" height="140">
<img class="expando" border="0" src="http://Ваш сайт/ваши фото.jpg" width="100" height="140">

Количество на Ваше усмотрение.
width="120" height="140" соответственно ширина и высота маленьких фотографий, их можно сделать на своё усмотрение


Размеры увеличенных фотографий будут такими, какими Вы их загрузили на сайт.

6)Что бы сделать маленькие фотографии, Вам необходимо:
1.Запустить программу "Adobe Photoshop."

2.Открыть необходимое изображение командой: Файл -> открыть. В появившемся окне выбрать Изображение.

3.В верхнем меню программы открыть вкладку Изображение - Размер изображения.

4.В открывшемся окошке установить необходимую ширину изображения (высота установится автоматически). Нажать ОК.

5.Сохранить изображение с новыми размерами.

Вот и всё. Желаю удачи

По материалам сайта http://olerant.ru/imagesize.php







Новости на www.newsfiber.com



Copyright © Владимир Глухов 2010

Поиск

2



 Нравился ли этот сайт? 
   всё замечательно
   хороший сайт
   хотелось бы лучше
   сайт, так себе
   плохой сайт
   всё ужасно
Результаты
Besucherzahler ukraine women for marriage
счетчик посещений
Яндекс цитирования PRCY.ru