Closed Thread Icon

Topic awaiting preservation: CSS thingy . . . (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=7880" title="Pages that link to Topic awaiting preservation: CSS thingy . . . (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: CSS thingy . . . <span class="small">(Page 1 of 1)</span>\

 
YoBoyE
Nervous Wreck (II) Inmate

From:
Insane since: Sep 2001

posted posted 10-12-2001 02:20

on the microsoft webpage ( http://www.microsoft.com ), on the left menu, there's a thing that when you mousover a link, it changes the background of the link to grey with a border. Ive looked at the css and tried to get it to work on my site, but it doesnt do anything. could someone try to help me out? thanks.

Eric Hesterman

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 10-12-2001 02:35

here's the most simplified code that *should* do the trick:

var DOM = (document.getElementById)?true:false, IE = false, NN = false;
if (!DOM) IE = (document.all)?true:false;

function Active(objId)
{
if (!DOM && !IE) return;
var theobj;
if (DOM) theobj = document.getElementById(objId).style;
else if (IE) theobj = document.all[objId].style;

theobj.background='#FFF';
theobj.border = '1px solid #000';
}

function Plain(objId)
{
if (!DOM && !IE) return;
var theobj;
if (DOM) theobj = document.getElementById(objId).style;
else if (IE) theobj = document.all[objId].style;

theobj.background='#888';
theobj.border = '0px';
}


... in the HTML ...

<p id="simplepar"><a href="somewhere.htm" onmouseover="Active('simplepar');" onmouseout="Plain('simplepar');">click here!</a></p>

It won't work in NN. NN simply can't support it.

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 10-12-2001 02:36

This is a whole lot of code for that technique, a lot of it propietary to MS

the trick is the line in the CSS that says

behavior: url(/library/flyoutmenu/default.htc);

That allows CSS to call a Javascript (or in this case JScript) DHTML function

The main chunk is here http://www.microsoft.com/library/flyoutmenu/default.htc



:[ Computers let you make more mistakes faster than any other invention in human history, with the possible exceptions of handguns and tequila. ]:

Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

posted posted 10-12-2001 07:41

I'm using a class:

div.banner a, div.banner em { display: block; margin: 0 0.5em; }
div.banner a, div.banner em { border: 1px 1px 1px 1px #900 }
div.banner a:first-child { border-top: none}
div.banner em { color: #6E6E6E}

div.banner a:link { text-decoration: none; color:#000000; }
div.banner a:visited { text-decoration: none; color: #000000 }
div.banner a:hover { color:black; text-decoration:underline overline;BACKGROUND-COLOR: #320808}

Is this bad?
I mean, if I don't missunderstood the question, you want to make the bgcolor be gray and lines on mouse over, does this code works for me, but if Slime said that one, there should be something wrong with mine, can somebody explain please??

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 10-12-2001 11:44

AS I said over in the GN I'd just use A: hover - you can simulate this

code:
a:link, a:visited {
border: 0px;
background-colour: #888;
}

a:hover {
border: 1px solid #000;
background-colour: #888;
}



This might jump around a little so you might want to adjust padding/margins to get it stationary.

Emps


You're my wife now Dave

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 10-12-2001 16:00

The reason I gave my solution was because I believed he wanted more than just the hyperlink to be changed on hover, he wanted the entire containing element (like a P tag or a TD tag) to be changed, so that the color changes are the entire width of the menubar (see www.microsoft.com ).

Technically, one should be able to say

TD:hover {stuff}

just like people so often do with A:hover. But the :hover pseudo-class isn't widely supported yet, I don't know if even IE supports it (except for with hyperlinks, as it was originally intended for use for).

Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

posted posted 10-12-2001 16:44

So, I'm not wrong if i use that in a Hyperlink??

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 10-12-2001 16:45

Slime: Just curious but can't you get the effect by using A: hover and making the link 100% wide or the width of the contraining box if that is fixed width? I'm just curious - I'd use something like onmouseover="this.className='elementOver'" on the TD, P or DIV the link is in if that wasn't possible. I suspect neither of these approaches works in all recent browsers.

Emps



You're my wife now Dave

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 10-12-2001 16:48

Yup, Wakkos, your way should work, it just might not take up 100% of the width. I'm not sure if you can set a hyperlink to 100% width... maybe someone should try it. You might have to specify display:block; for the hyperlink.

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 10-12-2001 17:47

Slime: Good point. This works in IE5:

code:
<html>
<head>
</head>
<style>

a:link {
width: 100%;
background-color: black;
color: white;
}

a:hover {
background-color: yellow;
color: black;
}

</style>

<body>

<a style="width:100%; background-color:blue; color:white;" href="someplace.com">link link</a>
<br />
<a href="someplace.com">link link</a>

<body>
</html>



Emps


You're my wife now Dave

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 10-12-2001 17:55

And it works fine with borders in IE5:
www.theemperor.f2s.com/asylum/linktest.html

Emps


You're my wife now Dave

YoBoyE
Nervous Wreck (II) Inmate

From:
Insane since: Sep 2001

posted posted 10-12-2001 22:50

hey, thanks for all your, help, I think I'm gonna go with the CSS route, I got it workin' how I want it anyways, thanks to everyone who responded.

Eric Hesterman

« BackwardsOnwards »

Show Forum Drop Down Menu