сейчас на сайте:
Лучшие сказки мира
Детектив и фантастика
Песни прошлых лет
Для досуга
смотреть оглавлениепримерразмер кода
When the page has loaded the minimum opacity value is applied to the appropriate images.The maximum and minimum opacity values are set at variables maxOpac and minOpac.Mousing over an image fades the image in to the maximum opacity setting, mousing out fades the image out to the minimum opacity setting.The mouse events are dynamically applied to the fading images, clicking on an image will show the larger image or go to a url depending on how you code the array.
Create your image as normal using the img tag, any image that is required to fade must be given the id imgfade followed by an ordinal number starting from zero.
<img id="imgfade0" src="pic01_tn.jpg"><img id="imgfade1" src="pic02_tn.jpg"><img id="imgfade2" src="pic03_tn.jpg"><img id="imgfade3" src="pic04_tn.jpg"><img id="imgfade4" src="pic05_tn.jpg"><img id="imgfade5" src="pic06_tn.jpg">
The array, imgArr, must have the same number of indexes as there are fading images and are populated with the larger image or a url.If no larger image or url is require the appropriate array index should be left empty.
imgArr=new Array()imgArr[0="pic01.jpg" // show imageimgArr[1]="page2.htm" // go to urlimgArr[2]="", // no image or urlimgArr[3]="pic04.jpg"imgArr[4]="pic05.jpg"imgArr[5]="pic06.jpg"
Any number if images can be used and can be placed anywhere in the page.
<HTML><HEAD><TITLE>Image Fade 3</TITLE><script type="text/javascript"><!--imgArr=new Array()imgArr[0="pic01.jpg" // show imageimgArr[1]="page2.htm" // go to urlimgArr[2]="", // no image or urlimgArr[3]="pic04.jpg"imgArr[4]="pic05.jpg"imgArr[5]="pic06.jpg"maxOpac=100minOpac=30step=10preload=new Array()for(var i=0;i<imgArr.length;i++){if(imgArr[i].indexOf(".htm") == -1){preload[i]=new Image()preload[i].src=imgArr[i]}}function initObjectsAndEvents(){isFilters="filters" in document.body && "alpha" in document.body.filtersimgEl = document.getElementsByTagName("img")i = 0while(i<imgEl.length){imgEl[i].i=iwindow["myObject"+imgEl[i].i]=new fadeFunctions("imgfade"+imgEl[i].i)imgEl[i].onmouseover=function(){window["myObject"+this.i].chkStatus(this.i,'fadein')}imgEl[i].onmouseout=function(){window["myObject"+this.i].chkStatus(this.i,'fadeout')}imgEl[i].onclick=function(){newLocation(imgArr[this.i])}if(isFilters){imgEl[i].style.filter="alpha(opacity="+minOpac+")"}else{imgEl[i].style.opacity = minOpac/100}i++}}function fadeFunctions(id){this.id=idthis.timer=nullthis.running=0this.opac=minOpacthis.chkStatus=function(num,fadeMode){this.mode=fadeModeif(this.dir=="fadeout"){this.running=0}if(this.mode=="fadein"&&this.running==1){return}this.running=1window["myObject"+num].fade('myObject'+num)}this.fade=function(myobject){if(this.mode=="fadein"){this.opac+=step}else{this.opac-=step}this.timer=setTimeout(myobject+".fade('"+myobject+"')",50)if(this.mode=="fadein"&&this.opac>maxOpac){this.running=0this.opac=maxOpacclearTimeout(this.timer)}if(this.mode=="fadeout"&&this.opac<minOpac){this.running=0this.opac=minOpacclearTimeout(this.timer)}if(isFilters){document.getElementById(this.id).filters.alpha.opacity=this.opac}else{document.getElementById(this.id).style.opacity=(this.opac/100)-0.01}}}alwaysCenter=1 // 0 = no 1 = yespopLeft=0 // popup default left, use if not centeringpopTop=0 // popup default top, use if not centeringIEoffsetWidth=20IEoffsetHeight=25newWin=nullfunction newLocation(url){if(newWin&&!newWin.closed){newWin.close()}if(url.indexOf(".htm") != -1){//location=urlnewWin=window.open(url,'win1')}else{currentImage= new Image()currentImage.src=urlpopWidth=currentImage.width+IEoffsetWidthpopHeight=currentImage.height+IEoffsetHeightif(alwaysCenter==1){popLeft = (screen.availWidth - popWidth) / 2popTop = (screen.availHeight - popHeight) / 2}newWin=window.open(url,'win1','left='+ popLeft +',top='+ popTop +',width='+ popWidth +',height='+ popHeight +',scrollbars=0,resizable=0')newWin.document.body.style.backgroundColor="#000000"newWin.focus()}}// add onload="initObjectsAndEvents()" to the opening BODY tag// --></script></HEAD><BODY onload="initObjectsAndEvents()"><h1><span>Image Fade 3</span></h1><img id="imgfade0" src="pic1_tn.jpg"><img id="imgfade1" src="pic2_tn.jpg"><img id="imgfade2" src="pic3_tn.jpg"><img id="imgfade3" src="pic4_tn.jpg"><img id="imgfade4" src="pic5_tn.jpg"><img id="imgfade5" src="pic6_tn.jpg"></BODY></HTML>