Solved

need to make only the logo clickable on the header

Posted on 2011-03-25
6
301 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
  • 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Adding a Li to a UL after a specified Li contents 2 47
iframe detection of parent window scale 20 60
Change javascript css 1 20
hosting images 4 12
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

867 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

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now