PDA

Click to See Complete Forum and Search --> : Links

the tree
07-02-2004, 09:02 AM
Is there some way that I can make different links look different? To be more specific, an absolute reference be one colour and a relative reference another colour.

Did that make sense? Sorry if it didn't.
Fang
07-02-2004, 11:23 AM
Give them different classes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>link color</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.LinkAbsolute {color:red;}
.LinkRelative {color:green;}
-->
</style>
</head>
<body>
<a class="LinkAbsolute" href="http://www.mysite.com/absolute.html" title="absolute">absolute</a>
<a class="LinkRelative" href="/relative.html" title="relative">relative</a>
</body>
</html>
ray326
07-02-2004, 01:31 PM
If you wanted to do it "automagically" and you KNOW your users will have Javascript enabled then you could use the DOM to scan all the links in the page and set their styles accordingly.
the tree
07-02-2004, 05:24 PM
Well I pretty sure that all my vistors will have js but what is the 'DOM'?
Fang
07-02-2004, 06:07 PM
A DOM (http://www.mozilla.org/docs/dom/domref/) reference.
With it you can get a list of all anchors:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//<![CDATA[
<!--
// all JavaScript here
function DOMsearch() {
var arrayA=document.getElementsByTagName('a'); // array of anchors
for(var i=0; i<arrayA.length; i++) {
if(arrayA[i].getAttribute('href').search(/http:/)!=-1) { //find an absolute link
arrayA[i].className='LinkAbsolute'; //change it's class
}
}
}
//-->
//]]>
</script>
<style type="text/css">
<!--
a {color:green;}
.LinkAbsolute {color:red;}
-->
</style>
</head>
<body onload="DOMsearch();">
<a href="http://www.mysite.com/absolute.html" title="absolute">absolute</a>
<a href="/relative.html" title="relative">relative</a>
</html>
Ben Rogers
07-02-2004, 08:08 PM
If you mean you want to style offsite links one way, and onsite links another, then the following might work for you: http://www.ryanbrill.com/archives/designating-offsite-links/
ray326
07-02-2004, 11:40 PM
Bravo, Fang!
fredmv
07-03-2004, 10:17 AM
arrayA[i].getAttribute('href').search(/http:/)!=-1Would return true if http: is present anywhere in the string and further, it's case sensitive. So for good measure, I'd use:/^http:\/\//i.test(arrayA[i].getAttribute('href'))
Fang
07-03-2004, 01:06 PM
!arrayA[i].getAttribute('href').search(/http:/i)
ray326
07-03-2004, 10:15 PM
/^http:/i if you want to force it to the beginning of the string.
Fang
07-20-2004, 06:11 AM
Vacational bump
ray236 wrote/^http:/i if you want to force it to the beginning of the string
Not necessary,
!arrayA[i].getAttribute('href').search(/http:/i) is true if http: is at the beginning of the string (returns 0, the first character)
ray326
07-21-2004, 09:11 PM
Welcome back, Fang. What I was saying was /^http/ will match ONLY if it begins the string. Without the ^ it will match http: anywhere in the string.
Fang
07-22-2004, 03:30 AM
I think you missed the conditional !
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//<![CDATA[
<!--
// all JavaScript here
function DOMsearch() {
var arrayA=document.getElementsByTagName('a'); // array of anchors
for(var i=0; i<arrayA.length; i++) {
if(!arrayA[i].getAttribute('href').search(/http:/)) { //find an absolute link
arrayA[i].className='LinkAbsolute'; //change it's class
}
}
}
//-->
//]]>
</script>
<style type="text/css">
<!--
a {color:green;}
.LinkAbsolute {color:red;}
-->
</style>
</head>
<body onload="DOMsearch();">
<a href="http://www.mysite.com/absolute.html" title="absolute">absolute</a>
<a href="/relative/http:.html" title="absolute">relative http:</a>
<a href="/relative.html" title="relative">relative</a>
</html>