Rollover Chaos

HAM

HAM

Well-known member
ID: 324459
L
24 April 2006
338
22
Ich habe für eine Freundin eine Webseite entworfen, die ich versuche gerade umzusetzen. Leider scheiter ich an einer komischen Erscheinung.

Es gibt sechs Navigationsfelder, die man anklicken kann. Die Inhalte erscheinen dann in Form eines Popups. Bei jedem Navigationsfeld ist ein Rollovereffekt eingebaut. Aber ab dem zweiten Feld tauchen die Rollovers an immer derselben stelle auf: schaut

https://www.pe-ensemble.de/nora/bilder.php

HIer der code: Ich freu mich über Ratschläge und Hilfe.

PHP: 
<html>
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	margin-top:-270px;
	margin-left:-512px;
	left:50%;
	top:50%;
	width:1024px;
	height:540px;
	z-index:1;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<head>
<title>schruth</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('Bilder/bilder2_02.gif','Bilder/bilder2_09.gif','Bilder/bilder2_05.gif','Bilder/bilder2_06.gif','Bilder/bilder2_07.gif','Bilder/bilder2_11.gif')">
<!-- ImageReady Slices (schruth.psd) -->
<div id="layer1"><table id="Tabelle_01" width="1025" height="541" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="7">
			<img src="Bilder/bilder_01.gif" width="120" height="540" alt=""></td>
		<td rowspan="7"><a href="#"
OnMouseOver="document.bild.src='Bilder/bilder2_02.gif'"
OnMouseOut="document.bild.src='Bilder/bilder_02.gif'"
OnClick="window.open('https://www.pe-ensemble.de/nora/inhalte/schruth.html','Pop-Up','width=400,height=700,scrollbars=yes')">
<img src="Bilder/bilder_02.gif" alt="Bild" name="bild" width="153" height="540" border="0"></a>
</td>
		<td rowspan="7">
			<img src="Bilder/bilder_03.gif" width="49" height="540" alt=""></td>
		<td>
			<img src="Bilder/bilder_04.gif" width="155" height="120" alt=""></td>
		<td rowspan="4"><a href="#"
OnMouseOver="document.bild2.src='Bilder/bilder2_05.gif'"
OnMouseOut="document.bild2.src='Bilder/bilder_05.gif'"
OnClick="window.open('https://www.pe-ensemble.de/nora/inhalte/schruth3.html','Pop-Up','width=400,height=700,scrollbars=yes')">
<img src="Bilder/bilder_05.gif" alt="Bild3" name="bild3" border="0"></a></td>
		<td rowspan="3"><a href="#"
OnMouseOver="document.bild2.src='Bilder/bilder2_06.gif'"
OnMouseOut="document.bild2.src='Bilder/bilder_06.gif'"
OnClick="window.open('https://www.pe-ensemble.de/nora/inhalte/schruth2.html','Pop-Up','width=400,height=700,scrollbars=yes')">
<img src="Bilder/bilder_06.gif" alt="Bild4" name="bild4" border="0"></a></td>
		<td rowspan="2"><a href="#"
OnMouseOver="document.bild2.src='Bilder/bilder2_07.gif'"
OnMouseOut="document.bild2.src='Bilder/bilder_07.gif'"
OnClick="window.open('https://www.pe-ensemble.de/nora/inhalte/schruth.html','Pop-Up','width=400,height=700,scrollbars=yes')">
<img src="Bilder/bilder_07.gif" alt="Bild5" name="bild5" border="0"></a></td>
		<td colspan="3" rowspan="3">
			<img src="Bilder/bilder_08.gif" width="112" height="319" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="120" alt=""></td>
	</tr>
	<tr>
		<td rowspan="5"><a href="#"
OnMouseOver="document.bild2.src='Bilder/bilder2_09.gif'"
OnMouseOut="document.bild2.src='Bilder/bilder_09.gif'"
OnClick="window.open('https://www.pe-ensemble.de/nora/inhalte/schruth.html','Pop-Up','width=400,height=700,scrollbars=yes')">
<img src="Bilder/bilder_09.gif" alt="Bild2" name="bild2" width="155" height="376" border="0"></a></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="125" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/bilder_10.gif" width="147" height="74" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="74" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2"><a href="#"
OnMouseOver="document.bild2.src='Bilder/bilder2_11.gif'"
OnMouseOut="document.bild2.src='Bilder/bilder_11.gif'"
OnClick="window.open('https://www.pe-ensemble.de/nora/inhalte/schruth.html','Pop-Up','width=400,height=700,scrollbars=yes')">
<img src="Bilder/bilder_11.gif" alt="Bild6" name="bild6" border="0"></a></td>
		<td colspan="2" rowspan="2">
			<img src="Bilder/bilder_12.gif" width="97" height="173" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="125" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="Bilder/bilder_13.gif" width="178" height="96" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="48" alt=""></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="2">
			<img src="Bilder/bilder_14.gif" width="273" height="48" alt=""></td>
		<td rowspan="2">
			<img src="Bilder/bilder_15.gif" width="96" height="48" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="4" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/bilder_16.gif" width="155" height="44" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="44" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="120" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="153" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="49" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="155" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="178" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="110" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="147" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="15" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="96" height="1" alt=""></td>
		<td></td>
	</tr>
</table></div>
<!-- End ImageReady Slices -->
</body>
</html>
 
Zuletzt bearbeitet:
1. Dein Link geht nicht
2. Wenn ich das "Index.php" aus der URL entferne, wird mir nur ein Bild angezeigt. Es lässt sich aber nichts anklicken oder so.

 
Du schreibst fast überall "document.bild2.src=" Damit wird dann auch immer das zweite Bild geändert (mit dem Namen bild2). Du musst dein Ziel schon anpassen, wenn du Copy and Paste machst ;)
 
Nur so als Hinweis, das ganze machst Du mit JS, könntest Du aber auch mit CSS machen damit du Besucher mit deaktivierten JS nicht ausschließt. Ich würde bei ner Startseite nicht auf reines JS setzen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben