CSS Forum

**Joe3000** · 04-12-2007, 10:37 AM

I've got a DIV that has a link in with link styles for that DIV:

Code:

#footer a:link {
    color: #7F7F7F;
    text-decoration: underline;
}
#footer a:visited {
    color: #7F7F7F;
    text-decoration: underline;

}
#footer a:hover {
    color: #00CCFF;
    text-decoration: underline;
    background-color: #7F7F7F;
}

When the mouse goes in the DIV I would like the background color of that DIV to change color - and then revert when I rollout.

I would also like the whole DIV to be a link rather than just the text link in there.

I remember doing this years ago but not with DIVs, but can't remember how anyways.

Any ideas?

**willcode4beer** · 04-12-2007, 12:15 PM

Quote:

Originally Posted by Joe3000

When the mouse goes in the DIV I would like the background color of that DIV to change color - and then revert when I rollout.

I would also like the whole DIV to be a link rather than just the text link in there.

Based on this description, I'd say don't use a div

Why have a linked div instead of a big link?

See if this is along the lines of what you are looking for:

HTML Code:

<style type="text/css">
a#glink {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: underline;
}
a#glink:link{
    color: #7F7F7F;
}
a#glink:visited{
    color: #7F7F7F;
}
a#glink:hover{
    color: #00CCFF;
    background-color: #7F7F7F;
}
</style>

HTML Code:

<a href="http://google.com" id="glink">Google</a>

**Joe3000** · 05:20 AM

Thanks, that works great, but...

The link I want it to apply to is a mailto: link that has javascript to hide it from spammers.

The code looks like this:

Code:

<script language="javascript">
<!--
/* Munged addy code - YOU CAN EDIT COMMENT THIS TAG BETWEEN THE TWO STARS */
/* SAYS "Joe Smith" */
jhRGMZrUWGTQJoI();
/* Munged addy code - YOU CAN EDIT COMMENT THIS TAG BETWEEN THE TWO STARS */
//-->
</script>

There is no actual 'mailto:' tag

Any ideas how I could do it?

Thanks.

**willcode4beer** · 04-13-2007, 09:34 AM

Mailto is just a pseudo protocol that is used instead of http.
At any rate, maybe something like the following code will help. Even better if the javascript is in an external file, then a bot is less likely to grab the code with the email.
I put together a quick and dirty rot13 (rot 10 for numbers) like script for the munging. But, feel free to replace the call with what ever function you are using. The javascript simply takes the contents of the div and moves them to the new anchor tag, the anchor tag is then added as a child to the div.
The CSS is the same as before (only adding props to the div as well).

HTML Code:

<!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 Document</title>
<style type="text/css">
div#contactLink, a.contact {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: underline;
}
a.contact:link{
    color: #7F7F7F;
}
a.contact:visited{
    color: #7F7F7F;
}
a.contact:hover{
    color: #00CCFF;
    background-color: #7F7F7F;
}
</style>
<script type="text/javascript">//<![CDATA[
var HalfRot = {
    lookUp : null,
    init : function(){
        var upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var lower = "abcdefghijklmnopqrstuvwxyz";
        var nums = "0123456789";
        this.lookUp = new Array();
        this.lookupPop(upper);
        this.lookupPop(lower);
        this.lookupPop(nums);
    },
    lookupPop : function(srcStr) {
        var half = srcStr.length/2;
        for(var i=0;i<srcStr.length;i++){
            var fix = (i<half)?1:(-1);
            this.lookUp[srcStr.charAt(i)] = srcStr.charAt(i+(half*fix));
        }
    },
    rot : function(strIn){
        var out = "";
        for(var i=0;i<strIn.length;i++){
            var val = this.lookUp[strIn.charAt(i)];
            if(val){
                out += val;
            }else{
                out += strIn.charAt(i);
            }
        }
        return out;
    }
};
HalfRot.init();

function activateContactLink(){
    var wrapper = document.getElementById("contactLink");
    var mailLink = document.createElement("a");
    mailLink.href = "mailto:" + HalfRot.rot("cnhy.qnivf@jvyypbqr9orre.pbz");
    mailLink.className = "contact";
    var children = wrapper.childNodes;
    for(var i=0; i<children.length;i++){
        mailLink.appendChild(children[i]);
    }
    wrapper.appendChild(mailLink);
}
window.onload = activateContactLink;
//]]></script>
</head>

<body>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam blandit augue in tortor. Phasellus sem sapien, faucibus non, mattis in, venenatis non, orci. Quisque euismod molestie ante. Curabitur eu nisl id nulla sagittis pharetra. Vivamus cursus ligula non quam. Proin ante. Nunc accumsan nibh ut diam. Suspendisse faucibus, justo sit amet dignissim pharetra, eros quam aliquam mauris, a lobortis dui odio vitae leo.
    </p>
    <div id="contactLink">Contact Me</div>
</body>
</html>

BTW, the rot is reversible, so, if you want to make a string to put in your script, just call it with the plain text.
For example:

HTML Code:

var torot = "paul.davis@willcode4beer.com"
prompt(torot,HalfRot.rot(torot));

then you could copy the value out and paste it in your script.

HTH