Solved

How to link an entire table row?

Posted on 2014-02-17
4
192 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

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn how to count occurrences of each item in an array.

896 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

14 Experts available now in Live!

Get 1:1 Help Now