I have several thumbnails on my page which I would like to enlarge on mouseover and revert them to their initial position on mouseout. So when the user mouses over any of the aforementioned thumbnails onmouseover is called triggering MLTo function and when the mouse is out, onmouseout triggers MLFro function and reverts the image to its initial position.
This is the code that I've written, but it has several flaws!
Firstly, I've tested it in Opera,Chrome,Safari,IE and Firefox (all are the latest versions). In the first 4 browsers the script doesn't load the CPU, but in Firefox it loads the CPU up to 15%.
Secondly, sometimes the animation speeds up on mouseout.
So, how to eliminate The CPU load in Firefox and prevent the speeding of the animation on mouseout?
Thanks for any help!
P.S. English isn't my native language, so if something is unclear let me know and I'll clarify!
<body style="margin:200px; background-color:#999">
<div style="width:100px; height:100px; border:1px #333 solid; position:relative"><img src="some.jpg" style="width:100px; height:100px; position:relative" id="er" class="zoom"/></div> <br />
<div style="width:100px; height:100px; border:1px #333 solid; position:relative"><img src="some.jpg" style="width:100px; height:100px; position:relative" id="er2" class="zoom"/></div> <br />
<div style="width:100px; height:100px; border:1px #333 solid; position:relative"><img src="some.jpg" style="width:100px; height:100px; position:relative " id="er3" class="zoom"/></div> <br />
<script type="text/javascript">
window.onload = function () {
getIDWHMLMT();
}
var getElements = document.getElementsByClassName("zoom");
var isIE = /MSIE/gi;
var regExpIEV = /MSIE \d+\.\d+/gi;
var regExpIEV2 = /\d+\.\d+/gi;
var IDWHMLMTA = [];
var IEVArray = [];
function getIDWHMLMT() {
if(getElements.length > 0) {
for(var i=0; i<getElements.length; i++) {
getID = document.getElementById(getElements[i].id);
defSize = navigator.userAgent.match(isIE) ? getID.currentStyle : window.getComputedStyle(getID);
defImgSizeWidth = defSize.getPropertyValue('width');
defImgSizeHeight = defSize.getPropertyValue('height');
defImgSizeWidth = parseInt(defImgSizeWidth);
defImgSizeHeight = parseInt(defImgSizeHeight);
defImgSizeWidthDifFDec = defImgSizeWidth - defImgSizeWidthDif;
defImgSizeHeightDifFDec = defImgSizeHeight - defImgSizeHeightDif;
defImgSizeWidthDifFInc = defImgSizeWidth + defImgSizeWidthDif;
defImgSizeHeightDifFInc = defImgSizeHeight + defImgSizeHeightDif;
defImgSizeML = parseInt(getID.style.marginLeft);
defImgSizeMT = parseInt(getID.style.marginTop);
defImgSizeML = defImgSizeML==null || isNaN(defImgSizeML) ? 0 : defImgSizeML;
defImgSizeMT = defImgSizeMT==null || isNaN(defImgSizeMT) ? 0 : defImgSizeMT;
defzIndex = defSize.getPropertyValue('z-Index');
IDWHMLMTA.push({id:getID.id, width:defImgSizeWidth, height:defImgSizeHeight, marginL:defImgSizeML, marginT:defImgSizeMT, ZIndex:defzIndex, WD:defImgSizeWidthDifFDec, HD:defImgSizeHeightDifFDec, WI:defImgSizeWidthDifFInc, HI:defImgSizeHeightDifFInc});
}
}
}
function defIEVersion() {
if(navigator.userAgent.match(isIE)) {
IEversionDef = navigator.userAgent.match(regExpIEV) + "";
IEversionDef2 = IEversionDef.match(regExpIEV2);
IEversionDef3 = IEversionDef.replace(IEversionDef,IEversionDef2);
IEversionDef3 = parseInt(IEversionDef3);
IEVArray.push(IEversionDef3);
}
}
defIEVersion();
function defChild(event) {
evt = event || window.event;
evtRel = evt.toElement || evt.relatedTarget;
while(evtRel && evtRel.parentNode && evtRel.parentNode != window) {
if (evtRel.parentNode == this || evtRel == this) {
if(evtRel.preventDefault) evtRel.preventDefault();
return false;
}
evtRel = evtRel.parentNode;
}
}
var CheckLast = [];
var IncOrDec = "inc";
var defImgSizeWidthDif = 100;
var defImgSizeHeightDif = 100;
var sD = 30;
var HMInc = 5;
var IncTimes = HMInc * 2;
var TimerTo;
var TimerFro;
var stepsInc = 0;
var stepsInc2 = 0;
for(var v=0;v<getElements.length;v++){
if(navigator.userAgent.match(isIE) && IEVArray[IEVArray.length-1]<10) {
getElements[v].attachEvent('mouseover',function(event) {
IDChange = this;
MLTo(); },false);
getElements[v].attachEvent('mouseout',function(event) {
defChild(event);
IDChange2 = this;
MLFro(event);
},false);
}
else {
getElements[v].addEventListener('mouseover',function(event) {
IDChange = this;
MLTo(); },false);
getElements[v].addEventListener('mouseout',function(event) {
defChild(event);
IDChange2 = this;
MLFro(event);
},false);
}
}
function MLTo() {
if(CheckLast.length>0) {
if(IDChange.id === CheckLast[CheckLast.length-1].id && IDChange.SF != "Started") {
clearInterval(TimerFro);
stepsInc2 = 0;
}
}
for(var y=0;y<getElements.length;y++){
getElements[y].style.zIndex = defzIndex === 'auto' ? 0 : defzIndex;
}
IDChange.style.position = "absolute";
IDChange.addEventListener('mouseout',function(event) {
evt = event || window.event;
if(evt.type=='mouseout') {
clearInterval(TimerTo);
stepsInc = 0;
}
},false);
defSize = navigator.userAgent.match(isIE) ? IDChange.currentStyle : window.getComputedStyle(IDChange);
defImgSizeWidth = defSize.getPropertyValue('width');
defImgSizeHeight = defSize.getPropertyValue('height');
defImgSizeWidth = parseInt(defImgSizeWidth);
defImgSizeHeight = parseInt(defImgSizeHeight);
defImgSizeML = parseInt(IDChange.style.marginLeft);
defImgSizeMT = parseInt(IDChange.style.marginTop);
defImgSizeML = defImgSizeML==null || isNaN(defImgSizeML) ? 0 : defImgSizeML;
defImgSizeMT = defImgSizeMT==null || isNaN(defImgSizeMT) ? 0 : defImgSizeMT;
defzIndex = defSize.getPropertyValue('z-Index');
IDChange.style.zIndex = 100;
stepsInc+=0.1;
TimerTo = setInterval(function() {
if(IncOrDec === "dec") {
for(var i=0; i<IDWHMLMTA.length; i++) {
if(IDChange.id == IDWHMLMTA[i].id) {
if((defImgSizeWidth>IDWHMLMTA[i].WD && defImgSizeHeight>IDWHMLMTA[i].HD) && (defImgSizeML<defImgSizeWidthDif && defImgSizeMT<defImgSizeHeightDif)) {
defImgSizeWidth = defImgSizeWidth - IncTimes;
IDChange.style.width = defImgSizeWidth + "px";
defImgSizeHeight = defImgSizeHeight - IncTimes;
IDChange.style.height = defImgSizeHeight + "px";
defImgSizeML = defImgSizeML + HMInc;
IDChange.style.marginLeft = defImgSizeML + "px";
defImgSizeMT = defImgSizeMT + HMInc;
IDChange.style.marginTop = defImgSizeMT + "px";
}
else {
clearInterval(TimerTo);
stepsInc = 0;
}
}
}
}
if(IncOrDec === "inc") {
for(var i=0; i<IDWHMLMTA.length; i++) {
if(IDChange.id == IDWHMLMTA[i].id) {
if((defImgSizeWidth<IDWHMLMTA[i].WI && defImgSizeHeight<IDWHMLMTA[i].HI) && (defImgSizeML<defImgSizeWidthDif && defImgSizeMT<defImgSizeHeightDif)) {
defImgSizeWidth = defImgSizeWidth + IncTimes;
IDChange.style.width = defImgSizeWidth + "px";
defImgSizeHeight = defImgSizeHeight + IncTimes;
IDChange.style.height = defImgSizeHeight + "px";
defImgSizeML = defImgSizeML - HMInc;
IDChange.style.marginLeft = defImgSizeML + "px";
defImgSizeMT = defImgSizeMT - HMInc;
IDChange.style.marginTop = defImgSizeMT + "px";
}
else {
clearInterval(TimerTo);
stepsInc = 0;
}
}
}
}
},sD+stepsInc);
}
function MLFro(event) {
clearInterval(TimerFro);
CheckLast.push({id:IDChange2.id,SF:"Started"});
stepsInc2+=0.1;
TimerFro = setInterval(function() {
for(var w=0;w<CheckLast.length;w++){
if(CheckLast[w].SF === "Started") {
IDChange2 = document.getElementById(CheckLast[w].id);
IDChange2.style.position = "relative";
defSize2 = navigator.userAgent.match(isIE) ? IDChange2.currentStyle : window.getComputedStyle(IDChange2);
defImgSizeWidth2 = defSize2.getPropertyValue('width');
defImgSizeHeight2 = defSize2.getPropertyValue('height');
defImgSizeWidth2 = parseInt(defImgSizeWidth2);
defImgSizeHeight2 = parseInt(defImgSizeHeight2);
defImgSizeML2 = parseInt(IDChange2.style.marginLeft);
defImgSizeMT2 = parseInt(IDChange2.style.marginTop);
defImgSizeML2 = defImgSizeML2==null || isNaN(defImgSizeML2) ? 0 : defImgSizeML2;
defImgSizeMT2 = defImgSizeMT2==null || isNaN(defImgSizeMT2) ? 0 : defImgSizeMT2;
if(IncOrDec === "dec") {
for(var i=0; i<IDWHMLMTA.length; i++) {
if(IDChange2.id == IDWHMLMTA[i].id) {
if((defImgSizeWidth2<IDWHMLMTA[i].width && defImgSizeHeight2<IDWHMLMTA[i].height) && (defImgSizeML2>IDWHMLMTA[i].marginL && defImgSizeMT2>IDWHMLMTA[i].marginT)) {
defImgSizeWidth2 = defImgSizeWidth2 + IncTimes;
IDChange2.style.width = defImgSizeWidth2 + "px";
defImgSizeHeight2 = defImgSizeHeight2 + IncTimes;
IDChange2.style.height = defImgSizeHeight2 + "px";
defImgSizeML2 = defImgSizeML2 - HMInc;
IDChange2.style.marginLeft = defImgSizeML2 + "px";
defImgSizeMT2 = defImgSizeMT2 - HMInc;
IDChange2.style.marginTop = defImgSizeMT2 + "px";
}
else {
CheckLast[w].SF = "Finished";
//clearInterval(TimerFro);
CheckLast.slice(w);
stepsInc2 = 0;
IDChange2.style.zIndex = IDWHMLMTA[i].ZIndex;
}
}
}
}
if(IncOrDec === "inc") {
for(var i=0; i<IDWHMLMTA.length; i++) {
if(IDChange2.id == IDWHMLMTA[i].id) {
if((defImgSizeWidth2>IDWHMLMTA[i].width && defImgSizeHeight2>IDWHMLMTA[i].height) && (defImgSizeML2<IDWHMLMTA[i].marginL && defImgSizeMT2<IDWHMLMTA[i].marginT)) {
defImgSizeWidth2 = defImgSizeWidth2 - IncTimes;
IDChange2.style.width = defImgSizeWidth2 + "px";
defImgSizeHeight2 = defImgSizeHeight2 - IncTimes;
IDChange2.style.height = defImgSizeHeight2 + "px";
defImgSizeML2 = defImgSizeML2 + HMInc;
IDChange2.style.marginLeft = defImgSizeML2 + "px";
defImgSizeMT2 = defImgSizeMT2 + HMInc;
IDChange2.style.marginTop = defImgSizeMT2 + "px";
}
else {
CheckLast[w].SF = "Finished";
//clearInterval(TimerFro);
CheckLast.slice(w);
stepsInc2 = 0;
IDChange2.style.zIndex = IDWHMLMTA[i].ZIndex;
}
}
}
}
}
}
},sD+stepsInc2);
}
</script>
</body>