If you need to transform a div, or any other HTML object, into a link here’s how…
Every now and again I need to transform a whole DIV into a hyperlink – say for example if I’m creating a button using a background image.
Using the background-image property in CSS you can place the graphic inside the DIV however because the image is referenced from CSS essentially the DIV is empty so there’s no html on which to hook your link.
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>
To create the link use the following code:
<div onclick=”location.href=’http://yourlinkhere.com/’;” style=”cursor:pointer;”></div>
<div onclick=”window.open(‘http://yourlinkhere.com/’,target=’_blank’,’width=800,height=600′)” style=”cursor:pointer;”></div>
Notice you can also specify the height and width of the new window.
Alternatively if you would like to use a more search engine friendly solution you can still use the <a> tag with href and title attributes. Simply create the DIV with background image as before, now create a 1px by 1px transparent image, drop it into your DIV and resize accordingly – you can now wrap your transparent image complete with ALT text with an <a> tag and title attribute for maximum SEO.
<div><a href=”http://yourlinkhere.com/” title=”button description”><img src=”transparent-image.png” alt=”button description” width=”200″ height=”200″ /></a></div>
Categorised in: Web Design
This post was written by WillyNilly