Solved

How to link an entire table row?

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

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
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:

707 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

13 Experts available now in Live!

Get 1:1 Help Now