Internet Explorer

W

wavetraxx

Erfahrenes Mitglied
Hallo zusammen,

ich habe ne kurze Frage betreffend JAVA Script.

Ich habe einen einfachen Rollover Effekt gemacht mit Javascript. Dieser funktioniert bei IE und Firefox. Aber beim Internet Explorer 7 warnt er mich beim ersten mal, da der Script evtl. Schäden verursachen kann. Kann er ja nicht, ist ja nur ein einfacher Rollover Effekt.

Kann man dies irgendwie umgehen? Gibt es da Browserfreundlichere Scripte?

Java Script habe ich von http://www.javascript-fx.com!

Code: 
/****** User may alter these to change the fade effect ********/
var FadeInStep 	= 20;
var FadeOutStep 	= 20;
/****** Don't alter anything else **************/
document.write('<STYLE TYPE="text/css">.imgFader{ position:relative; filter:alpha(opacity=0); -moz-opacity:0.0 }</STYLE>');

if(!window.JSFX)
	JSFX=new Object();

JSFX.RolloverObjects=new Array();

JSFX.Rollover = function(name, img)
{
	JSFX.RolloverObjects[name]=new Image();
	JSFX.RolloverObjects[name].img_src = img;	
	if(!JSFX.Rollover.postLoad)
		JSFX.RolloverObjects[name].src = img;
}
JSFX.Rollover.postLoad = false;
JSFX.Rollover.loadImages = function()
{
	var i;
	for(i in JSFX.RolloverObjects)
	{
		r=JSFX.RolloverObjects[i];
		r.src=r.img_src;
	}
}
JSFX.Rollover.error = function(n)
{
		alert("JSFX.Rollover - An Error has been detected\n"
			+ "----------------------------------\n"
			+ "You must define a JSFX.Rollover in your document\n"
			+ "JSFX.Rollover(\""+n+"\",\"your_on_img.gif\")\n"
			+ "(check the spelling of your JSFX.Rollovers)");
}
/*******************************************************************
*
* Function    : getImg
*
* Description : In Netscape 4 images could be in layers so we might
*		    have to recurse the layers to find the image
*
*****************************************************************/
JSFX.getImg = function(n, d) 
{
	var img = d.images[n];
	if(!img && d.layers)  
		for(var i=0 ; !img && i<d.layers.length ; i++)
			img=JSFX.getImg(n,d.layers[i].document);
	return img;
}
/*******************************************************************
*
* Function    : findImg
*
* Description : gets the image from the document and reports an
*		    error if it cannot find it.
*
*****************************************************************/
JSFX.findImg = function(n, d) 
{
	var img = JSFX.getImg(n, d);

	/*** Stop emails because the image was named incorrectly ***/
	if(!img)
	{
		alert("JSFX.findImg - An Error has been detected\n"
			+ "----------------------------------\n"
			+ "You must define an image in your document\n"
			+ "<IMG SRC=\"your_image.ext\" NAME=\""+n+"\">\n"
			+ "(check the NAME= attribute of your images)");

		return(new Image());
	}
	return img;
}

JSFX.ImageFadeRunning=false;
JSFX.ImageFadeInterval=30;

/*******************************************************************
*
* Function    : imgFadeIn
*
* Description : This function is based on the turn_on() function
*		      of animate2.js (animated rollovers from www.roy.whittle.com).
*		      Each image object is given a state. 
*			OnMouseOver the state is switched depending on the current state.
*			Current state -> Switch to
*			===========================
*			null		->	OFF.
*			OFF		->	FADE_IN
*			FADE_OUT	->	FADE_IN
*			FADE_OUT	->	FADE_OUT_IN (if the new image is different)
*			FADE_IN_OUT->	FADE_IN (if the image is the same)
*****************************************************************/
JSFX.imgFadeIn = function(img, imgSrc)
{
	if(img) 
	{
		if(img.state == null) 
		{
			img.state = "OFF";
			img.index = 0;
			img.next_on    = null;
		}

		if(img.state == "OFF")
		{
			/*** Vers 1.7 only load the ON image once ever ***/
			if(img.src.indexOf(imgSrc) == -1)
				img.src=imgSrc;

			img.currSrc = imgSrc;
			img.state = "FADE_IN";
			JSFX.startFading();
		}
		else if( img.state == "FADE_IN_OUT"
			|| img.state == "FADE_OUT_IN"
			|| img.state == "FADE_OUT")
		{
			if(img.currSrc == imgSrc)
				img.state = "FADE_IN";
			else
			{

				img.next_on = imgSrc;
				img.state="FADE_OUT_IN";
			}
		}
	}
}
/*******************************************************************
*
* Function    : imgFadeOut
*
* Description : This function is based on the turn_off function
*		      of animate2.js (animated rollovers from www.roy.whittle.com).
*		      Each image object is given a state. 
*			OnMouseOut the state is switched depending on the current state.
*			Current state -> Switch to
*			===========================
*			ON		->	FADE_OUT.
*			FADE_IN	->	FADE_IN_OUT.
*			FADE_OUT_IN	->	FADE_IN. (after swapping to the next image)
*****************************************************************/
JSFX.imgFadeOut = function(img)
{
	if(img)
	{
		if(img.state=="ON")
		{
			img.state="FADE_OUT";
			JSFX.startFading();
		}
		else if(img.state == "FADE_IN")
		{
			img.state="FADE_IN_OUT";
		}
		else if(img.state=="FADE_OUT_IN")
		{
			img.next_on == null;
			img.state = "FADE_OUT";
		}
	}
}
/*******************************************************************
*
* Function    : startFading
*
* Description : This function is based on the start_animating() function
*	        	of animate2.js (animated rollovers from www.roy.whittle.com).
*			If the timer is not currently running, it is started.
*			Only 1 timer is used for all objects
*****************************************************************/
JSFX.startFading = function()
{
	if(!JSFX.ImageFadeRunning)
		JSFX.ImageFadeAnimation();
}

