Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 400
  • Last Modified:

OnMouseOver FLicker

Hello, I dont do much client side scripting.  With the code below the background is changed onmouseover but it flickers back and forth between the two images when I move my mouse around the div.  how can i fix this?


        function itemMouseOver(DivID) {
            document.getElementById(DivID).style.background = 'url(../Images/Webmasters/MyLinks/ItemBg_OnMouseOver.jpg)';
        }
        function itemMouseOut(DivID) {
            document.getElementById(DivID).style.background = 'url(../Images/Webmasters/MyLinks/ItemBg_OnMouseOut.jpg)';
        }


<div class="MyLinksItemDiv" id="10" onmouseover="itemMouseOver(10);" onmouseout="itemMouseOut(10);">

Thanks!
0
grogo21
Asked:
grogo21
  • 2
1 Solution
 
BadotzCommented:
Try something like this:



//
function itemMouseOver(DivID) {
	var d = document.getElementById(DivID);
	if (d.style.background != 'url(../Images/Webmasters/MyLinks/ItemBg_OnMouseOver.jpg)') {
	{
		d.style.background = 'url(../Images/Webmasters/MyLinks/ItemBg_OnMouseOver.jpg)';
	}
}
//
function itemMouseOut(DivID) {
	var d = document.getElementById(DivID);
	if (d.style.background != 'url(../Images/Webmasters/MyLinks/ItemBg_OnMouseOut.jpg)') {
	{
		document.getElementById(DivID).style.background = 'url(../Images/Webmasters/MyLinks/ItemBg_OnMouseOut.jpg)';
	}
}

Open in new window

0
 
BadotzCommented:
Sorry, typo in the second function:


//
function itemMouseOut(DivID) {
	var d = document.getElementById(DivID);
	if (d.style.background != 'url(../Images/Webmasters/MyLinks/ItemBg_OnMouseOut.jpg)') {
	{
		d.style.background = 'url(../Images/Webmasters/MyLinks/ItemBg_OnMouseOut.jpg)';
	}
}

Open in new window

0
 
grogo21Author Commented:
Hello, that did not fix it.  Thanks for tring though.  I ended up using :
        var LastDiv = 0
        function itemMouseOver(DivID) {
            if (LastDiv != DivID) {
                if (LastDiv != 0) {
                    document.getElementById(LastDiv).style.background = 'url(../Images/Webmasters/MyLinks/ItemBg_OnMouseOut.jpg)';
                }
                document.getElementById(DivID).style.background = 'url(../Images/Webmasters/MyLinks/ItemBg_OnMouseOver.jpg)';
                LastDiv = DivID
            }
        }
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now