Enlarge image on mouseover

Question

User908 0 Newbie Poster

10 Years Ago

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>

javascript mouseover zoom

3 Contributors
5 Replies
302 Views
1 Day Discussion Span
Latest Post 10 Years Ago Latest Post by iamthwee

All 5 Replies

iamthwee

10 Years Ago

I suggest...

http://www.jacklmoore.com/zoom/

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

flashhtml5 0 Newbie Poster · Answer 1 · 2013-08-26T21:21:53+00:00

You could try a purely CSS solution:

<!DOCTYPE html>
<html lang="en-US" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Current Test</title>
<style>
img:hover {
-webkit-transition: 2s linear;
-moz-transition: 2s linear;
-o-transition: 2s linear;
-ms-transition: 2s linear;
transition: 2s linear;
width:200px;
height:200px;
}

img {
 /* This is for onmouseout */
-webkit-transition: 2s linear;
-moz-transition: 2s linear;
-o-transition: 2s linear;
-ms-transition: 2s linear;
transition: 2s linear;
width:100px;
height:100px;
}
</style>
</head>
<body>
<p>
This image gets bigger on mouse over:
</p>
<p>
<img id="id001" src="some.jpg" width="100" height="100" alt="image desc" >
</p>
</body>
</html>

This should not cause any type of CPU load on your browser or have uneven in-out animation. You can modify the transition as desired.

Regards,
Shawn

User908 0 Newbie Poster · Answer 2 · 2013-08-27T01:25:46+00:00

Thanks for your reply.

As CSS3 isn't supported by older browser versions (for instance, IE 6-8), I won't use it.

However, I tried your code and that worked fine in Opera. But in Firefox it loads the CPU by 13%.

Have you tried it yourself?

P.S. My CPU is Core i7 overclocked to 4000 MHz, so it's not the cause.

flashhtml5 0 Newbie Poster · Answer 3 · 2013-08-27T11:38:57+00:00

I would suppose the exact type of image you are trying to resize would play a factor in the CPU load. My load during the animation was
2% on Firefox (but that was for a medium-size image).

Try changing the image type or size.

Regards,
Shawn

User908 0 Newbie Poster · Answer 4 · 2013-08-27T13:05:02+00:00

Thank you Shawn for the answer.

You are right. I used images with high resolution (i.e. 1000x1000). After reading your reply I reduced their size to 300x300 and in my page they are currently scaled to 100x100. This solved the problem with the load.

Enlarge image on mouseover

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers