Эффект увеличения картинки колёсиком мыши

Всем доброго времени суток. Хочу  сегодня предложить очень интересный вариант увеличения картинки при помощи колёсика мыши. О важности , и о том для чего и , как оптимизировать картинки в блоге мы уже говорили. Подобный эффект очень красиво поможет выделить изображения и , если хотите, внести некую изюминку в оформление блога.
Для полной наглядности подведите курсор на картинку вверху и поиграйтесь колёсиком. Если вам такое по душе и хотите установить у себя , приступим.

Здесь нам придётся( обязательно делаем резервную копию) зайти ШАБЛОН-ИЗМЕНИТЬ HTML -и с помощью клавиш Ctrl+F находим закрывающийся тег </head>.  Кто не знает, как это делается прочитайте пост  как найти строку в шаблоне правильно.

И прямо над этим тегом вставляем следующий код-

<script type="text/javascript">
(function(){

var zooming=function(e){
e=window.event ||e;
var o=this,data=e.wheelDelta || -e.detail*40,zoom,size;
if(!+'\v1'){//IE
zoom = parseInt(o.style.zoom) || 100;
zoom += data / 12;
if(zoom > zooming.min)
o.style.zoom = zoom + '%';
e.returnValue=false;
}else {
size=o.getAttribute("_zoomsize").split(",");
zoom=parseInt(o.getAttribute("_zoom")) ||100;
zoom+=data/12;
if(zoom>zooming.min){
o.setAttribute("_zoom",zoom);
o.style.width=size[0]*zoom/100+"px";
o.style.height=size[1]*zoom/100+"px";
}
e.preventDefault();
e.stopPropagation();//for firefox3.6
}
};
zooming.add=function(obj,min){// first parameter is for the image need to zoom ,min define the image zoom size ,default to 50
zooming.min=min || 50;
obj.onmousewheel=zooming;
if(/Firefox/.test(navigator.userAgent))//if Firefox
obj.addEventListener("DOMMouseScroll",zooming,false);
if(-[1,]){//if not IE
obj.setAttribute("_zoomsize",obj.offsetWidth+","+obj.offsetHeight);
}
};


window.onload=function(){//must be onload , in order to get the image size
zooming.add(document.getElementById("test"));
}
})()
</script>

Не забываем сохранить шаблон.

Когда мы всё правильно сделали остаётся только при добавлении изображения в текст
вставить вот такую строчку id= 'test'.

<img alt="id= 'test' src="ссылка на изображение"/>

Вот такими несложными действиями мы можем немного разнообразить наш блог.

На этом сегодня поставлю точку. Заходите.

Удачи всем нам.

УДАЧИ ВСЕМ НАМ.

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :