How to Create Image Transformations with JavaScript

In another tutorial we looked at how to use the CSS background-image property and :hover selector to create an interactive image that changed when a user moved their mouse over the image. In that example, we started with a gray home icon and transformed it into an orange icon. In this tutorial, we’ll look at another way to accomplish the same thing using JavaScript.

When Should You Use CSS vs JavaScript

CSS is the language used to define website layout and create simple animations. JavaScript is used to add interactivity based on website user feedback and activity. There are places where the capabilities of CSS and JavaScript overlap. This overlap raises the question: which should you use? The answer to that question isn’t a simple one, and many opinions have been expressed on the topic. Some say that you should use CSS in virtually every case and only use JavaScript when no other tool can do the job. Others offer a completely opposite argument that JavaScript should replace CSS entirely. In practice, most developers simply use the language they are most familiar with, even if it isn’t the best choice for the task at hand. We aren’t going to weigh in on the debate. We’re going to let you make up your own mind on the matter and instead focus on showing you how to use both CSS and JavaScript. A previous tutorial already demonstrated how to accomplish this transition using CSS. You can see it here. The rest of this tutorial will teach you how to use JavaScript for this common task.

The Code Behind the Transformation

Here is the JavaScript and HTML code used to create the transformation.

<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')"> <img src="../path/original_image.file" name="home" alt="Home Page"> </a>  <script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> 

Let’s take those pieces of code one at a time so we can understand what’s going on.

The Anchor Element

The first line of code we see is an anchor element.

<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')" > 

Since our example involves linking a home icon to the website homepage, the href attribute would point to our website homepage. Next comes the onmouseover JavaScript event. This is the event that will occur when the mouse hovers over the anchor element. In this case a function named rollover is called, and effects the item with the name ‘home’. Finally, we have the onmouseout event which calls the rollout function, which once again affects the item with the name ‘home’.

The Image Element

Nested within the anchor element is our image element.

<img src="../path/original_image.file" name="home" alt="Home Page"> 

We will use the image element to load the image which will appear when the mouse is not hovering over the anchor element. In the case of our example, we’ll be loading the gray house icon. Next comes the name attribute. We use this attribute to give the JavaScript away to identify the HTML element that we want to modify with the script. Take a quick look back at the anchor element and notice how both functions use the parameter ('home'). The attribute name="home" is how the JavaScript functions identify the image element as the item to be acted on.

The Script

Lastly, we have a very short script.

<script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> 

This script sets a value for the rollover function which is called by the onmouseover triggered when a viewer’s mouse hovers over the image.

Putting it All Together

If we put the anchor, image, and script all together here’s what we get.

Simplify the Code with jQuery

jQuery is a JavaScript library that allows you to create just about any sort of JavaScript animation or transformation with less code. If we wanted to use jQuery to create the same transformation, here’s what the code would look like.

<a href="home_url"> <img src="../path/original_image.file" id="home" alt="Home Page"> </a>  <script> jQuery.('#home').hover(  function(){ $(this).attr( 'src' , 'hover-image.file' ) },  function(){ $(this).attr( 'src' , 'original-image.file' ) } ); </script> 

The nice thing about using jQuery is that we no longer have to add event handlers to the HTML itself (remember the onmouseover and onmouseout events from the original code?). One of the best things about jQuery is that it can add the event handlers dynamically. This allows for greater separation between the script and the HTML content and is a better way of coding. As you can see, the HTML is a lot cleaner if we use the jQuery library and the end-result is the same.

jQuery.(‘#home’).hover( function(){ $(this).attr( ‘src’ , ‘home168-1.png’ ) }, function(){ $(this).attr( ‘src’ , ‘orange_home.png’ ) } );

Adding jQuery to a Website

One thing to keep in mind if you do decide to use this code on your own website is that the jQuery library must be loaded by the browser on every page where a jQuery script is used. JavaScript is supported by every modern browser. However, the jQuery library must be added to the browser in order for jQuery scripts to process. There are two ways to add jQuery to a website.

1. Download jQuery from the jQuery Foundation and upload it to your web server.
2. Link to a publicly hosted jQuery library.

The easiest way to add jQuery to a website is to link to a jQuery library already hosted on the web. You can load the jQuery library hosted by Google by pasting the following line of code into the head element of your website.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

Jon Penland

Jon is a freelance writer, travel enthusiast, husband and father. He writes about web technologies such as WordPress, HTML, and CSS.