/*******************************************************************
*
* Function    : ImageFadeAnimation
*
* Description : This function is based on the Animate function
*		    of animate2.js (animated rollovers from www.roy.whittle.com).
*		    Each image object has a state. This function
*		    modifies each object and (possibly) changes its state.
*****************************************************************/
JSFX.ImageFadeAnimation = function()
{
	JSFX.ImageFadeRunning = false;
	for(i=0 ; i<document.images.length ; i++)
	{
		var img = document.images[i];
		if(img.state)
		{
			if(img.state == "FADE_IN")
			{
				img.index+=FadeInStep;

				if(img.index > 100)
					img.index = 100;

				if(img.filters)
					img.filters.alpha.opacity = img.index;
				else
					img.style.MozOpacity = img.index/101;

				if(img.index == 100)
					img.state="ON";
				else
					JSFX.ImageFadeRunning = true;
			}
			else if(img.state == "FADE_IN_OUT")
			{
				img.index+=FadeInStep;
				if(img.index > 100)
					img.index = 100;

				if(img.filters)
					img.filters.alpha.opacity = img.index;
				else 
					img.style.MozOpacity = img.index/101;

	
				if(img.index == 100)
					img.state="FADE_OUT";

				JSFX.ImageFadeRunning = true;
			}
			else if(img.state == "FADE_OUT")
			{
				img.index-=FadeOutStep;
				if(img.index < 0)
					img.index = 0;

				if(img.filters)
					img.filters.alpha.opacity = img.index;
				else
					img.style.MozOpacity = img.index/101;


				if(img.index == 0)
					img.state="OFF";
				else
					JSFX.ImageFadeRunning = true;
			}
			else if(img.state == "FADE_OUT_IN")
			{
				img.index-=FadeOutStep;
				if(img.index < 0)
					img.index = 0;

				if(img.filters)
					img.filters.alpha.opacity = img.index;
				else
					img.style.MozOpacity = img.index/101;

				if(img.index == 0)
				{
					img.src = img.next_on;
					img.currSrc = img.next_on;
					img.state="FADE_IN";
				}
				JSFX.ImageFadeRunning = true;
			}
		}
	}
	/*** Check to see if we need to animate any more frames. ***/
	if(JSFX.ImageFadeRunning)
		setTimeout("JSFX.ImageFadeAnimation()", JSFX.ImageFadeInterval);
}
/*******************************************************************
*
* Function    : hasOpacity
*
* Description : Tests if the browser allows Opacity
*
*****************************************************************/
JSFX.hasOpacity = function(obj)
{
	if(document.layers)
		return false;

	if(window.opera)
		return false;

	if(navigator.userAgent.toLowerCase().indexOf("mac") != -1)
		return false;

	return true;
}
/*******************************************************************
*
* Function    : fadeIn /fadeOut
*
* Description : Detects browser that can do opacity and fades the images
*		    For browsers that do not support opacity it just does an image swap.
*		    (I only know about NS4 but maybe IE on a Mac also ?)
*		    For these functions to work you need to name the image
*			e.g. for an image named "home" you need
*			<IMG .... NAME="home">
*		    and you need 2 images, the on and the off image
*****************************************************************/
JSFX.fadeIn = function(imgName, rollName)
{
	if(rollName == null)
		rollName=imgName;

	/*** Stop emails because the rollover was named incorrectly ***/
	if(!JSFX.RolloverObjects[rollName])
	{
		JSFX.Rollover.error(rollName);
		return;
	}

	var img = JSFX.findImg(imgName, document);
	if(JSFX.hasOpacity(img))
		JSFX.imgFadeIn(img, JSFX.RolloverObjects[rollName].img_src);
	else
	{
		if(img.offSrc==null)
			img.offSrc=img.src;
		img.src=JSFX.RolloverObjects[rollName].img_src;
	}
}
JSFX.fadeOut = function(imgName)
{
	var img = JSFX.findImg(imgName, document);
	if(JSFX.hasOpacity(img))
		JSFX.imgFadeOut(img);
	else
		img.src=img.offSrc;
}
/*******************************************************************
*
* Function    : imgOn /imgOff
*
* Description : Included these functions so you can mix simple and
*		    fading rollovers without having to include 2 ".js" files
*
*****************************************************************/
JSFX.imgOn = function(imgName, rollName)
{
	if(rollName == null)
		rollName=imgName;

	/*** Stop emails because the rollover was named incorrectly ***/
	if(!JSFX.RolloverObjects[rollName])
	{
		JSFX.Rollover.error(rollName);
		return;
	}
	var img = JSFX.findImg(imgName,document);
	if(img.offSrc==null)
		img.offSrc=img.src;
	img.src=JSFX.RolloverObjects[rollName].img_src;
}
JSFX.imgOff = function(imgName)
{
	var img = JSFX.findImg(imgName,document);
	img.src=img.offSrc;
}


