Rollover Image

Rollover Image

Rollover images can be useful features in some websites, there are a couple of ways you can implement them into your website; the easiest way is to use Dreamweaver which inputs the <a title="HTML" href="http://code.emrysproductions.com/wiki/html/">HTML</a> and JS. If you don’t want to use JS you can use pure HTML and <a title="CSS" href="http://code.emrysproductions.com/wiki/css/">CSS</a>.

<strong>Dreamweaver Rollovers</strong>
<iframe width="560" height="315" src="https://www.youtube.com/embed/5jNUGGHqbdU" frameborder="0" allowfullscreen></iframe>

<strong>Pure HTML &amp; CSS</strong>
<iframe src="//jsfiddle.net/mapster86/yxvrf5gd/embedded/html,css,result" width="100%" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

One thing to bear in mind when deciding which method to use is that some browsers may have JS switched off in their settings, obviously if this is the case your rollover isn’t going to work, so from a redundancy point of view it may be better to use the Pure HTML & CSS Method.