Please read through this page to learn about image swaps. Complete the activity at the bottom if you are interested, it is not mandatory.
Hover over the image to see what this caterpillar turns into.
This technique can be used for simple interactions on a page where one image has a relationship with another. The setting of one image on a page with another revealed on a hover, or on a click can be a pedagogically sound way to have students investigate something in steps.
Here’s how it works.
<img src="http://3bees.ca/utility/images/monarch-caterpillar-2.jpg" onMouseOver="this.src='http://3bees.ca/utility/images/monarch-butterfly.jpg'" onMouseOut="this.src='http://3bees.ca/utility/images/monarch-caterpillar-2.jpg'" />
Note that in this example ‘this.src’ means the ‘src’ attribute of the element where the ‘onMouseOver’ or ‘onMouseOut’ method is being used. If you wanted the alternate images to persist for longer examination, you could instead use the ‘onClick’ method instead of ‘OnMouseOut’ to change them back – see below.
<img src="http://3bees.ca/utility/images/monarch-caterpillar-2.jpg" onMouseOver="this.src='http://3bees.ca/utility/images/monarch-butterfly.jpg'" onClick="this.src='http://3bees.ca/utility/images/monarch-caterpillar-2.jpg'" />
Your images must be hosted on a web server for this to work online. You can still test it on your local machine, just make sure the path to your images is relative to the placement of your webpage file.
Use the media library in your WordPress blog to host your images. You can get the URL of these images by editing the images within your media library – the image URL should be displayed at the right of the page.
Try your own image swap
This HTML will work directly in a WordPress blog as it doesn’t include functions. Find or create your own two images that you would like to swap like this and integrate them into a page that supports a specific learning outcome. Put your page up in a post on your blog and check out some of the posts put up by other students.