Solved

How to link an entire table row?

Posted on 2014-02-17
4
194 Views
Last Modified: 2014-03-17
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
Comment
Question by:ExchangeMe
  • 2
4 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39865937
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
 
LVL 18

Accepted Solution

by:
zc2 earned 500 total points
ID: 39866029
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
 

Author Comment

by:ExchangeMe
ID: 39866271
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
 
LVL 18

Expert Comment

by:zc2
ID: 39866461
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

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

831 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