DOM&Style - Alles Prima, ohne IE wär's so schön

W

watzlav

Aktives Mitglied
Thread Starter
Dabei seit
02.11.2006
Beiträge
315
Reaktionspunkte
5
Hallo!
Ich habe folgende Seite (normalerweise in einer Framing Seite) und darauf sollten unten Stichpunkte sein. Beim "berühren" der Stichpunkte sollte eine Deteilbeschreibung auftauchen. Soweit alles klar und es funktioniert auch. Aber eben nur mitt allen Browsern, allen außer dem InternetExplorer. Der Macht Mist.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>Logo</title>
		<style type="text/css">
			body { background-color:#FFCC66;
				   font-family: Calibri, Arial, Helvetica, sans-serif;
				   font-size: 0.9pc;
			}
			h1 { font-size: x-large;
				 color: #101010;
				 padding: 0px 0px 0px 0px;
			}
			h2 { font-size: large;
				 color: #101010;
				 margin: 10pt 3pt 2pt 3pt;
				 padding: 0px 0px 0px 0px;
			}
			h3 { font-size: medium;
				 color: #101010;
				 margin: 10pt 3pt 2pt 3pt;
				 padding: 0px 0px 0px 0px;
			}
			p { color: #33201a;
				margin-right: 30px;
				margin-top:0px;
			}
			.contentbox { background-color: #f6bf51;
						  margin: 2cm 5% 10px 5px;
						  padding: 10px 5px 5px 35px;
						  width: 750px;
						  text-align: left;
			}
			a:link { color: #f15a22;
					 text-decoration: none;
			}
			a:visited { color: #bc3e0f;
						text-decoration: none;
			}
			a:active, a:hover, a:focus { color: #f17f22;
										 text-decoration: underline;
			}
			.box1 { margin: 5px 5px 5px 5px;
					padding: 5px 5px 5px 5px;
			}
			.box2 {	margin: 5px 5px 5px 5px;
					padding: 5px 5px 5px 5px;
			}
			.ort { position:absolute;
				   top: 3px;
				   left: 3px;
				   margin:0px 0px 0px 0px;
				   padding:0px 0px 0px 0px;
			}
		</style>
		<link rel="Stylesheet" type="text/css" href="stichp.css" />
		<script type="text/javascript">
		window.onmousemove = update_position;
		function update_position(event)
		{
			if(window.all)
			{
				x = window.event.x + window.scollX;
				y = window.event.y + window.scrollY;
				x += 20;
				y -= 20;
				y = window.innerHeight - y;
				document.all.d1.style.left = x + "px";
				document.all.d1.style.bottom = y + "px";
			}else{
				x = event.pageX;
				y = event.pageY;
				x += 20;
				y -= 20;
				y = window.innerHeight - y;
				document.getElementById('d1').style.left = x + "px";
				document.getElementById('d1').style.bottom = y + "px";
				document.getElementById('d2').style.left = x + "px";
				document.getElementById('d2').style.bottom = y + "px";
			}
		}
		//-----
		function show_stich(id)
		{
			var idd = 'd' + id;
			document.getElementById(idd).style.visibility = "visible";
		}
		
		function hide_stich(id)
		{
			var idd = 'd' + id;
			document.getElementById(idd).style.visibility = "hidden";
		}
		</script>
	</head>
	<body>
		<center>
			<div class="contentbox">
				<table>
					<tr>
						<td style="width: 70%; vertical-align:middle;">
							<p style="font-size:medium;">
								Kontrollierte Verbrennung<br />
								W&auml;rme f&uuml;r Herz, Seele und Geldbeutel
							</p>
						</td>
						<td>
							<img src="poemindex.jpg" alt="Haus" />
						</td>
					</tr>
				</table>
			</div>
		</center>
		<div class="stichpunktrahmen">
			<a class="stich" id="s1" onmouseover="show_stich('1')" onmouseout="hide_stich('1')">Stichpunkt 1</a>
			<a class="stich" id="s2" onmouseover="show_stich('2')" onmouseout="hide_stich('2')">Stichpunkt 2</a>
		</div>
		<div class="stichdesc" id="d1">Stichpunktbeschreibung 1<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
		</div>
		<div class="stichdesc" id="d2">Stichpunktbeschreibung 2<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
		</div>
	</body>
</html>

Die Seite Sieht so aus: http://wjm.wj.funpic.de/problem/problem.html

Und ich so: :confused::motz::kopfkratz:

P.S.: IE für Mac http://www.kronenberg.org/ies4osx/
 
Zuletzt bearbeitet von einem Moderator:
overLIB... ja, mann kann mit dem Helikopter zum Bäcker fliegen... overLIB kann viel zu viel. Außerdem basieren die Boxen, die angezeigt werden sollen auf CSS&HTML. Sie existieren schon, damit sie auch von Google indiziert werden. Ich habe nur ein Problem mit den Zeilen:

HTML: 
document.getElementById('d1').style.left = x + "px";
document.getElementById('d1').style.bottom = y + "px";
document.getElementById('d2').style.left = x + "px";
document.getElementById('d2').style.bottom = y + "px";

Der IE weist die Daten einfach nicht zu, d.h.: die Boxen bleiben stehen, da wo sie im CSS hinbestimmt wurden.
 
Welcher IE?
Weil der IE6 hat Probleme mit der Visibility, nimm mal statt dessen Display none oder Block her.
 
