mouseover not working in javascript function

[gib65]

I have a website: http://www.surrealsource.com. If you scroll down the image gallery to an image called "Fractures" and click on it, you'll get an enlarged view of it in the center pane. If you hover your mouse over it, nothing will happen. This is a problem.

I had my code setup so that a different image would show up when the mouse hovers over it, and for a while it worked, but all of a sudden it stopped working.

Here's my code:

in index.html in the image gallery:

<tr><td><a href="#nogo" onclick="changePic(FRACTURES);return false;"><img src="thumbs/fractures.jpg" border=1></a><br>Fractures</td></tr>

in index.html in body (the main viewing pane):

<div id="picdiv" style="display: none;">
<center>
<img id="mainpic" style="border: 3px double darkred;" alt="mainpic" border=1>
</center>
</div>

in functions.js in changePic() (relevant parts in bold):

function changePic(num) {

	// change visibility of divs
	document.getElementById("textdiv").style.display = "none";
	document.getElementById("picdiv").style.display = "inline";
	document.getElementById("infodiv").style.display = "inline";

	// change newer and older links text
	document.getElementById("nextlink").innerHTML = "NEWER >>";
	document.getElementById("prevlink").innerHTML = "<< OLDER";
	document.getElementById("print_this_image").style.display = "inline";

	// change pic
	document.getElementById("mainpic").src = "mainpics/"+files[num];
	document.getElementById("title").innerHTML = titles[num];
	document.getElementById("date").innerHTML = dates[num];
	document.getElementById("comment_body").innerHTML = comments[num];

	// change printing pic
	document.getElementById("print_pic").src = "mainpics/"+files[num];
	document.getElementById("print_text").innerHTML = titles[num];

	cur_pic = num;

	// figure out if pic is first or last and blot out newer or older link accordingly
	if (cur_pic == last_pic) {
		document.getElementById("nextlink").style.display = "none";
	}
	else {
		document.getElementById("nextlink").style.display = "inline";
	}

	if (cur_pic == first_pic) {
		document.getElementById("prevlink").style.display = "none";
	}
	else {
		document.getElementById("prevdiv").style.display = "inline";
	}

	// add special functionalities to Fractures
	if (cur_pic == FRACTURES) {
		document.getElementById('mainpic').onmouseover = function(){mainpic.src="mainpics/fractures_odd.jpg";};
		document.getElementById('mainpic').onmouseout = function(){mainpic.src="mainpics/fractures_even.jpg";};
		document.getElementById('mainpic').setAttribute('usemap', '#fracturesmap', 0);
	}
	else {
		document.getElementById('mainpic').onmouseover = function(){return;};
		document.getElementById('mainpic').onmouseout = function(){return;};
		document.getElementById('mainpic').removeAttribute('usemap', 0);
	}
}

Can anybody see why it would have stopped working?

[jscheuer1]

Error: document.getElementById("prevdiv") is null
Source File: http://www.surrealsource.com/functions.js
Line: 46

After an error like that, most browsers will stop executing the script.

[gib65]

That's it. I wonder how long that typo was in there for?

Thanks for the help.

BTW, how did you get the details of the error?

LATER...

I just noticed something strange.

Although it works now, it works in a weird way in Firefox. The mouseover image only shows up when you hover the mouse over the edge of the image. When you move the mouse into the middle of the image, it returns to the original image.

[jscheuer1]

That's it. I wonder how long that typo was in there for?

Not sure, probably since you made an update from a backup that had the error from some previous time. But it's impossible to say with certainty.

Thanks for the help.

BTW, how did you get the details of the error?

Firefox developer extension:

https://addons.mozilla.org/en-US/firefox/addon/60/

which adds among many other tools an error console. The same or similar information can be had with other tools for Firefox and with similar tools in other browsers.

I just noticed something strange.

Although it works now, it works in a weird way in Firefox. The mouseover image only shows up when you hover the mouse over the edge of the image. When you move the mouse into the middle of the image, it returns to the original image.

I haven't looked at the specifics yet, but it apparently has to do with just what is being moused over and out. When you overlay one thing with another it technically constitutes a mouse out of the thing that was overlaid. I notice a similar thing in IE except that there the transition is rapid from one state to the other, back again, then to the other, etc., repeating.

Before we diagnose that, it would be a good idea for you to optimize all of your images, especially the thumbnails. The page takes way too long to load, and this is primarily due to the byte load of the thumbnails.

I mean for example - 29.22 KB (29,926 bytes) is far too many bytes for thumbs/doll_in_the_snow.jpg, especially considering that its dimensions are only 100px × 80px. It could easily be optimized to around 3,000 to 5,000 bytes without losing enough resolution at those dimensions to make any real difference except in the time it takes to load. If all of the thumbnails were similarly reduced in byte size, it would make the page load much faster.

Even with the larger images - say, with mainpics/doll_in_the_snow.jpg, at the dimensions it occupies (530px × 410px), it doesn't need to be 102.78 KB (105,247 bytes). Half that or less would be fine. This would not speed the loading of the page, but would speed the loading of the larger image when the thumbnail was clicked on for the first time. Same goes for all of the larger images.

[gib65]

Firefox developer extension:

https://addons.mozilla.org/en-US/firefox/addon/60/

which adds among many other tools an error console. The same or similar information can be had with other tools for Firefox and with similar tools in other browsers.

Thanks a lot. That'll come in handy.

