JavaScript: mouseover problem MacOS 9.x IE5

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/javascript_mouseover_problem_macos_9_x_ie5_132083/page_1 - zur Vollversion wechseln!

boernd schrieb am 15.12.2004 um 15:16

Hallo,
habe ein Problem mit dem Internet Explorer 5.x auf Macintosh Rechnern (OS Version 9.x). Bekomme mein mouseover Script nicht zum Laufen.
Hier das Script:

Code: PHP

<script type="text/javascript">                
var main = new Array;
var stattxt = new Array;
    
main.push("bilder/navigation/navi_site1");
stattxt.push("Site1");
main.push("bilder/navigation/navi_site2");
stattxt.push("Site2"); 
main.push("bilder/navigation/navi_site3");
stattxt.push("Site3");
...

var out = new Array(main.length);
var over = new Array(main.length);
var loaded = false;

function doPreload() {  
   for (i=0; i<main.length; i++) {
      out[i]= new Image();      
      out[i].src= main[i]+'_12.gif';      
      over[i]= new Image();
      over[i].src= main[i]+'_12_r.gif';
   }
   loaded=true;
}

function mouseOver(name,nr) {
   if(loaded) {      
      document.images[name].src = over[nr].src;
   }
   window.status = name;
}
    
function mouseOut(name,nr) {
   if(loaded) {
      document.images[name].src = out[nr].src;
   }
   window.status = '';
}
</script>

Im body-Tag rufe ich dann die Preload Methode auf:

Code: PHP

<body onload="doPreload();">

Die mouseover-Events schauen wie folgt aus:

Code: PHP

<tr><td><a href="..." onmouseover="mouseOver('Site1', 1);return true" onmouseout="mouseOut('Site1', 1);return true"><img src="..." alt="..." name="..." title="..."></a></td></tr>

Funktioniert jedenfalls wunderbar auf Windows-Basis (Firfox, IE, Opera, ...).
Jemand eine Idee?

lg

watchout schrieb am 15.12.2004 um 17:36

use CSS.

Rektal schrieb am 15.12.2004 um 17:45

1) ".push()" ist schlecht weil IE 5.0 das nicht kann, JS error und kein JS code geht mehr g'scheit auf deiner Seite. Besser meinarray[meinarray.length] = 'string'; , selber Effekt. Bei vielen Stats ist 5.0 leider immer noch vor 5.5; YMMV.

2) geht alert(document.images) unter IE Mac? Geht document.images['Site1'] ? oder kommt undefined zurueck? Ein bischen selber Initiative ergreifen, also alert() statements reinhauen damit du weisst wie weit er kommt im JS.

3) Verwende seit einiger Zeit folgenden Code erfolgreich:

Code: PHP

function PreloadImages(listImages) {
	if (document.images) {
		if (!document.Preload) {
			document.Preload = [];
		}
		for (var i = 0, j = document.Preload.length, li = listImages.length; i < li; i++) {
			document.Preload[j] = new Image;
			document.Preload[j++].src = listImages[i];
		}
	}
}

function AutoHover(preload) {
	if (!document.getElementsByTagName) {
		return;
	}
	var imgs = document.getElementsByTagName('img');
	var i, l = imgs.length;
	var j, m;
	var reSwapme = /autoswap|auto-swap/;
	var reIsActive = /_a\.[a-z]+/;
	var reFileParts = /(.*)\.([a-z]+$)/;
	var srcParts;
	var listImages = [];
	for (i = 0; i < l; i++) {
		if (reSwapme.test(imgs[i].className) && !reIsActive.test(imgs[i].src)) {
			srcParts = imgs[i].src.match(reFileParts)
			imgs[i]._srcNormal = imgs[i].src;
			imgs[i]._srcActive = srcParts[1] + '_a.' + srcParts[2];
			listImages[listImages.length] = imgs[i]._srcActive;
			imgs[i].onmouseover = function() {
				this.src = this._srcActive;
			}
			imgs[i].onmouseout = function() {
				this.src = this._srcNormal;
			}
		}
	}

	// Zusatzeinbau: Auch Images für Submit Buttons berücksichtigen.
	var inputs = document.getElementsByTagName('input');
	l = inputs.length;
	for (i = 0; i < l; i++) {
		if (reSwapme.test(inputs[i].className) && !reIsActive.test(inputs[i].src)) {
			srcParts = inputs[i].src.match(reFileParts)
			inputs[i]._srcNormal = inputs[i].src;
			inputs[i]._srcActive = srcParts[1] + '_a.' + srcParts[2];
			listImages[listImages.length] = inputs[i]._srcActive;
			inputs[i].onmouseover = function() {
				this.src = this._srcActive;
			}
			inputs[i].onmouseout = function() {
				this.src = this._srcNormal;
			}
		}
	}

	if (preload) {
		PreloadImages(listImages);
	}
}

In dem du den Images, die eine Hover-Funktion haben, eine CSS Klasse namens autoswap (oder auto-swap) zuweist, sorgt der Javascript-Code automatisch dafuer, dass die Images geladen werden, die fuer den Hover notwendig sind. Er geht naemlich davon aus, dass das Image fuer den selben Namen hat, nur mit '_a' am Schluss. Solche Dinge muss man eben Applikationsspezifisch anpassen, sonst nix. Im window.onload rufst du einfach AutoHover(true); auf, mehr sollte net zu machen sein.

Nachteil: hovers funktionieren erst, wenn die Seite komplett geladen ist. Wenns also so schon viele Images, Scripten, Frames, Flash, etc sind, ist das wahrscheinlich nicht so gut.

Andererseits hab ichs in der Praxis zu 75% erlebt, dass Bilder umbenannt wurden, dann aber vergessen wurden in den Preload-Code aufgenommen zu werden. YMMV, HTH

Auswendig weiss ich jetzt auch nimmmer, ob _der_ Code im Mac IE geht, denke schon das er getestet wurde, weiss aber nimmer. Vielleicht ist er auch so fuer irgendwen brauchbar.

boernd schrieb am 15.12.2004 um 17:54

wow, danke für die umfangreiche Antwort!

Komm erst morgen dazu, das auszuprobieren, poste dann das Resultat.

Schönen Abend noch!

boernd schrieb am 17.12.2004 um 13:49

Hallo,

ja durch das Ersetzen des der push()-Methode gehts jetzt.
danke!

Rektal schrieb am 18.12.2004 um 00:15

Ah, interessant. Kann der Mac IE 5 also auch nicht? Jetzt muss ich direkt mal checken ob der JS Prorotypen kann, der IE 5.0 glaub ich kanns ja ...