'downscale image by 5 pixels onmousedown

I am in school and the objective I am missing is to rescale the mole1 element by 5 pixels on mouse click (onmousedown) then to have the image rescale to original scale when mouse button releases (onmouseup). I added comments where i think the functions for it would go.

//html below

<html>
    <head>
       
    </head>
    <Body>
        <img id="mole" src="./Images/montymole-idle1.png">
        <img id="luigi" src="./Images/luigi-wack1.png">
        <p id="text">Times Hit Mole</p> 
        
       

        <script language="javascript"
        type="text/javascript" src="./script.js/Script.js">

    </script>
    </Body>
</html>


//JavaScript extention below


var luigi1 = document.getElementById("luigi")
var mole1 = document.getElementById("mole")
var count = 0
var text = document.getElementById("text")



luigi1.onmousedown = function(){
   luigi1.src=("./Images/luigi-wack2.png")
   mole1.src=("./Images/montymole-idle2.png")
   count ++
   text.textContent = "hits:" + count;
   //HOW DO I DOWNSCALE IMAGE (var mole1) BY 5 PIXLES ONMOUSEDOWN
}
luigi1.onmouseup = function(){
    luigi1.src = ("./Images/luigi-wack1.png")
    mole1.src = ("./Images/montymole-idle1.png")
   //HOW DO I RESCALE IMAGE (var mole1) TO ORIGONAL FORM ONMOUSEUP
}

javascript

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'downscale image by 5 pixels onmousedown

Sources

Related Questions