This post explains how to build a link which will display an image when a user hovers over their mouse. This technique could be used to create help balloons or link previews.

OK, lets build the special link one step at a time.

1. Create a link:

   <a href="https://linkpeek.com">website screenshot service</a>
   

2. Add a place holder image like this transparent 1x1 pixel png. Notice that we give the place holder img an id and set some style attributes.:

   <a href="https://linkpeek.com">
     website screenshot service
     <img src="/theme/img/linkpeek-transparent-pixel-placeholder.png" id="place-holder-1" style="zindex: 100; position: absolute;" />
   </a>
   

3. Add Javascript to change the place holder image onmouseover:

   onmouseover="document.getElementById('place-holder-1').src='https://linkpeek.com/api/v1?uri=http%3A//linkpeek.com&apikey=9fhvyH9KP&token=ada234417193f502523a7d1da2ef1501&size=336x336';"
   

4. Add Javascript to change back to the place holder image onmouseout:

   onmouseout="document.getElementById('place-holder-1').src='/theme/img/linkpeek-transparent-pixel-placeholder.png';"
   

5. Lets put it all together:

   <a href="https://linkpeek.com"
     onmouseover="document.getElementById('place-holder-1').src='https://linkpeek.com/api/v1?uri=http%3A//linkpeek.com&apikey=9fhvyH9KP&token=ada234417193f502523a7d1da2ef1501&size=336x336';"
     onmouseout="document.getElementById('place-holder-1').src='/theme/img/linkpeek-transparent-pixel-placeholder.png';"
   >
     website screenshot service
     <img src="/theme/img/linkpeek-transparent-pixel-placeholder.png" id="place-holder-1" style="zindex: 100; position: absolute;" />
   </a>
   

And finally our result:

website screenshot service

Pretty neat huh?

How to make this method better?:

• make the hover effect look better with more css styling
• move all styles into a reusable class
• move all classes into a reusable CSS stylesheet
• move the onmouseover and onmouseout toggle into a reuseable Javascript function
• move all Javascript into a reusable file
• wrap everything up into a downloadable library project

Update: We did a follow-up post images on hover-lib to cover the ideas listed above.