Change image width/height with Javascript

Question

New to Javascript here, I've been trying to change the size of an image (width/height) in an HTML page whenever a mouseover occurs, however it doesn't seem to work if the styles are set in the CSS page, which is a huge problem for me since I need to use the position property to set the image location.

Here's the code.

HTML:

<a  href="#"  onMouseOver="big()" onMouseOut="small()">
<img src="img1.png" name="image1" id="mw">
</a>

CSS:

#mw
{
    position:absolute;
    left:15%;
    top:35%;
    width:146px;
    height:97px;
}

jS:

function big()
{
    document.getElementsByName("image1").style.width=183;
    document.getElementsByName("image1").style.height=121;
}
function small()
{
    document.getElementsByName("image1").style.width=146;
    document.getElementsByName("image1").style.height=97;
}

Fix your problem. jsbin.com/qicugikeza/edit?html,css,js,console,output — Vuong
– Vuong, Commented Jan 17, 2016 at 13:47

Medet Tleukabiluly · Accepted Answer · 2016-01-17 13:57:08Z

2

Simple javascript version, style not required

var element = document.getElementsByName("image1")[0];
element.setAttribute('width', 146);
element.setAttribute('height', 97);

function big() {
  element.setAttribute('width', 183);
  element.setAttribute('height', 121);
}

function small() {
  element.setAttribute('width', 146);
  element.setAttribute('height', 97);
}

<a href="#"  onMouseOver="big()" onMouseOut="small()">
  <img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" name="image1" id="mw">
</a>

answered Jan 17, 2016 at 13:57

Medet Tleukabiluly

12k3 gold badges38 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KarelG · Accepted Answer · 2016-01-17 13:47:57Z

1

You can solve it by CSS only. There is a :hover-pseudo class which gets activated once you hover a specific element. For your request, there is no need to use JavaScript.

#mw:hover {
    width: 183px;
    height: 121px;
}

What the above CSS snippet does is: "change width and height to respectively 183px and 121px if you hover an element with id mw".

Here below is an example of it. click on "Run code snippet" and try to hover the rubic image.

#mw {
  position: absolute;
  left: 15%;
  top: 35%;
  width: 146px;
  height: 97px;
}

#mw:hover {
  width: 183px;
  height: 121px;
}

<a href="#">
  <img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" name="image1" id="mw">
</a>

answered Jan 17, 2016 at 13:47

KarelG

5,2544 gold badges35 silver badges53 bronze badges

Comments

damiano celent · Accepted Answer · 2016-01-17 13:46:46Z

0

Just do this:

a:hover {transform:scale(1.5,1.5);}  <here you can set the x and y scaling

with JS you can:

document.getElement etc.addEventListener("your event", function(event){
event.target.style.transform = "scale(1.5,1.5)";
});

answered Jan 17, 2016 at 13:46

damiano celent

7096 silver badges12 bronze badges

Collectives™ on Stack Overflow

Change image width/height with Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related