css – Place a html link on part of a background image only, typo3 site.-ThrowExceptions

Exception or error:

I have taken over a website that was coded in tables (looks like DW) and is half coded in typo3 CMS and half hard coded.

Anyway, my boss has asked me to make the logo clickable to link to the homepage from every page that the logo shows. The problem is that the logo is part of the whole image that makes up a third of the page, so linking the whole image is out of the question.

I don’t want to have to restructure and slice the images to separate the logo from the BG image, so is it possible to place a link section over the logo only?

I thought about an empty div that sits over the logo section only with a link tag that fills it 100%, is this possible and would it work? The site is here http://overbeckanalytics.com/typo3/menu-top/about-us.html… you can save the BG image and see its not just the logo…

Please tell me how I can make a link that sits over the logo only on that image.

How to solve:

Is the background image on the <body> element? If so, this should work:

<body>
    <a href="http://example.com/" id="logo_link">Example Company</a>
</body>

With this CSS:

a#logo_link {
    position: absolute;
    display: block;
    visibility: hidden;
    left: 42px;
    top: 42px;
    width: 42px;
    height: 42px;
}

Note the <a> tag needs to be directly inside the <body> tag, or else the position may be incorrect. It can be anywhere in the body tag however, at the beginning or the end.

I’ve also placed the company name inside the link, since it’s a bad idea to have a link without any text. A blank link cannot be understood by browsers designed for disabled users, and it may trigger spam algorithms in search engines. The visibility property will make the link invisible, even though it is still there and can be clicked on.

###

I provided an example answer. If you’re allowed to load a JQuery library and can place the anchor somewhere on the page.

http://jsfiddle.net/XFvQD/

###

You would be looking for something like this:

<html>
<body>
<img src="http://listphobia.com/wp-content/uploads/honda-v4-concept1.jpg"/>
<a href="http://www.google.com" style="border: 1px solid red; position: absolute; top: 15px; left: 50px; width: 30px; height: 30px;"></a>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *