Замена фото с помощью курсора.Проведите курсором по фото.
Loading...
Просмотр скрипта
<STYLE type=text/css>HTML { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #A1FEF9; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 100%; PADDING-TOP: 0px; POSITION: absolute; HEIGHT: 100% } BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #A1FEF9; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 100%; PADDING-TOP: 0px; POSITION: absolute; HEIGHT: 100% } #center { LEFT: 50%; WIDTH: 30%; POSITION: absolute; TOP: 50%; HEIGHT: 60% } #d1 { LEFT: -50%; WIDTH: 100%; POSITION: absolute; TOP: -50%; HEIGHT: 100% } #d2 { LEFT: -50%; OVERFLOW: hidden; POSITION: absolute; TOP: -50% } .img { VISIBILITY: hidden; CURSOR: url(''), default; POSITION: absolute } .text { WIDTH: 100%; FONT-FAMILY: georgia, 'times new roman', times, veronica, serif; POSITION: absolute; TEXT-ALIGN: center } #title { FONT-SIZE: 1.6em; WIDTH: 100%; POSITION: absolute; TOP: -1.6em } #legend { FONT-SIZE: 0.9em; WIDTH: 100%; POSITION: absolute; TOP: 101% } .credit { FONT-SIZE: 0.6em; WIDTH: 99%; COLOR: #888; BOTTOM: 2px; FONT-FAMILY: arial; POSITION: absolute; TEXT-ALIGN: right } A { COLOR: #ff0000; TEXT-DECORATION: none } A:hover { BACKGROUND: #000; COLOR: #ff0000; TEXT-DECORATION: none } A:visited { COLOR: #ff0000; TEXT-DECORATION: none } A:hover { BACKGROUND: #ff8000; COLOR: #ff0000; TEXT-DECORATION: none } </STYLE> <SCRIPT type=text/javascript><!-- var xm = 0; var ym = 0; /* RGB code */ rgb = function(color, R, G, B) { color = Math.min(255,Math.max(0,color)); return "RGB("+Math.round(color*R)+","+Math.round(color*G)+","+Math.round(color*B)+")"; } /* isolate script */ function gf(){ /* source images */ this.images = document.getElementById('images').getElementsByTagName('img'); /* id hash table */ this.id = []; var items = document.getElementById('center').getElementsByTagName('*'); for(var i in items)if(items[i].id)this.id[items[i].id]=items[i]; /* variables */ this.K = 0; this.w2 = 0; this.h2 = 0; this.over = false; this.origin = 0; this.oL = 0; this.oT = 0; this.xm = 0; this.ym = 0; /* functions */ this.fade = function(o, c){ with(o.getElementsByTagName('div')){ item(0).style.color = rgb(c,1,1,1); item(1).style.color = rgb(255-c,1,1,1); item(0).style.zIndex = c; item(1).style.zIndex = 255-c; } } this.text = function(o, t){ with(o.getElementsByTagName('div')){ item(1).innerHTML = item(0).innerHTML; item(0).innerHTML = t; } } this.move = function(x,y,w,h){ /* position image */ with(gf.id.d2.style){ left = Math.round(x)+"px"; top = Math.round(y)+"px"; width = Math.max(0,Math.round(w))+"px"; height = Math.max(0,Math.round(h))+"px"; } with(gf.id.i2.style){ left = -(x+gf.w2)+"px"; top = -(y+gf.h2)+"px"; } /* transition complete */ if(gf.origin>0 && w>=gf.w2*2 && h>=gf.h2*2){ gf.K = ++gf.K % gf.images.length; with(gf.id){ i1.src = i2.src; i2.src = gf.images[gf.K].src; gf.text(title, gf.images[gf.K].title); gf.text(legend, gf.images[gf.K].alt); } gf.origin = 0; gf.over = false; w = 0; h = 0; gf.move(0,0,0,0); } /* text fade in/out */ var c = Math.round(((h*w)/(gf.h2*2*gf.w2*2))*255); gf.fade(gf.id.title, c); gf.fade(gf.id.legend, c); } /* on load */ this.init = function(){ resize(); with(gf.id){ i1.src = gf.images[gf.K].src; gf.text(title, gf.images[gf.K].title); gf.text(legend, gf.images[gf.K].alt); i1.style.visibility = i2.style.visibility = "visible"; i2.src = gf.images[++gf.K].src; gf.text(title, gf.images[gf.K].title); gf.text(legend, gf.images[gf.K].alt); gf.fade(title, 0); gf.fade(legend, 0); } } /* mouse move */ this.movemouse = function(e){ /* source/target of the event */ var o = (e.target)?e.target:((e.srcElement)?e.srcElement:null); /* over is image */ if(o == gf.id.i1){ /* offset calculation */ var o2 = o.offsetParent; gf.oL = o.offsetLeft+o2.offsetLeft+o2.offsetParent.offsetLeft; gf.oT = o.offsetTop+o2.offsetTop+o2.offsetParent.offsetTop; gf.xm = xm-gf.oL; gf.ym = ym-gf.oT; /* determine origin */ if(!gf.over){ if(gf.xm<gf.w2){ if(gf.ym<gf.h2)gf.origin=1; else gf.origin=2; } else { if(gf.ym<gf.h2)gf.origin=4; else gf.origin=3; } gf.over=true; } } else { /* mouse is out */ gf.xm = xm-gf.oL; gf.ym = ym-gf.oT; } /* move image */ switch(gf.origin) { case 1: gf.move(-gf.w2,-gf.h2,gf.xm,gf.ym); break; case 2: gf.move(-gf.w2,Math.max(-gf.h2,-gf.h2+gf.ym),gf.xm,gf.h2*2-gf.ym); break; case 3: gf.move(Math.max(-gf.w2,-gf.w2+gf.xm),Math.max(-gf.h2,-gf.h2+gf.ym),gf.w2*2-gf.xm,gf.h2*2-gf.ym); break; case 4: gf.move(Math.max(-gf.w2,-gf.w2+gf.xm),-gf.h2,gf.w2*2-gf.xm,gf.ym); break; } } } function resize(){ gf.w2 = gf.id.i1.offsetParent.offsetWidth/2; gf.h2 = gf.id.i1.offsetParent.offsetHeight/2; gf.id.i1.style.width = gf.id.i2.style.width = (gf.w2*2)+"px"; gf.id.i1.style.height = gf.id.i2.style.height = (gf.h2*2)+"px"; } onresize = resize; onload = function(){ /* instantiation */ gf = new gf(); gf.init(); /* mouse move event */ document.onmousemove = function(e){ if(window.event) e=window.event; xm = (e.x || e.clientX); ym = (e.y || e.clientY); gf.movemouse(e); } } //--> </SCRIPT> </HEAD> <BODY><br> <center><FONT SIZE="5" color="#C53701"> Замена фото с помощью курсора.Проведите курсором по фото.</font></center> <br> <center><a href="script29.txt"><center>Просмотр скрипта</center></a></center> <DIV id=center><SPAN style="FONT-SIZE: 14px; LEFT: -50px; COLOR: #fff; FONT-FAMILY: arial; POSITION: absolute; TOP: -18px">Loading... </SPAN> <SPAN style="FONT-SIZE: 1px; BACKGROUND: #333; LEFT: -50px; WIDTH: 100px; POSITION: absolute; TOP: -5px; HEIGHT: 10px"> <SPAN id=load style="FONT-SIZE: 1px; BACKGROUND: #fff; WIDTH: 0px; POSITION: absolute; HEIGHT: 10px"> </SPAN></SPAN> <DIV id=d1> <DIV id=title> <DIV class=text></DIV> <DIV class=text></DIV> </DIV> <IMG class=img id=i1 title="" alt="" src="" width="400" height="350"> <DIV id=legend> <DIV class=text></DIV> <DIV class=text></DIV> </DIV> </DIV> <DIV id=d2><IMG class=img id=i2 title="" alt="" src="" width="300" height="350"> </DIV> </DIV> <DIV id=images style="VISIBILITY: hidden"> <IMG src="a01.jpg" width="400" height="350"> <IMG src="a02.jpg" width="400" height="350"> <IMG src="a03.jpg"width="400" height="350"> <IMG src="a04.jpg" width="400" height="350"> <IMG src="a05.jpg" width="400" height="350"> <IMG src="a06.jpg" width="400" height="350"> </DIV> <SCRIPT type=text/javascript> // loading... m00=document.getElementById("images").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("load").style.width=Math.round(m02/m01*100)+"px";if(m02<m01)setTimeout("images_loading_bar();", 64);};images_loading_bar(); </SCRIPT>
