Forum Moderators: open
Any thoughts on this one? For some reason, the following lines work perfectly in Safari and Firefox, but not IE. In IE the window.open command works, but the link doesn't change color. Unfortunately I can't put the link color change in the style sheet because there's already a different link color change in the style sheet.
Thanks!
<DIV class="dynamic-style-3">
<SPAN class="dynamic-style-4">
<a onclick="window.open('noises-program-800.htm’,'jonathanwald','left=30,top=0,scrollbars=no,fullscreen=yes’)” onmouseout="this.style.color='black'" onmouseover="this.style.color='#FF7B1F'">Noises Off!</a>
<BR>
</DIV>
</SPAN>
?
Give your link a class name, and assign a different :hover rule.
Scripting isn't needed.
(PS The span & div are improperly nested)
You can have different hover characteristics for different links. See below:
<style type="text/css">
a{
color:#808080;
text-decoration:none;
}
a:hover{
color:#d0d0d0;
text-decoration:underline;
}
.link2 {
color:#000080;
font-weight: bold;
text-decoration:none;
}
.link2:hover{
color:#ff0000;
text-decoration:underline;
}
</style>
</head>
<body>
<div id="mydiv"><a href="javascript:void(0)">Click Me!</a></div>
<a class="link2" href="javascript:void(0)">Click Me Too!</a>
</body>
Jonathan
<STYLE type="text/css">
<!--
A:link {text-decoration: none; color:black}
A:visited {text-decoration: none; color:black}
A:hover {text-decoration: none; color:#FF7B1F}
.link2: {text-decoration: none; color:white;}
.link2:hover {text-decoration: none; color:black;}
.link2:visited {text-decoration: none; color:white;}
.link3: {text-decoration: none; color:black;}
.link3:hover {text-decoration:none; color:#FF7B1F;}
.link3:visited {text-decoration: none; color:black;}
-->
</STYLE>
<BODY>
<DIV class="DIVProgramParaStyle">
<SPAN class="dynamic-style-1">
<a class=”link2” href="noises-program.htm" target="_blank" style="text-decoration: none">program</a>
</SPAN>
</DIV>
<DIV class="dynamic-style-3">
<SPAN class="dynamic-style-4">
<a class=”link3” onclick="window.open('noises-program-800.htm','jonathanwald','left=30,top=0,scrollbars=no,fullscreen=yes')" style="text-decoration: none">Noises Off!</a>
</DIV>
</SPAN>
A.link2:hover
etc
The page in question is:
[jonathanwald.com...]
Thanks,
Jonathan
Okay, here are some fixes that work in IE and Firefox at least:
1. Add an href to your links in order for the hover to work. Since you are using the link to run a script, add an href="javascript:void(0)" to the links without hrefs:
<a class="link2" onclick="...">program</a>
would become:
<a href="javascript:void(0)" class="link2" onclick="...">program</a>
2. Change the style definition of link2 from:
a.link2 {text-decoration: none; color:white}
a.link2:hover {text-decoration: none; color:black}
a.link2:visited {text-decoration: none; color:white}
to:
.link2 {text-decoration: none; color:white}
a.link2:hover {text-decoration: none; color:black}
.link2:visited {text-decoration: none; color:white}
For some reason, IE refuses to handle the hover correctly if the anchor ref is added to .link2 { and to .link2:visited
In addition, I noticed these things that didn't affect the document as far as I could tell, but might cause problems in some browsers:
1. You have some bad formatting in the html (a style tag begins inside a div and ends outside. An extra </head> tag and an extra set of title tags are located toward the bottom of the document.
2. Your css uses color names sometimes instead of hex, which is technically not valid css and might cause some problems.
Hope this helps,
ajkimoto
I think I know the cause of the slight problems reported in your last post.
It's all to do with order.
Pseudo classes, to work as expected, should be declared:
link
visited
hover
active
There was some article on it somewhere. They came up with a mnemonic that started:
"Love V..."
Can't find it. Oh well.
( or was that: L,V,A,H ?)
That is so cool. I will have to permanently impress that upon a neuron or two.
BTW, was this the thread for which you were searching?
[webmasterworld.com...]
ajkimoto
Anyway, much appreciated.
