Forum Moderators: not2easy
The W3C Guidelines recommend [w3.org] that you don't rely on colour alone. In the visual browsing arena the increasing use of background images throws up the possibility of neat visual navigational aids, a visit around some of the CSS Menu tutorials or the CSSzengarden will demonstrate this.
But wait is there another way to use a:visited!
Here's a theory on how it could be used as a Marketing Tool
Setting the Scene
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0; border: 0;}
body {
margin: 60px;
border: 3px double #008;
padding: 40px;
text-align: center;
}#demo a {display : none;}
#demo a span {
position : absolute;
left : -1000px;
width : 200px;
}#demo a:visited {
cursor : default;
display : block;
width : 210px;
height : 80px;
}#demo a#wmw:visited {
background: url(http://showcase.netins.net/web/phdss/wmwgfx/dlogo.png) no-repeat 50% 50%;
}#demo a#cnn:visited {
background: url(http://i.cnn.net/cnn/.element/img/1.1/logo/logo.gif) no-repeat 50% 50%;
}</style>
<script language="JavaScript" type="text/javascript">
var statusmsg=""
function hidestatus() {
window.status=statusmsg
return true
}
</script>
</head>
<body>
<p>Have you visited these pages?</p>
<ul>
<li><a href="http://www.webmasterworld.com/" title="Webmaster World"><span>WebmasterWorld</span></a></li>
<li><a href="http://www.cnn.com/" title="CNN News"><span>CNN.com</span></a></li>
</ul><div id="demo">
<p>If you have, their Logos will appear below here</p>
<hr />
<a href="http://www.webmasterworld.com/" id="wmw" onmouseover="return hidestatus()" title="Webmaster World"><span>WebmasterWorld</span></a>
<a href="http://www.cnn.com/" id="cnn" onmouseover="return hidestatus()" title="CNN News"><span>CNN.com</span></a>
</div></body>
</html>
The CSS - Step By Step
a:visitedNow you're done..
Thoughts...
The reaches of this are certainly interesting, What's your thoughts on using this, for or against, possibilities, implications?
Suzy
edit grammar, speeling as usual! :)
[edited by: SuzyUK at 8:36 pm (utc) on July 24, 2004]
Two notes:
One: the link to WebmasterWorld logo is displayed incorrectly - the auto expansion of three little letters to WebmasterWorld breaks it.
<query>Just how can you post those letters without expansion?</query>
Two: possible copyright concerns if using logo without written permission.
Great idea - will take two aspirin and get back to you!
sorry didn't mean to give you a headache or to suggest copyright infringement, I only used those two as general examples.. ;)
disclaimer ~ host your own images
more so even craft your own images?
example
Set up the links to your competitors, add your own crafted images ** to go with them and there may be some possibilities..
**e.g. We sell our Widgets cheaper than <competitor>
i.e. if your visitor has already been at one of your designated competitors sites you could give them a "tailored" message in the form of an image...?
Suzy
Step 1:
A link to your competitor's site, perhaps in a block styled with
display:none;<a id="competitor" href="http://www.example.com/">My Competitor</a>Step 2:
Set the styles:
a {color:blue;}
a:visited {color:red;} Step 3:
A smattering of Javascript:
if (document.getElementById('competitor').currentStyle.color=='red')
document.writeln('<h2>Hey you!<\/h2>');
document.writeln('<p>Don\'t buy from example.com because they');
document.writeln('are a bunch of crooks!<\/p>'); As usual, YMMV...
might also be a nice way to use it in reverse too to "feature" more recent topics/news that a visitor hadn't yet read/visited..
Suzy
