CODEWITHSUNDEEP
javascripthtmlcss
user5626322
user5626322

Reputation:

Change image width/height with Javascript

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;
}

Upvotes: 1

Views: 8517

Answers (3)

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11930

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>

Upvotes: 2

KarelG
KarelG

Reputation: 5244

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>

Upvotes: 1

damiano celent
damiano celent

Reputation: 709

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)";
});

Upvotes: 0

Related Questions