HTML coding to create image rollover effect

When used in moderation an image rollover effect can be an intriguing graphic element for a website user. Here is a little 'quick tip' html guide.

As opposed to insert pictures using a WYSIWYG editor in the website content management tool, this image hover effect needs to be included via html coding.


HTML code example

Find a container that allows to enter raw html script code, paste this html code in and change the code elements as explained:

<a href="Target URL"><img src="Image-A as seen without mouse hover" onmouseover="this.src='Image-B that should appear on mouse-over'"  onmouseout="this.src='Image-A as seen without mouse hover'"  /></a>


Our rollover, hover, or mouse-over picture example

marketing definitions marketing examples marketing tips

Using alt-text for additional SEO information

In order to tell the search engines a bit more about that image and the content, it is recommended to use descriptive alt-text in the html code snippet. But do it in moderation so your webpage is not flagged for spamming with excessive amounts of search words. 

<a href=""><img src="URL for our black-white logo" alt="marketing definitions marketing examples marketing tips" onmouseover="this.src='URL for our colored logo'" onmouseout="this.src='URL for our black-white logo'"  /></a>

As with any search engine optimization effort, make sure to research the most effective keywords for the content on your web page.

When linking an image from one web entity to another, alt-text can also draw a context bridge between the web pages or even web sites when external links are used. And as you know: every little search engine optimization effort helps.

As long as you have the users in mind and try to help the Google's of the world to understand your content and the the meaning of your on-page elements and your links.


Marketing EffectivenessMarketing Mix StrategyMarketing Communication & CampaignsMarket Message ManagementContent Creation & Copy Writing