Member Avatar for konczuras

Hello, I'm new to javascript, and need some help, why the following code refuses to do anything.

<html>
<head>
<style type="text/css">
.btn 
{
	background:URL("elemer.jpg");
width:200px;
height:100px;
display:block;


}
.btn.sfhover, .btn:hover
{
background-image:none;
}

</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById(„btn”);
sfEls.onmouseover=function() {
this.className+=” sfhover”;

sfEls.onmouseout=function() {
this.className.replace(new RegExp( „sfhover\\b”), „”);

}
}
}
If(window.attachEvent) window.attachEvent(„onload”, sfHover);

</script>
</head>
<body onLoad="sfHover">

<input type="button" class="btn" value="value"/>

</body>
</html>

I get the error "sfHover isn't defined". What am I doing wrong? The purpose of the code would be to add a :hover (here: .sfHover) css pseudo-class on the mouseover event, to work in IE.
Any clues?

Thanks in advance.

  • 2 Contributors
  • 2 Replies
  • 161 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by konczuras
Member Avatar for essential

Do it this way:

<script type="text/javascript">
var sfEls;
var sfHover = function() {
sfEls = document.getElementById("btn");
   sfEls.onmouseover = function() {
   this.className += "sfhover"; };
   sfEls.onmouseout = function() {
// simply assign the class again, instead of replacing it.

   this.className = "someClass" }; 
};

if (window.addEventListener)
window.addEventListener("load",sfHover,false);
else if (window.attachEvent)
window.attachEvent("onload",sfHover);
else
window.onload = sfHover; 
</script>

and remove the attached onload event which is stated on the your <body> tag.

Member Avatar for konczuras

Thanks you very much, it worked perfectly well!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.