CODEWITHSUNDEEP
javascripthtml
Roberts Šensters
Roberts Šensters

Reputation: 605

How to slowly enlarge image with javascript onmouseover

Only Javascript , no jQuery!

HTML:

<div class="mid">
    <img onmouseover="lielaBilde(this)" onmouseout="mazaBilde(this)" src="bilde.png" alt="bilde"/>
</div>

JS:

function lielaBilde(x) {
x.style.height = "121px";
x.style.width = "181px";
}

function mazaBilde(x) {
x.style.height = "121px";
x.style.width = "121px";
}

I want to create so that my img increases from 121px to 182px overtime. For example in 3 seconds slowly zooming in. At the moment it's just instant enlarging.

Upvotes: 1

Views: 1058

Answers (7)

Vatsal Pathak
Vatsal Pathak

Reputation: 68

You can do it by simply adding css no need to add any javascript or jQuery for it.

.mid{
 width: 300px;
 height: 300px;
 background: #222;
 -webkit-transition: width 2s ease, height 2s ease;
 -moz-transition: width 2s ease, height 2s ease;
 -o-transition: width 2s ease, height 2s ease;
 -ms-transition: width 2s ease, height 2s ease;
 transition: width 2s ease, height 2s ease;
}

.mid:hover {
 width: 121px;
 height: 181px;
}

Upvotes: 1

Ismail Farooq
Ismail Farooq

Reputation: 6807

Its working... so May be your function is not working because

1 - You are giving wrong path of your js file.

2 - Your Function is in the head tag. In this case you need to move your JavaScript after the body tag see here

function lielaBilde(x) {
  x.style.height = "121px";
  x.style.width = "181px";
}

function mazaBilde(x) {
  x.style.height = "121px";
  x.style.width = "121px";
}
<div class="mid">
  <img onmouseover="lielaBilde(this)" onmouseout="mazaBilde(this)" src="http://placehold.it/121x121" alt="bilde" />
</div>

Upvotes: 0

Jack jdeoel
Jack jdeoel

Reputation: 4584

You can set css3 properties in your function...

function lielaBilde(x) {
x.style.WebkitTransition = 'width 3s ease';
x.style.MozTransition = 'width 3s ease';
x.style.height = "121px";
x.style.width = "181px";
}

Upvotes: 0

Munawir
Munawir

Reputation: 3356

Use setInterval() and clearInterval() 

function lielaBilde(x) {
  var height, width;
  myVar = setInterval(function(){
    height = parseInt(x.style.height);
    width = parseInt(x.style.width)+1;

    x.style.height = height + "px";
    x.style.width = width + "px";
    if(width==181)
      clearInterval(myVar);
  }, 50);
  
}

function mazaBilde(x) {
  clearInterval(myVar);
  x.style.height = "121px";
  x.style.width = "121px";
}
<div class="mid">
    <img onmouseover="lielaBilde(this)" onmouseout="mazaBilde(this)" src="http://placehold.it/121" alt="bilde" style="height:121px; width:121px"/>
</div>

Upvotes: 0

Frederick
Frederick

Reputation: 169

As commented by Nitsan Baleli, you can use CSS transition. Additionally, CSS also supports :hover selector thus giving this a bit more easy to do.

HTML: 

<div class="mid>
    <img src="bilde.png" alt="bilde"/>
</div>

CSS:

div.mid img:hover {
   transform: scale(1.1);
}

Upvotes: 0

afrose
afrose

Reputation: 169

function lielaBilde(x) {
var pos=121;
 var id = setInterval(frame, 3);
 function frame() {
    if (pos == 181) {
      clearInterval(id);
    } else {
      pos++; 
      x.style.height= pos + 'px'; 
      x.style.width= pos + 'px'; 
    }
  }

}

Try this for mouseover. Pure javascript

Upvotes: 0

bhaskarmac
bhaskarmac

Reputation: 339

You can use the CSS as shown below.

.mid img {
    width: 100px;
    height: 100px;
    -webkit-transition: width 2s, height 2s;
    transition: width 2s, height 2s
}
.mid img:hover {
    width: 181px;
    height: 181px;
}

No Javascript needed.

Upvotes: 0

Related Questions