.... du wärst nicht der Erste, der auf seiner Webseite den Hinweiß hat: geht nicht mit dem IE! optimiert für Firefox, Opera, Safari....
Ich würde es schon aus Protest so lassen ;)
 
wenn ich ehrlich bin: ich selbst würde aus Protest gerne sogar eine IE-Blockade einbauen. Es ist aber nicht meine Webseite...

Es ist auch nicht das Problem, dass der IE6 es nicht anzeigen würde. Er zeigt es an der falschen Stelle an. Daraus schließe ich, dass der IE die folgenden Zeilen nicht ausführt:

HTML: 
document.getElementById('d1').style.left = x + "px";
document.getElementById('d1').style.bottom = y + "px";
document.getElementById('d2').style.left = x + "px";
document.getElementById('d2').style.bottom = y + "px";

Meine eigene Webseite wird demnächst ein reDesign bekommen, ohne IE Berücksichtigung... -> *ienichtausstehenkann*
 
ähm, das war jetzt keine Aufforderung nicht mehr zu antworten... Das Problem habe ich immer noch
 
ich schieb Dich mal zum Design, da paßt es thematisch besser!
 
Es geht hier definitiv nicht um das zwischenzeitliche anzeigen von irgendetwas. Ich möchte einen Text neben dem Cursor positionieren, der bereits im Kontext vorhanden ist, aber erst dann eigeblendet wird. Nur auf diese Art durchsucht Google auch den "Tooltipp" - der keiner ist - und nutzt seinen Kontext in den Suchergebnissen.

Es ist auch kein Problem den Text ein- und auszublenden, sondern die Zuweisung der Variablen auf den Attributwert "[objekt].style.left" und "[objekt].style.bottom" wird nicht durchgeführt. Das ist und war mein einziges Problem. Ich will wirklich nicht
overLIB... ja, mann kann mit dem Helikopter zum Bäcker fliegen...
Zum Vergrößern anklicken....
 
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>test</title>
<style type="text/css">
/* <![CDATA[ */

body 
{ 
	background-color:#FFCC66;
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 0.9pc;
}
.stichpunktrahmen 
{ 
	background-color: #eebb55;
	padding: 5px;
	margin: 0;
	position:absolute;
	bottom: 0;
	left: 0;
	color: #000;
}
.stich 
{ 
	color: #300000;
	padding: 0;
	margin: 0;
}
.stich:hover 
{
	color: #f17f22;
	text-decoration: underline;
}
.stichdesc 
{ 
	position: absolute;
	height: 100px;
	left: 0;
	bottom: 20px;
	border: 0;
	color: #fff;
	background-color: #000;
	padding: 5px;
	width: 300px;
	display: none;
}
	
/* ]]> */
</style>

<script type="text/javascript">
// <![CDATA[

var idd, px = "px";

function update_position (e)
{
	if (idd)
	{
		if (window.event)
		{
			x = window.event.offsetX;
			y = 50 - window.event.offsetY;
		}
		else // Firefox
		{
			// self.innerHeight kann nur durch Pagereload ermittelt werden
			// ansonsten fester Abstand; y = e.clientY - e.pageY + 30;
			x = e.clientX;
			y = self.innerHeight - e.pageY + 30;
		}
		
		x += 20;

		document.getElementById(idd).style.bottom = y + px;
		document.getElementById(idd).style.left   = x + px;
		document.getElementById(idd).innerHTML    = "ID: " + idd + "; x/y: " + x + "/" + y;
	}
}

function do_stich (id, flag)
{
	idd = "d" + id;
	document.getElementById(idd).style.display = (flag) ? "block" : "none";
}

document.onmousemove = update_position;

// ]]>
</script>

</head>
<body>

<div id="d1" class="stichdesc"></div>
<div id="d2" class="stichdesc"></div>

<div class="stichpunktrahmen">
<a class="stich" onmouseover="do_stich(1, 1)" onmouseout="do_stich(1)">Stichpunkt 1</a>
<a class="stich" onmouseover="do_stich(2, 1)" onmouseout="do_stich(2)">Stichpunkt 2</a>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
DANKE!

Werde ich verwenden! Ich würde gerne noch eine bestimmte Zeile darin verstehen (jetzt stell ich auch noch Ansprüche...), den Rest kann ich nachvollziehen: in der Zeile
Code: 
document.getElementById(idd).innerHTML    = "ID: " + idd + "; x/y: " + x + "/" + y;
wüsste ich gerne was das
Code: 
ID: px; x/y: [x]/[y];
(So wird es meines Achtens nach dann interpretiert) bewirkt.
 
watzlav schrieb:
DANKE!
wüsste ich gerne was das ID: px; x/y: [x]/[y]; bewirkt.
Zum Vergrößern anklicken....
Nein, da steht nicht [x]/[y], da werden bei der Mausbewegung die ID und die aktuellen x/y-Koordinaten der Stichwort-Box reingeschrieben

attachment.php


px ist global als px = "px" definiert und idd ist auch sicherheitshalber als globale Variable definiert, damit es beim Mousover nicht zu einem Javascript-Fehler kommt, falls aus irgendwelchen Gründen gar kein Objekt vorhanden sein sollte.
 

Anhänge

  • Bild 2.png
    Bild 2.png
    8,5 KB · Aufrufe: 78
Danke! So jetzt hab' ich nicht nur 'was gelernt sondern auch noch ein gutes Script!

Man muss nur geduld haben (mit sich selber...)

Danke
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten