In this tutorial I will walk you through creating a simple, clickable image that uses the Javascript onmouseover event to change that image when you hover over it with your mouse. For the demo I created a small banner with my Robot Digital Concept Illustration that I previously used to link to the artwork section of my website. You can view all of my illustrations here! And if you're ready to get started, let's get to the tut!
The Demo:
The Tutorial:
First, you'll need a set of two images to use. For my set of two images I created one small banner in Adobe Photoshop in two different colors. You can either use the same image in two colors or different images. Regardless of which option you choose, I recommend sizing both images to the exact same dimensions (width and height).
Second you'll need the HTML code:
<a href=""><img title="" src="" onmouseover="this.src=''" onmouseout="this.src=''" alt="" /></a>
Let's view the code and where to place each piece of information:
Code Review:
<a href="Your website url link goes here"><img title="Your image title goes here" src="Your main image goes here" onmouseover="this.src='Your hover image goes here'" onmouseout="this.src='Your main image goes here again'" alt="Your image alternative text goes here" /></a>
If you have questions regarding image seo and specifics on the image title and alt attributes, view my tutorial on How To Optimize Images With Title And Alt Attributes To Improve SEO For Better Search Engine Results.
Let's view the result:
If you want to have an image with hover capabilities but without it linking to another page or website use this code:
<img title="" src="" onmouseover="this.src=''" onmouseout="this.src=''" alt="" />
Let's view the code and where to place each piece of information:
Code Review:
<img title="Your image title goes here" src="Your main image goes here" onmouseover="this.src='Your hover image goes here'" onmouseout="this.src='Your main image goes here again'" alt="Your image alternative text goes here" />
No comments:
Post a Comment