Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 209
  • Last Modified:

How to link an entire table row?

I would like to link an entire table row to an image.  I am fairly new to html / java.  So any help would be greatly appreciated.

Here is what I am currently doing with the html code but this only allows me to highlight the rows and I still have to click on the actual names.  This isn't intuitive enough for my visitors.

<table class="product-table" id="allitems">
	  <tr></tr>
<th colspan="6">TABLE TITLE</th>
  <!--ROW 1 HEADER-->
<tr class="url-1">
  <td class="main">DES1</td>
  <td class="main">DES2</td>
  <td class="main">DES3</td>
  <td class="main">DES4</td>
  <td class="main">DES5</td>
  <td class="main">DES6</td>
</tr>
<!--ROW 2-->
<tr class="url-2">
  <td class="part"><div class="picture"><a href="images/products/main.jpg" rel="image" title="main">main</a></div></td>
  <td><div class="picture"><a href="images/products/image1.jpg" rel="image" title="1">image1</a></div></td>
  <td><div class="picture"><a href="images/products/image2.jpg" rel="image" title="2">image2</a></div></td>
  <td><div class="picture"><a href="images/products/image3.jpg" rel="image" title="3">image3</a></div></td>
  <td><div class="picture"><a href="images/products/image4.jpg" rel="image" title="4">image4</a></div></td>
  <td><div class="picture"><a href="images/products/iamge5.jpg" rel="image" title="5">image5</a></div></td>
</tr>
</table>

Open in new window

0
ExchangeMe
Asked:
ExchangeMe
  • 2
1 Solution
 
Chris StanyonCommented:
Not sure I follow - your code currently has 6 links in the row, all linking to different images.

If you're asking how you can turn an image into a link, just wrap the IMG tag inside the A tag:

<a href="images/products/image1.jpg" rel="image" title="1"> <img src="images/products/image1.jpg"></a>

Open in new window

FYI - your opening header row is wrong - you need to wrap the TH inside of the TR:

<tr>
   <th colspan="6">TABLE TITLE</th>
</tr>

Open in new window

0
 
zc2Commented:
if you want to show an image when the user clicks on any part of the row, you could set the onclick handler to the row itself:
<tr class="url-2" onclick="window.location.href='images/products/image1.jpg'">

Open in new window

0
 
ExchangeMeAuthor Commented:
ZC2,

Thank you this is pretty much what I am looking to accomplish.  Is there any way to incorporate lightbox into this scenario?

Thank you
0
 
zc2Commented:
Yes, why not.
Please look at the following article :
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/.

You will find they also handle the onclick event similar as I suggested. (but in your case the active element is <tr>, not an <a>)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now