/*************************************************************************/
/* Sort out bandwidth stealers */
/*************************************************************************
var str = new String(window.location);
if(str.indexOf("javascript-fx") == -1)
{
	document.write('<SCRIPT LANGUAGE=JavaScript SRC="http://www.javascript-fx.com/javascript/JSFX_Layer.js" TYPE="text/javascript"></SCRIPT>');
}
/*************************************************************************/

Und so sieht mein HTML-File aus:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
<META NAME="REVISIT-AFTER" CONTENT="7 days">
<meta NAME="description" CONTENT="Massagen aller Art, Kopf, Füsse, Beine, Rücken, Ganzkörpermassage, Hot-Stone Massage">
<meta NAME="keywords" CONTENT="wellness, massagen, zeit, zeitmanagement, erholung, kontakt, sitemap, entspannen, dich, entspannedich, rohner, corine, kopf, fuss, hände, haende, füsse, rücken, fuesse, ruecken, hot, hot-stone, ganz, ganzkörper, ganzkoerper, cold, Massage, Massagen, Beauty, Entspannen, entspanne">
<title>Willkommen auf entspanne-dich.com</title>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />

</head>

<script language="javascript" src="Java/JSFX_FadingRollovers.js"></script>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
    JSFX.Rollover("button", "Bilder/Massage_Ganzkoerper02.jpg");
	JSFX.Rollover("button2", "Bilder/Massage_Hotstone02.jpg");
	JSFX.Rollover("button3", "Bilder/Massage_Ruecken02.jpg");
	JSFX.Rollover("button4", "Bilder/Massage_Fuss02.jpg");
	JSFX.Rollover("button5", "Bilder/Ohrenkerzen02.jpg");
	
	
	JSFX.Rollover("button6", "Bilder/Navi_Start02.jpg");
	JSFX.Rollover("button7", "Bilder/Navi_Wellness02.jpg");
	JSFX.Rollover("button8", "Bilder/Navi_Zeitmanagement02.jpg");
	JSFX.Rollover("button9", "Bilder/Navi_Massagen02.jpg");
	JSFX.Rollover("button10", "Bilder/Navi_Uebermich02.jpg");
	JSFX.Rollover("button11", "Bilder/Navi_Preisliste02.jpg");
	JSFX.Rollover("button12", "Bilder/Navi_Kontakt02.jpg");

//-->
</SCRIPT> 



