• Howdy! Welcome to our community of more than 130.000 members devoted to web hosting. This is a great place to get special offers from web hosts and post your own requests or ads. To start posting sign up here. Cheers! /Peo, FreeWebSpace.net
managed wordpress hosting

Colored Underline Rollovers

B

Berserkir

New Member
Can anyone tell me how a rollover with an underline color different from the text color is used? To see what I mean, roll your mouse over the links at this site. The text is black or white, but the underline that appears once you hover over the link is a light blue.
 
Hey Berserkir,

I'm no CSS expert, but I hunted through the css file on that site, and I think these are the relevant portions:
Code: 
a:active, a:hover {
	color: #7DA7D9;
	text-decoration: underline;
}
<snip>
span.link {
	color: #e7e7e7;
}
He's got the text of the links surrounded by <span> tags, like this:
Code: 
<a href='whatever'><span class='link'>Some text</span></a>
So it looks like, thanks to the 'cascading' nature of CSS, the rules are applied correctly. Normally the link would be the light blue color "#7DA7D9", but because the span comes after the <a></a> tags, it gets the "#e7e7e7" color applied. The underline isn't affected by the span tag, so it remains the light blue color.
 
You'd probably have to do the same thing, surround your link text with <span> tags to give them a different color. Are you familiar with CSS?
 
But how do you automate the applying of the span tags to every link on the page? I'm sure the Vice City webmaster didn't sit there and type in the <span> tags over and over again for each and every link.
 
depending on your editors features you could do it through that. If your using Frontpage just use the link properties (right click a link in normal view). Other than that I suppose you'd have to do it manually.
 
I got this reply from the webmaster of gta-vice.com:

Hi Berserkir,

yes. every link has a <span>, but we don't edit all links and put the
span tags in by hand,
this is done very easily with php using the following code:
preg_replace("'<a([^>]+)>(.*)</a>'Usi", "<a$1><span
class='link'>$2</span></a>", $html);

Best regards,
Tomas Hastings

Can someone expand on this and put it into comprehendable terms for someone (me) who isn't too familiar with PHP? Thanks.
 
Okay, I'm not too familiar with string manipulation, but it should search for every "<a href="http://...">XXXXX</a>" and replace with "<a href="http://..."><span class="link">XXXXX</span></a>"



However, in order for this to work, all your html has to be generated before hand. I mean, you have to use php to include the html (after you've run the preg_replace code). You can't have the html in the same file as the php code (well, technically you could...but I don't think it's very efficient...).
 
Okay, try this:

PHP: 
<?php
$filename = "index.inc";
$handle = fopen ($filename, "rb");
$contents = fread ($handle, filesize ($filename));
fclose ($handle);

$html = preg_replace("'<a([^>]+)>(.*)</a>'Usi", "<a$1><span class='link'>$2</span></a>", $contents);

echo $html;
?>

Rename your current "index.php" to "index.inc". Then, save that file above as "index.php".

And, in index.inc, add the style block to your heading

Code: 
<head>
<title>Untitled</title>
<style TYPE="text/css">
a:active, a:hover {
	color: red;
	text-decoration: underline;
}
span.link {
	color: blue;
}
</style>
</head>

Seems like a lot of work to save entering a few tags...
 
Last edited:
You must log in or register to reply here.
Back
Top