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

В этом уроке будем создавать эффект увеличения картинки с помощью колёсика мышки на Blogspot. Взгляните как этот эффект работает на Демо , Источник. Наведите на картинку и прокрутите колёсико.

Устанавливаем эффект увеличения картинки:

1) Переходим Дизайн - Изменить HTML
2) Далее, при помощи клавиш Ctrl-F находим знакомый нам: </head>
3) И сразу перед/над ним вставляем код, который вы видите ниже:

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

4) Сохраняем шаблон.
5) Создаём новый пост, и в то место, где вы хотите вставить своё изображение вставляете этот код:

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

Если же вы загружали свой рисунок через Блоггер, то у вас он будет выглядеть так:

<img id='test' src="http://3.bp.blogspot.com/-ZOvVU2h22Vs/T4hCbZmR1nI/AAAAAAAABx4/
HIalqgpdk7o/s320/22432022_photo02.jpg" width="320" />

То что выделено синим цветом, это тот кусочек кода, который нужно вставить в ваше изображение, чтобы работал эффект.
Вот и всё.

Мира и счастья Вам!

Источник