Solved

How to link an entire table row?

Posted on 2014-02-17
4
197 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
[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
  • 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

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

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

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
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 benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

730 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