[SOLVED] onmouse over working slowly

[gevans]

Hey guys,

 

I'm using an onmouseover script with a JS function for my nav, the images are pre loaded but it still works very slowly.

 

Bellow is my function;

 

function navHover(id,hover) { 
    var imgSource = document.getElementById(id).src;
    var img = document.getElementById(id);
    var source;
    if(hover == 1)
        source = imgSource.replace(".jpg", "_over.jpg");
        img.src = source;
    if(hover == 2)
        source = imgSource.replace("_over.jpg", ".jpg");
        img.src = source;
}

 

As you can see it's simply adding or taking away _over from the end of the image's source.

 

Do you know of any reason why it would run so slowly?

[KevinM1]

Hey guys,

 

I'm using an onmouseover script with a JS function for my nav, the images are pre loaded but it still works very slowly.

 

Bellow is my function;

 

function navHover(id,hover) { 
    var imgSource = document.getElementById(id).src;
    var img = document.getElementById(id);
    var source;
    if(hover == 1)
        source = imgSource.replace(".jpg", "_over.jpg");
        img.src = source;
    if(hover == 2)
        source = imgSource.replace("_over.jpg", ".jpg");
        img.src = source;
}

 

As you can see it's simply adding or taking away _over from the end of the image's source.

 

Do you know of any reason why it would run so slowly?

 

Hmm...mind showing how you're calling this function?

[gevans]

The nav is built using php, so along this;

 

      $navHTML .= '<li><h2><a title="Contact Doctors Housing" href="'.$CONFIG['URL'].'contact-us"><img alt="Contact Doctors Housing" width="85" height="79" ';
      $navHTML .= ($p==='contact-us')? 'src="'.$CONFIG['URL'].'images/nav/contactus_over.jpg"' : 'id="cunav" onmouseover="navHover(this.id,1)" onmouseout="navHover(this.id,2)" src="'.$CONFIG['URL'].'images/nav/contactus.jpg"';
      $navHTML .= ' /></a></h2></li>'." ";

 

returns this html ;

 

<ul>
<li><h2><a title="Doctors Housing Home" href="http://localhost/doctorshousing.com/site/home"><img alt="Doctors Housing Home" width="58" height="79" id="hnav" onmouseover="navHover(this.id,1)" onmouseout="navHover(this.id,2)" src="http://localhost/doctorshousing.com/site/images/nav/home.jpg" /></a></h2></li>
<li><h2><a title="Property Finder at Doctors Housing" href="http://localhost/doctorshousing.com/site/property-finder"><img alt="Property Finder at Doctors Housing" width="118" height="79" src="http://localhost/doctorshousing.com/site/images/nav/propertyfinder_over.jpg"/ ></a></h2></li>
<li><h2><a title="List a Property at Doctors Housing" href="http://localhost/doctorshousing.com/site/list-a-property"><img alt="List a Property at Doctors Housing" width="109" height="79" id="lapnav" onmouseover="navHover(this.id,1)" onmouseout="navHover(this.id,2)" src="http://localhost/doctorshousing.com/site/images/nav/listaproperty.jpg" /></a></h2></li>
<li><h2><a title="Contact Doctors Housing" href="http://localhost/doctorshousing.com/site/contact-us"><img alt="Contact Doctors Housing" width="85" height="79" id="cunav" onmouseover="navHover(this.id,1)" onmouseout="navHover(this.id,2)" src="http://localhost/doctorshousing.com/site/images/nav/contactus.jpg" /></a></h2></li>
</ul>

[KevinM1]

Do you want the images to revert to their default state on a mouseout?  Or are you intentionally keeping them in their hover state until the next mouseover?

[gevans]

They revert to their original state, the functions second argument is an integer. 1 for mouse over and 2 for mouse out

 

1 replaces .jpg with _over.jpg

2 replaces _over.jpg with .jpg

[KevinM1]

They revert to their original state, the functions second argument is an integer. 1 for mouse over and 2 for mouse out

 

1 replaces .jpg with _over.jpg

2 replaces _over.jpg with .jpg

 

Eh, you can do it an easier way:

