[JavaScript] JavaScript learning 33 JavaScript Animation

We can use JavaScript to create dynamic images.

Instance

Button Animation

Two different events are used to drive two corresponding functions, and two corresponding images are switched to create an animation effect.

Javascript Animation

It is feasible to create dynamic images using JavaScript.

TipsYes: use JavaScript to switch between different images through different events.

In the following example, we want to create an image that acts as a link button. We will use the onmouseover event and onmouseout event to drive JavaScript function to switch images.

HTML code

Here is the HTML code:

<a href="http://www.w3school.com.cn" target="_blank"></a>

Note: We have added the name attribute for the image so that javascript can find it.

The onmouseover event informs the browser that, once the mouse is hovering over the image, the Browser executes a function that replaces this image with another one.

The onmouseout event informs the browser that once the mouse leaves the image, the browser will execute another function, which will re-insert the original image.

JavaScript code

Use the following code to switch images:

<script type="text/javascript">function mouseOver(){document.b1.src ="/i/eg_mouse.jpg"}function mouseOut(){document.b1.src ="/i/eg_mouse2.jpg"}</script>

The function Mouseover () switches the image to "eg_mouse.jpg ".

The function mouseout () switches the image to "eg_mouse2.jpg ".

Complete code:

mouseOver()  {  document.b1.src ="/i/eg_mouse.jpg"  }function mouseOut()  {  document.b1.src ="/i/eg_mouse2.jpg"  }</script> /></a></body>