Solved

how to link to another page using hover

Posted on 2009-05-18
9
304 Views
Last Modified: 2012-05-07
i have a row with 5 column.
i want my first column able to link to other page
i want to use hover so that whenever i point to first column an underline occur and the row change to another color.

0
Comment
Question by:tankergoblin
9 Comments
 
LVL 4

Expert Comment

by:darenceang
ID: 24410495
Not sure if this could help...

<body onMouseOver="location.href='http://www.yahoo.com/';"
bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000">

Open in new window

0
 
LVL 11

Accepted Solution

by:
BrianMM earned 500 total points
ID: 24410506
Hi,

This should do it.
<table width="100%" cellpadding="0" cellspacing="0">
	<tr style="cursor:pointer;width: 250px;" onclick="javascript:location='index.php?mod=batch&act=create'" onmouseover="style.backgroundColor='#A0A0A4';cursor: pointer; cursor: hand;" onmouseout="style.backgroundColor=''">
		<td>row 1 col 1</td>
		<td>row 1 col 2</td>
	</tr>
	<tr style="cursor:pointer;width: 250px;" onclick="javascript:location='index.php?mod=batch&act=create'" onmouseover="style.backgroundColor='#A0A0A4';cursor: pointer; cursor: hand;" onmouseout="style.backgroundColor=''">
		<td>row 2col 1</td>
		<td>row 2 col 2</td>
	</tr>
	<tr style="cursor:pointer;width: 250px;" onclick="javascript:location='index.php?mod=batch&act=create'" onmouseover="style.backgroundColor='#A0A0A4';cursor: pointer; cursor: hand;" onmouseout="style.backgroundColor=''">
		<td>row 3 col 1</td>
		<td>row 3 col 2</td>
	</tr>
</table>

Open in new window

0
 
LVL 11

Expert Comment

by:BrianMM
ID: 24410513
just remove the onlick, if you want the specific link aspect...
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 5

Expert Comment

by:bored321
ID: 24410586
Think this is what you are after.
<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td style="cursor:pointer; width: 200px;" onclick="javascript:location='yourpage.htm'" onmouseover="style.backgroundColor='#eee'; style.textDecoration='underline'; cursor: pointer; cursor: hand;" onmouseout="style.backgroundColor=''; style.textDecoration='none';">row 1 col 1</td> <td>row 1 col 2</td> <td>row 1 col 3</td> <td>row 1 col 4</td> <td>row 1 col 5</td>
  </tr>
</table>

Open in new window

0
 
LVL 11

Expert Comment

by:BrianMM
ID: 24410705
That will only change the colour of the 1st cell, question states row to change colour.
0
 
LVL 7

Author Comment

by:tankergoblin
ID: 24417777
BrianMM:
Your idea looks good but i think is not efficient to declare cursor pointer in every row .
you know any jquery that can do this?
0
 
LVL 7

Author Comment

by:tankergoblin
ID: 24417779
BrianMM:
Your idea looks good but i think is not efficient to declare cursor pointer in every row .
you know any jquery that can do this?
0
 
LVL 11

Expert Comment

by:BrianMM
ID: 24419830
you can assign using a css class. My code was purley a rough guide to show the mechanism.
0
 
LVL 11

Expert Comment

by:BrianMM
ID: 24431969
Have been doing this for years... if you can explain & prove this it would be interesting.
0

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.

Question has a verified solution.

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

Suggested Solutions

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.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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…

820 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