<script type="text/javascript">
   window.onload = function()
   {
      var nav = document.getElementById('ulnav');
      var linkImgs = nav.getElementsByTagName('img');

      for(var i = 0; i < linkImgs.length; i++)
      {
         linkImgs[i].onmouseover = function()
         {
            var tmpSrc = this.src.replace('.jpg', '_over.jpg');
            this.src = tmpSrc;
         }

         linkImgs[i].onmouseout = function()
         {
            var tmpSrc = this.src.replace('_over.jpg', '.jpg');
            this.src = tmpSrc;
         }
      }
   }
</script>

.
.
.

<ul id="ulnav">
   <li><h2><a title="Doctors Housing Home" href="http://localhost/doctorshousing.com/site/home"><img alt="Doctors Housing Home" width="58" height="79" id="hnav" src="http://localhost/doctorshousing.com/site/images/nav/home.jpg" /></a></h2></li>
   <!-- other links go here -->
</ul>

 

This should make it easier on your PHP script as well, as you don't need to put a function reference in each image's HTML, as you can see in the example above.  Instead, this script iterates over each image and adds mouse hover functions to each one.

[gevans]

Ok, I'll give that a go, but I will also have one image that doesn't comply with the onmouseover and onmouseout. The selected page will have the _over.jpg src from the outset, and should not revert to the src without _over.jpg.

 

I'm sure adding the following could work for that...

 

<script type="text/javascript">
   window.onload = function()
   {
      var nav = document.getElementById('ulnav');
      var linkImgs = nav.getElementsByTagName('img');

      for(var i = 0; i < linkImgs.length; i++)
      {
         linkImgs[i].onmouseover = function()
         {
            var tmpSrc = this.src.replace('.jpg', '_over.jpg');
            this.src = tmpSrc;
         }

         linkImgs[i].onmouseout = function()
         {
            var tmpSrc = this.src.replace('_over.jpg', '.jpg');
            if(this.id != 'selected_nav') this.src = tmpSrc;
         }
      }
   }
</script>

.
.
.

<ul id="ulnav">
   <li><h2><a title="Doctors Housing Home" href="http://localhost/doctorshousing.com/site/home"><img alt="Doctors Housing Home" width="58" height="79" id="hnav" src="http://localhost/doctorshousing.com/site/images/nav/home.jpg" /></a></h2></li>
   <!-- other links go here -->

   <li><h2><a title="Doctors Housing Home" href="http://localhost/doctorshousing.com/site/home"><img alt="Doctors Housing Home" width="58" height="79" id="selected_nav" src="http://localhost/doctorshousing.com/site/images/nav/home.jpg" /></a></h2></li>

<!-- above image should not change on mouse out/over -->
</ul>

 

Can you think of a better way?

[gevans]

window.onload = function() {
var nav = document.getElementById('ulnav');
var linkImgs = nav.getElementsByTagName('img');

for(var i=0;i<linkImgs.length;i++) {
	linkImgs[i].onmouseover = function() {
		var tmpSrc = this.src.replace('.jpg', '_over.jpg');
		if(this.id != 'selected_nav')
			this.src = tmpSrc;
	}
	linkImgs[i].onmouseout = function() {
		var tmpSrc = this.src.replace('_over.jpg', '.jpg');
		if(this.id != 'selected_nav')
			this.src = tmpSrc;
	}
}
}

 

That's the final script I used, works perfectly. Can yuo tell me what was wrong with my original script?

[KevinM1]

window.onload = function() {
var nav = document.getElementById('ulnav');
var linkImgs = nav.getElementsByTagName('img');

for(var i=0;i<linkImgs.length;i++) {
	linkImgs[i].onmouseover = function() {
		var tmpSrc = this.src.replace('.jpg', '_over.jpg');
		if(this.id != 'selected_nav')
			this.src = tmpSrc;
	}
	linkImgs[i].onmouseout = function() {
		var tmpSrc = this.src.replace('_over.jpg', '.jpg');
		if(this.id != 'selected_nav')
			this.src = tmpSrc;
	}
}
}

 

That's the final script I used, works perfectly. Can yuo tell me what was wrong with my original script?

 

Well, I have the feeling that it boils down to inefficient code.

 

In your original script, you already had access to the image you wanted to change ('this').  But, instead of dealing with it directly, you pass its id to the function (this.id), then have the function retrieve the image element any way (document.getElementById(id)).  You were just adding steps that weren't necessary to the actual process.

 

My solution just deals with the images once.  There's less processing overhead as you don't need to retrieve the correct image element within the function - it's already there as 'this' (linkImgs) while you iterate through all of the images.