?
Solved

need to make only the logo clickable on the header

Posted on 2011-03-25
6
Medium Priority
?
338 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:Gurvinder Pal Singh
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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:Gurvinder Pal Singh
Gurvinder Pal Singh earned 800 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 1200 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

777 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