<body class="BGMain">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top">&nbsp;</td>
    <td width="950" valign="top" class="Blaurand"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="148" valign="top"><img src="Bilder/Titel_NEU.jpg"/></td>
      </tr>
      <tr>
        <td class="BGNavi">
        
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr><td height="66" valign="top" ><table width="100%" border="0" cellspacing="0" cellpadding="0">
           <tr>
             <td width="206" valign="top">&nbsp;</td>
             <td width="80" valign="top"><a onMouseOver="JSFX.fadeIn('button6')" onMouseOut="JSFX.fadeOut('button6')" href="index.html"><img src="Bilder/Spacer.gif" width="80" height="59" border="0" name="button6" class="imgFader"></a></td>
             <td width="85" valign="top"><a onMouseOver="JSFX.fadeIn('button7')" onMouseOut="JSFX.fadeOut('button7')" href="Wellness.html"><img src="Bilder/Spacer.gif" width="85" height="50" border="0" name="button7" class="imgFader"></a></td>
             <td width="140" valign="top"><a onMouseOver="JSFX.fadeIn('button8')" onMouseOut="JSFX.fadeOut('button8')" href="Zeitmanagement.html"><img src="Bilder/Spacer.gif" width="140" height="45" border="0" name="button8" class="imgFader"></a></td>
             <td width="90" valign="top"><a onMouseOver="JSFX.fadeIn('button9')" onMouseOut="JSFX.fadeOut('button9')" href="Massagen.html"><img src="Bilder/Spacer.gif" width="90" height="45" border="0" name="button9" class="imgFader"></a></td>
             <td width="94" valign="top"><a onMouseOver="JSFX.fadeIn('button10')" onMouseOut="JSFX.fadeOut('button10')" href="Uebermich.html"><img src="Bilder/Spacer.gif" width="94" height="50" border="0" name="button10" class="imgFader"></a></td>
             <td width="82" valign="top"><a onMouseOver="JSFX.fadeIn('button11')" onMouseOut="JSFX.fadeOut('button11')" href="Preisliste.html"><img src="Bilder/Spacer.gif" width="82" height="56" border="0" name="button11" class="imgFader"></a></td>
             <td valign="top"><a onMouseOver="JSFX.fadeIn('button12')" onMouseOut="JSFX.fadeOut('button12')" href="Kontakt.html"><img src="Bilder/Spacer.gif" width="85" height="66" border="0" name="button12" class="imgFader"></a></td>
           </tr>
         </table></td>
         </tr>         
        </table>
        
        </td>
      </tr>
      <tr>
        <td valign="top" >
		
	
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img border="0" src="Bilder/Index_Neu.jpg"></td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td valign="top" background="Bilder/Massage_Ganzkoerper.jpg">
<a onMouseOver="JSFX.fadeIn('button')" onMouseOut="JSFX.fadeOut('button')" href="Massage_Ganzkoerper.html"><img src="Bilder/Massage_Ganzkoerper.jpg" border="0" name="button" class="imgFader"/></a>
</td>
        <td valign="top" background="Bilder/Massage_Hotstone.jpg"><a onMouseOver="JSFX.fadeIn('button2')" onMouseOut="JSFX.fadeOut('button2')" href="Massage_Hotstone.html" ><img src="Bilder/Massage_Hotstone.jpg" border="0" name="button2" class="imgFader" /></a>
</td>
        <td valign="top" background="Bilder/Massage_Ruecken.jpg"><a onMouseOver="JSFX.fadeIn('button3')" onMouseOut="JSFX.fadeOut('button3')" href="Massage_Ruecken.html" ><img src="Bilder/Massage_Ruecken.jpg" border="0" name="button3" class="imgFader" /></a>
</td>
        <td valign="top" background="Bilder/Massage_Fuss.jpg"><a onMouseOver="JSFX.fadeIn('button4')" onMouseOut="JSFX.fadeOut('button4')" href="Massage_FussHand.html" ><img src="Bilder/Massage_Fuss.jpg" border="0"  name="button4" class="imgFader"/></a></td>
        <td valign="top" background="Bilder/Ohrenkerzen.jpg"><a onMouseOver="JSFX.fadeIn('button5')" onMouseOut="JSFX.fadeOut('button5')" href="Massage_OhrenKerzen.html" ><img src="Bilder/Ohrenkerzen.jpg" border="0" name="button5" class="imgFader" /></a></td>
        </tr>
    </table></td>
  </tr>
</table>

		</td>
      </tr>
    </table></td>
    <td valign="top">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Hat mir da jemand eine Lösung?

Bin da um jeden Tipp sehr dankbar.
 
Hi,

die Fehlermeldung tritt auch auf, wenn du sie von einem Webserver aus startest? Hört sich für mich an, als würdest du das Dokument aus dem Filesystem heraus starten - z.B. file:///C:/dokument.html

Ciao
Quaese
 
@Quaese
Also die HTML Datei habe ich noch nicht hochgeladen. Also noch direkt vom PC aus.

Werde ich morgen aber mal austesten, wie das ganze online funktioniert.

Ich hatte eben zu einem früheren Zeitpunkt mal mit einem JAVAScript gearbeitet, bei dem gab es aber keine Probleme, egal ob online oder nur von der Harddisk. Aber ist schon länger her. Darum bin ich jetzt verunsichert. Werde es aber wie gesagt morgen mal austesten.

Sollte ja eigentlich kein Problem sein mit dem Script, ist ja "nur" ein rollover Javascript!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück