Um die Klasse dynamisch zu ändern verwenden wir die Universaleigenschaft className.
externe-links-hervorheben.html
<title>Externe Links hervorheben
</title> a.externalURL {
background-image: url('externalURL.png');
background-position: center right;
background-repeat: no-repeat;
margin-right: 3px;
padding-right: 15px;
background-color:#ffeecc;
}
a.externalURL:hover {
background-image: url('externalURLHover.png');
background-position: center right;
background-repeat: no-repeat;
}
</style>
function highlightExternalLinks(ressource) {
var domain = document.location.href.split("/");
var anchors = ressource.getElementsByTagName('a');
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
var destination = String(anchor.getAttribute("href"));
if(destination.indexOf("://") > 0 && destination.split("/")[2] != domain[2])
anchor.className = 'externalURL';
}
}
</script>
</head>
<body onload="highlightExternalLinks(document)">
<li><a href="intern.html">Interner relativer Link
</a></li> <li><a href="http://localhost/intern.html">Interner absoluter Link
</a></li> <li><a href="http://www.easy-coding.de">externer Link
</a></li> </ul>
</body>
</html>
