Solved

need to make only the logo clickable on the header

Posted on 2011-03-25
6
335 Views
Last Modified: 2012-05-11
Hi!

I have a header at the top of this page.
http://www.orlando-web-hosting.net/
Currently, the whole header is clickable.
I need only the logo clickable and would like to move as much of this code into a CSS rule.

I am currently using the below listed code:

<tr>
                <td><a href="/"><img src="images/owh_header.gif" style="width:750px;height:128px;border:0px" alt="Orlando Web Hosting LLC - Providing full service web and e-mail hosting, Site Studio site creator, e-commerce cart, ssl certificates and domain registration. Located in Orlando, Florida."></a></td>
</tr>

Any specific code modifications would be appreciated.
0
Comment
Question by:TrueBlue
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 9

Expert Comment

by:jkofte
ID: 35214690
you can use image mapping for that.

check this link. it is pretty easy.

http://www.w3schools.com/TAGS/tag_map.asp
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35214710
try using image Map and do not use anchor tag

<img src="images/owh_header.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
\\put the coordinates of the logo above
</map>
0
 

Author Comment

by:TrueBlue
ID: 35214761
I would greatly appreciate a more specific answer.
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 9

Expert Comment

by:jkofte
ID: 35214794
<td><img src="images/owh_header.gif" style="width:750px;height:128px;border:0px" alt="Orlando Web Hosting LLC - Providing full service web and e-mail hosting, Site Studio site creator, e-commerce cart, ssl certificates and domain registration. Located in Orlando, Florida." usemap="#map1">
<map name="planetmap">
  <area shape="rect" coords="0,0,120,120" href="/index.html" alt="Orlando Web Hosting" /> 
</map>
</td>

Open in new window

0
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 200 total points
ID: 35214803
when you use image mapping, you can specify a specific spot on the image to be used as a link. In your case, you don't need the wrapper of anchor tag on the img tag

<img src="images/owh_header.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="17,6,63,94" href="/"/>
</map>
0
 
LVL 9

Accepted Solution

by:
jkofte earned 300 total points
ID: 35214804
<map> name should be map1 here.


<td><img src="images/owh_header.gif" style="width:750px;height:128px;border:0px" alt="Orlando Web Hosting LLC - Providing full service web and e-mail hosting, Site Studio site creator, e-commerce cart, ssl certificates and domain registration. Located in Orlando, Florida." usemap="#map1">
<map name="map1">
  <area shape="rect" coords="0,0,120,120" href="/index.html" alt="Orlando Web Hosting" /> 
</map>
</td>

Open in new window

0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question