Mouseover effects

[betheball]

I am using the script below for a mouseover effect on a handful of images. I chose this one simply because of ease of implementation. However, I am noticing that sometimes an image won't load. I may be wrong, but it seems to happen when the cursor happens to be sitting where the image appears. Has anyone ever seen that type of a problem? Also, what are your recommendations for a dependable mouseover script.

Here is the script:

/****************************************************
* DOM Image rollover:
* by Chris Poole
* http://chrispoole.com
* Script featured on http://www.dynamicdrive.com
* Keep this notice intact to use it :-)
****************************************************/

function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;

Here is the code to display the images:

<img src="../../images/back.gif" alt="Back" hsrc="../../images/back_mo.gif" border="0">

[Ultimater]

Maybe because the script is pre-loading all the hsrc's and not preloading all the regular src's...

It's a pretty cool script though...
My favorite part is how the function checks if the function document.getElementById exists then assumes that the function
document.getElementsByTagName also exists if the first one does...
That is not always true! The function in my signature can identify the first function and make the whole program glitch! LOL
The script never even uses the function document.getElementById...
I'd change the orginal programmer's if-check to document.getElementsByTagName :D

Let me guess you're using IE

[betheball]

Yes, I am using IE. Also, my site is on a corporate intranet where users use IE exclusively. Are you saying replace:

function init() {
if (!document.getElementById) return

with

function init() {
if (!document.getElementsByTagName) return

I did that and still see the same issue. I have verified that what I though was true. If for example I refresh the page and hurry and move the mouse pointer to where one of the images needs to appear, the image will fail to load. Curiously, if I leave the cursor over the image and hit F5 it loads fine. Do you think I should choose a different script? Although I will have to redo over a hundred pages, I prefer stability. Thanks again for your continued help.

[Ultimater]

No, it's a good script. It only seems to be an issue with IE that's how I knew you were using IE.
If you want, you can display a loading-layer on the top of everything onload and remove it after all the images are done.
I could extend the current script your using by doing so.

[betheball]

If you could, I would appreciate it. Many of the graphics have links associated with them and when a user clicks a link the same image often appears on the next page in the same position. Well, since the user had to click the image, the pointer is still sitting in the same spot causing the image to not load.

[Ultimater]

Well, I'm currently working on 5 scripts for different people... Your script is currently in line 6th place... Once I get around to it, I'll make it for you with no problem.

[betheball]

Great, I will watch for it. I appreciate the assistance.

[Ultimater]

<script type="text/javascript"><!--
function init() {
if (!document.getElementsByTagName) return false;
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}

}
hide_loading_layer()
}

function show_loading_layer(){
if(!document.getElementById)return false;
var screen_height=(typeof screen.height!="undefined")?screen.height:1900
var screen_width=(typeof screen.width!="undefined")?screen.width:900

var temp=""
if(document.layers){
temp+="<layer id=\"loading_layer\" style=\"position: absolute; left:0px; top:0px; display: inline; z-index: 900; height:"+screen_height+"; width:"+screen_width+"; background-color: #EEEEEE; color: royalblue; text-align: center;\">"
temp+="<h1>LOADING</h1></layer>"
}else{
temp+="<div id=\"loading_layer\" style=\"position: absolute; left:0px; top:0px; display: inline; z-index: 900; height:"+screen_height+"; width:"+screen_width+"; background-color: #EEEEEE; color: royalblue; text-align: center;\">"
temp+="<h1>LOADING</h1></div>"
}
document.write(temp)
}
function hide_loading_layer(){
if(!document.getElementById)return false;
setTimeout('document.getElementById("loading_layer").style.display="none"',100)
}
show_loading_layer()
onload=init;
//--></script>


Untested in NS, I tested it in IE6.0

If you want to test my code, try the following HTML in your BODY:

<!-- --- -->
<img src="http://www.webdeveloper.com/forum/image.php?u=30185&dateline=1109700903" hsrc="http://www.webdeveloper.com/forum/image.php?u=2424&dateline=1105516794">
<!-- --- -->

[Ultimater]

Hmm... Is it a problem if my program is setting the layer's width and height equal to the user's actual computer screen height and width rather than the page's width and height? Of corse it is, becase your page length could require scrolling and the layer wouldn't "hide" all of it's contents.
Hmm... I'm not sure how to detect the webpage's true height and width...

[Ultimater]

I think that David Harrison has thought of a better alternitive from the following thread:
screen.Height and screen.Width (http://www.webdeveloper.com/forum/showthread.php?p=353192)

He says to put your init function call after your html instead of before it onload.

in-other-words:

<script type="text/javascript"><!--
function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}
}
}
//--></script>


<img src="http://www.webdeveloper.com/forum/image.php?u=30185&dateline=1109700903" hsrc="http://www.webdeveloper.com/forum/image.php?u=2424&dateline=1105516794">
<script type="text/javascript"><!--
init()//omitted(left-out) onload on purpose!
//--></script>

[betheball]

Perfect! Thanks for your help on this. For some reason I didn't get my subscription email on this one. Glad I came back for another look.

As a side note, it seems the author of the original script must have also realized the problem. The orginal has been rewritten to:


//=====================================================================
// DOM Image Rollover v3 (hover)
//
// Demo: http://chrispoole.com/scripts/dom_image_rollover_hover
//=====================================================================
// copyright Chris Poole
// http://chrispoole.com
// This software is licensed under the MIT License
// <http://opensource.org/licenses/mit-license.php>
//=====================================================================

function domRollover() {
if (navigator.userAgent.match(/Opera (\S+)/)) {
var operaVersion = parseInt(navigator.userAgent.match(/Opera (\S+)/)[1]);
}
if (!document.getElementById||operaVersion <7) return;
var imgarr=document.getElementsByTagName('img');
var imgPreload=new Array();
var imgSrc=new Array();
var imgClass=new Array();
for (i=0;i<imgarr.length;i++){
if (imgarr[i].className.indexOf('domroll')!=-1){
imgSrc[i]=imgarr[i].getAttribute('src');
imgClass[i]=imgarr[i].className;
imgPreload[i]=new Image();
if (imgClass[i].match(/domroll (\S+)/)) {
imgPreload[i].src = imgClass[i].match(/domroll (\S+)/)[1]
}
imgarr[i].setAttribute('xsrc', imgSrc[i]);
imgarr[i].onmouseover=function(){
this.setAttribute('src',this.className.match(/domroll (\S+)/)[1])
}
imgarr[i].onmouseout=function(){
this.setAttribute('src',this.getAttribute('xsrc'))
}
}
}
}
domRollover();


And the instruction is to now place the script right after the </body> tag. The html portion is now:

<img src="../../images/back.gif" class="domroll ../../images/back_mo.gif">

Your fix was easier for me to implement with what I had already done.

[Ultimater]

Yup, that makes sense now. So, the original author also knew of the problem and you failed to carry-out his/her instructions. ;)
Well, feel free to sign my guestbook in return!
http://ultimiacian.tripod.com/cgi-bin/GuestBook.pl
Try to write something inspiring or motivating because this guestbook seems to be my only motivation. But a rather good one! :)