Javascript to enable the :hover pseudo class on IE?

[Kerberos]

As you might know, IE doesn't support the :hover pseudo-class on every tag
(just the "a" tag AFAIK)
Is there a simple JavaScript that would solve the problem?
I have images that have a light blue outline, and when I pass the mouse
over, the outline turns to red.

#featured img {
display: block;
border: 1px solid #DCDFE8;
padding: 1px;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
#featured img:hover {
border: 1px solid #FF0000;
}
Of course it doesn't work on IE. How would you do?

--

Kerberos.

http://www.opera.com
http://www.freebsd.org
http://www.auriance.com
http://www.osresources.com
http://exodus.jabberstudio.org

[Michael Winter]

On Mon, 10 Jan 2005 16:03:32 -0200, Kerberos <[e-mail] > wrote:

[:hover emulation in IE]

Is there a simple JavaScript that would solve the problem?

It probably would have been better to ask this in comp.lang.javas cript.

[snip]

<img ...
onmouseover="if (this.style){th is.style.border Color='red';}"
onmouseout="if( this.style){thi s.style.borderC olor='';}">

You could of course use #RGB to specify the colour, but the keyword was
shorter.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Christoph Paeper]

*Kerberos* <[e-mail] >:

As you might know, IE doesn't support the :hover pseudo-class on every
tag (just the "a" tag AFAIK)
Is there a simple JavaScript that would solve the problem?

Well, there is Dean Edwards's IE7, which features that and more.

--
If the glass is half full or half empty
depends on if you are pouring or drinking.

[Kerberos]

Em Mon, 10 Jan 2005 23:03:34 GMT, Michael Winter
<M.******@bluey onder.co.invali d> escreveu:

<img ...
onmouseover="if (this.style){th is.style.border Color='red';}"
onmouseout="if( this.style){thi s.style.borderC olor='';}">

Thanks, I'm used this in a previous site, but I was looking for another
solution because it's a little heavy, because there as quite a lot of
photos...

I think I'll just forget it, because it doesn't decrease accessibility.
It'll look just nicer in browsers like Opera this time :)

--

Kerberos.

http://www.opera.com
http://www.freebsd.org
http://www.auriance.com
http://www.osresources.com
http://exodus.jabberstudio.org

[Stanimir Stamenkov]

/Christoph Paeper/:

*Kerberos* <[e-mail] >:

As you might know, IE doesn't support the :hover pseudo-class on
every tag (just the "a" tag AFAIK)
Is there a simple JavaScript that would solve the problem?

Well, there is Dean Edwards's IE7, which features that and more.

http://dean.edwards.name/IE7/

"Dynamic Pseudo-Classes"
<http://dean.edwards.na me/IE7/compatibility/super-dynamic.html>

--
Stanimir

[Kerberos]

Em Tue, 11 Jan 2005 14:40:17 +0200, Stanimir Stamenkov
<s7****@netscap e.net> escreveu:

Well, there is Dean Edwards's IE7, which features that and more.

http://dean.edwards.name/IE7/

"Dynamic Pseudo-Classes"
<http://dean.edwards.na me/IE7/compatibility/super-dynamic.html>

Gosh! This is great! Thank you so much!
If you have other goodies, they're welcome ;)
--

Kerberos.

http://www.opera.com
http://www.freebsd.org
http://www.auriance.com
http://www.osresources.com
http://exodus.jabberstudio.org

[Daniel Déchelotte]

Kerberos a écrit :

| As you might know, IE doesn't support the :hover pseudo-class on every
| tag (just the "a" tag AFAIK)
| Is there a simple JavaScript that would solve the problem?

Cleaner than repeating "onmouseove r = " code in every element, more
focussed on your problem than IE7, let me point you to the "Suckerfish
Dropdowns" article at http://www.alistapart.com/articles/dropdowns/.

You simply have to adapt the provided JS function (change "nav" to
"featured", obviously) and slighly modify your CSS as follows:

| [...]
| #featured img:hover {

Change this to

#featured img:hover, #featured img.over {

| border: 1px solid #FF0000;
| }

That's what I do. HTH.

--
Daniel Déchelotte
http://yo.dan.free.fr/

[Michael Winter]

On Tue, 11 Jan 2005 10:00:15 -0200, Kerberos <[e-mail] > wrote:

[snip]

Thanks, I'm used this in a previous site, but I was looking for another
solution because it's a little heavy, because there as quite a lot of
photos...

function colourBorder() {setBorder(this , '#ff0000');}
function restoreBorder() {setBorder(this , '');}
function setBorder(obj, colour) {
if(obj.style) {obj.style.bord erColor = colour;}
}

var featured = null, images;
if(document.get ElementById
&& (featured = document.getEle mentById('featu red'))
&& featured.getEle mentsByTagName)
{
images = featured.getEle mentsByTagName( 'img');
for(var i = 0, n = images.length; i < n; ++i) {
images[i].onmouseover = colourBorder;
images[i].onmouseout = restoreBorder;
}
}

Using that would certainly be more efficient than including the IE7
emulation code, particularly if you removed all unnecessary whitespace.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Michael Rozdoba]

Kerberos wrote:

Em Mon, 10 Jan 2005 23:03:34 GMT, Michael Winter
<M.******@bluey onder.co.invali d> escreveu:

<img ...
onmouseover="if (this.style){th is.style.border Color='red';}"
onmouseout="if( this.style){thi s.style.borderC olor='';}">

Thanks, I'm used this in a previous site, but I was looking for another
solution because it's a little heavy, because there as quite a lot of
photos...

I think I'll just forget it, because it doesn't decrease accessibility.
It'll look just nicer in browsers like Opera this time :)

I very much liked the look of

http://www.xs4all.nl/~peterned/csshover.html

though I've not yet used it myself. It keeps the IE script in one place
away from most of your own code which doesn't require a lot of heavy
mods inlined. If you use it, note the comment re serving .htc files with
correct mimetype for IE running under XP+SP2.

--
Michael
m r o z a t u k g a t e w a y d o t n e t