URL LINK CLOAK OF INVISIBILITY: Code to Make ANYWHERE on Your HTML Page a Clickable Zone (to the URL of your choice) – This Code Can Be Placed ANYWHERE in Your HTML and Affect a Whole Other Area! (Amazing!) Oh wow, I just found a really awesome HTML technique that does something I never knew was possible – cool!
Ok, I’m redesigning my FreeCashPro.com site (WordPress powered) and long ago I fell in love with the ‘Expound’ theme but ever since I applied that theme there’s been one thing that I really hated about it – the header (logo at the top) image doesn’t link to anything and the theme doesn’t make any accommodations to make it clickable.
Most sites that I run across have a clickable header image that will take you back to the home page of the site and I’ve always found this feature very helpful and intuitive – I couldn’t see leaving my own site without a clickable logo.
The expound theme seems to place that particular image there from within a CSS along with some difficult custom coding elsewhere. For over a year I had tried various things to try to get the header clickable. I’ve been through all kinds of code including one pretty complicated snippet that was supposed to work from within the CSS itself (but I couldn’t get it to work)
Tonight I’m redesigning the site so I thought I’d give it another shot by googling the theme name (‘expound’) and the word ‘clickable’. I was amazed by how many people out there had the same issue I had with that theme. It turns out that making the logo clickable is a paid option that the theme designer intentionally made difficult so that you buy that option (wtf! That’s bullshit in my book!) Most all of the other themes I know of have a clickable logo option – a standard expected feature!
Anyways, here’s the cool code I’m writing this post about (sorry it took me so long to get to it) Apparently, in HTML there’s a way to place this code ANYWHERE on your page and it will transparently make whatever portion of that page you specify to be clickable and link to wherever you want it to !?! How cool, huh?
Here’s the code that someone was nice enough to give all of us ‘expound’ theme users that links the header image zone to whatever we want it to link to:
<div align="center" style="position:absolute;width:100%;top:40px;right:0;">
<a href="http://www.freecashpro.com/"><div style="width:1020px;height:154px;"></div></a>
…and it can be placed ANYWHERE on the page (even inside a sidebar widget) and because of it’s use of absolute positioning then it acts upon my header logo image. Cool, huh? Of course you’ll need to adjust the parameters for your particular use (like what the coordinates are to position your ‘link cloak of invisibility’ – lol)
I can also think of some other non-so-nice uses for such code (like to replace links on/over ‘ad supported’ zones (he he)) but I’m not usually into doing sneaky crap like that.
Oh, and to give credit where it’s due then I found this happy little snippet here (in the ‘justpi’ post): https://en.forums.wordpress.com/topic/header-images-on-expound-theme WORKS LIKE A CHARM …and if that topic wasn’t already closed then I would have posted to thank him as well 😉
I don’t know, maybe this is something only a novice-intermediate coder (like me) would get excited about… (lol)