I haven't looked at the specifics yet, but it apparently has to do with just what is being moused over and out. When you overlay one thing with another it technically constitutes a mouse out of the thing that was overlaid. I notice a similar thing in IE except that there the transition is rapid from one state to the other, back again, then to the other, etc., repeating.

You're right, and it seems it was the areamap that was the overlaid culprit. I commented out the following line from my code above:

document.getElementById('mainpic').setAttribute('usemap', '#fracturesmap', 0);

...and the problem was fixed.

Of course, ideally, I'd like to keep the areamap and not have it interfere with the mouseover effect.

Before we diagnose that, it would be a good idea for you to optimize all of your images, especially the thumbnails. The page takes way too long to load, and this is primarily due to the byte load of the thumbnails.

I mean for example - 29.22 KB (29,926 bytes) is far too many bytes for thumbs/doll_in_the_snow.jpg, especially considering that its dimensions are only 100px × 80px. It could easily be optimized to around 3,000 to 5,000 bytes without losing enough resolution at those dimensions to make any real difference except in the time it takes to load. If all of the thumbnails were similarly reduced in byte size, it would make the page load much faster.

Even with the larger images - say, with mainpics/doll_in_the_snow.jpg, at the dimensions it occupies (530px × 410px), it doesn't need to be 102.78 KB (105,247 bytes). Half that or less would be fine. This would not speed the loading of the page, but would speed the loading of the larger image when the thumbnail was clicked on for the first time. Same goes for all of the larger images.

You really think I can reduce my image size? If I can do that, I'd be thrilled. I'll have to investigate what Photoshop can do for me in that department. Maybe saving them as GIFs instead of JPGs might do the trick (I hope that doesn't reduce the quality). But in any case, it will take me a while to do (especially considering I'm going on holidays all next week) so don't expect any responses from me for a while.

Thanks for bringing this to my attention. I knew the file sizes were cumulatively bulky, but I thought the only solution to that was to reduce their dimensions which I didn't want to do.

But in any case, if you can help me further with my problem now that we know the adding of the areamap is the issue, I would very much appreciate your efforts.

[azoomer]

You dont have to save it as gif. In photoshop you can decide the quality when you save a jpeg, maximum, very high, high, medium and low. When you save it use "save for web and devices". You can even choose the quality on a scale from 1 to 100. It will save you a lot of loading time. Usually it looks all right at 60% quality, but of course that's a matter of taste. If you don't have photoshop there is an imageoptimizer on dynamic drive
http://tools.dynamicdrive.com/imageoptimizer/
I haven't tried it though.
I have seen your site many times and you really need to cut the loading time. Even on broadband it takes ages. On a slow connection it will be much worse. Maybe you should consider distributing the images on many different pages with fewer images on each page. That would make you site more usable. Just my thoughts. I had to comment on it because the loading time on your page is really remarkable and in a category by it self.

I just found a function in photoshop that may be useful to you. Under: files -> scripts -> imageprocessor you can select a complete folder with images and make photoshop reduce the filesize ( quality, not dimensions) on all the images in one action. That can save you a lot of time instead of editing them one by one.

[gib65]

Thanks azoomer, I'll definitely look into that.

[jscheuer1]

Just make sure to keep a backup copies of your images at full resolution, just in case.

[jscheuer1]

To fix the map, change your changePic function to:

function changePic(num) {

	document.getElementById("textdiv").style.display = "none";
	document.getElementById("picdiv").style.display = "inline";
	document.getElementById("infodiv").style.display = "inline";

	document.getElementById("nextlink").innerHTML = "NEWER >>";
	document.getElementById("prevlink").innerHTML = "<< OLDER";
	document.getElementById("print_this_image").style.display = "inline";
	document.getElementById("mainpic").src="mainpics/"+files[num];
	document.getElementById("title").innerHTML = titles[num];
	document.getElementById("date").innerHTML = dates[num];
	document.getElementById("comment_body").innerHTML = comments[num];

	// change printing pic
	document.getElementById("print_pic").src = "mainpics/"+files[num];
	document.getElementById("print_text").innerHTML = titles[num];

	cur_pic=num;

	if (cur_pic == last_pic) {
		document.getElementById("nextlink").style.display = "none";
	}
	else {
		document.getElementById("nextlink").style.display = "inline";
	}

	if (cur_pic == first_pic) {
		document.getElementById("prevlink").style.display = "none";
	}
	else {
		document.getElementById("prevlink").style.display = "inline";
	}

	if (cur_pic == FRACTURES) {
		document.getElementById('mainpic').setAttribute('usemap', '#fracturesmap', 0);
	}
	else {
		document.getElementById('mainpic').removeAttribute('usemap', 0);
	}
}

changePic.addFractures = function(){
	var fracturesMap = document.getElementsByName('fracturesmap')[0], mainPic = document.getElementById('mainpic');
	fracturesMap.onmouseover = function(){
		clearTimeout(changePic.timer);
		mainPic.src="mainpics/fractures_odd.jpg";
	};
	fracturesMap.onmouseout = function(){
		changePic.timer = setTimeout(function(){
			mainPic.src="mainpics/fractures_even.jpg";
		}, 100);
	};
};

if (window.addEventListener){
	window.addEventListener('load', changePic.addFractures, false);
}
else if (window.attachEvent){
	window.attachEvent('onload', changePic.addFractures);
}

[gib65]

John, thanks very much.

That's some strange looking code. I'll give it a try when I get back home (away on holidays) sometime next week, and I'll report back to you.