The link and visited properties of the links on my web pages are the same color as text (black), while hover and active properties are green.
In order to help the user get the overall picture of the page links, I need JavaScript that will use an area or text (e.g. "Show all the links on this page.") to colorize (e.g. in blue) all the links on the page on mouseover, and return the regular link properties on mouse-out.
a more CSS oriented solution could work like the following:
prepare the highlight of all <a> by a container class (which you don’t set by default). - .highlight a {
-
/* your highlight CSS */
-
}
with onmouseover, you set this class name to the document body, so that the CSS kicks in. - // execute on mouseover
-
function enlighten()
-
{
-
document.body.className = "highlight";
-
}
undo this on mouseout.
8  2629  - document.getElementById('show_all_links').onmouseover = function() {
-
var a = document.getElementsByTagName('a');
-
for (var i = 0; i <a.length; i++) if (a[i].href != "") a[i].style.color = 'blue';
-
}
.... similarly for onmouseout.
a more CSS oriented solution could work like the following:
prepare the highlight of all <a> by a container class (which you don’t set by default). - .highlight a {
-
/* your highlight CSS */
-
}
with onmouseover, you set this class name to the document body, so that the CSS kicks in. - // execute on mouseover
-
function enlighten()
-
{
-
document.body.className = "highlight";
-
}
undo this on mouseout.
@hsriat
Hi hsriat,
Thanks!
This works fine.
In case there are some pre-styled links on the web page besides the black links, would it be possible to make the function scan the page, pick up and store all of the original link styles (for link, visited, hover, active states), highlight all the links on the page in a desired color (e.g. blue), and restore all the original link styles on mouseout?
Regards,
Hendsome
@Dormilich
Hi Dormilich,
Your suggestion looks cool, and I suppose it would preserve the pre-styled links on the page, but it only highlights the line that is used for mouseover.
Regards,
Hendsome
but it only highlights the line that is used for mouseover.
where did you apply the class to?
@Dormilich - <style type="text/css">
-
.highlight a {
-
color: #039;
-
}
-
</style>
-
<body>
-
<script language="JavaScript">
-
function enlighten()
-
{
-
document.body.className = "highlight";
-
}
-
function normal()
-
{
-
document.body.className = "";
-
}
-
</script>
-
<a href="#" onMouseOver="enlighten();" onMouseOut="normal()">Mouseover to see the links on this page.</a>
-
...
-
</body>
@Dormilich
I tested it again. It works all right.
Thanks.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Sugapablo |
last post by:
Can anyone help me out with some code to change three table cells
(<td>) when one is hovered over?
I have a calendar grid where each day is made up of three table cells and
I want all three to...
|
by: Robbo |
last post by:
Hello, I created a datagrid with a few hyperlink columns.. How do i change
the color of the hyperlink itself? BLUE is a bit bad on my datagrid
color scheme.
Thanks,
Rob
|
by: HS1 |
last post by:
Hello all
Do you know how to change color of a button when the mouse is over it (like
a button in manu bar can change its color in a website) in VB.net
Thank you
S.Hoa
|
by: Mamatha |
last post by:
Hi
I want to change the color of icon,How it can be opened?
and how can i change color.
If any one knows please let me know
Thanks in advance.
Mamatha
|
by: Vd |
last post by:
How do I change color of the tab. I have changed the
color, but when I run the application the color is still
using the original color which is the control color.
|
by: TonyVal - MSDN News |
last post by:
Hi All,
Anyone know how to change color for a 3D button like this button control
does?
http://www.econtechvn.com/en/aquabutton_detail.htm
I see it is really cool. But, don't know how to do...
|
by: sr |
last post by:
please help
i have problem:
I know how to change color row in table when my mouse is over on this row
and change color to another color when my mouse is out from this row.
but i dont know how to...
|
by: The Bicycling Guitarist |
last post by:
Hello. I have a navigation bar at the top of all my pages with css-styled
buttons that change color when hovered over. I am a little confused on how
to disable that for the link that the page is...
|
by: nma |
last post by:
Hi
How do I make the cell change color to 'black' after I click on it. The cell will remain black color until I click another cell which will also change to black. I can do the mouseover and...
|
by: prabhuaradhan |
last post by:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
| |
