Fehler im (gewollten) Popup

J

Jonathan

Grünschnabel
Liebe Gemeinde ...

... in einem aus diversen Anleitungen und Foren selbst gebasteltes Popup (bei dem sich beim Überfahren des <img src="pfeil.gif"> ein erklärender Text öffnen soll) ist ein Fehler (der Text erscheint, verschiebt aber das Danebenliegende).

Vielleicht könntet ihr mir helfen?

<table style="width:64%" class="box">
<tr>
<td class="box8a" style="width:2%"><a href="1945-01.htm" onfocus="if(this.blur)this.blur();" onmouseover="status='[leer]';return true;"><img src="pfeil.gif" alt="" style="width:25px; height:25px; border:0px; background-color:ccffcc"><span class="info1">Provisorische Staatsregierung Renner</span></a></td>
<td class="boxa" style="width:62%">Provisorische Staatsregierung Renner<br>
<span style="font-size:12pt">27.04.1945 bis 20.12.1945</span></td>
</tr>
</table>

Mit bestem Dank für eure Mühe und Hilfe

Johann
 
sorry für das fehlendes Script - da ist die Seite nun

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<!--- ... --->
<title>1945-popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta content="Autor" name="Johann">
<meta http-equiv="expires" content="erstellt Ende Oktober 2001 - umgestellt auf CSS Ende M&auml;rz 2003 - letzte &Auml;nderung: 19. November 2003">
<meta lang="de" content="private Homepage" name="keywords">
<meta content="noindex" name="robots">
<meta name="description" content="1945-00.htm">
<meta name="keywords" content="Homepage, HP, Privat, privat, Johann, Wissen, &Ouml;sterreich, Wien, Nieder&ouml;sterreich, Burgenland, Ober&ouml;sterreich, Steiermark, K&auml;rnten, Salzburg, Tirol, Vorarlberg, Bild, Bilder, Sport, segeln, Perry Rhodan, Computer, HTML, Reisen, Amtshelfer, Beh&ouml;rde, Gif, Cartoon, Chat, chatten, ICQ, Isudi">
<style type="text/css">
A:link { color:#ff0000 }
A:visited { color:#ff0000 }
A:active { color:#0000ff }
A:hover { color:#0000ff }
body { background-image:url(grund.jpg);
background-attachment:fixed; }
body { scrollbar-base-color:800000;
scrollbar-track-color:ccffcc;
scrollbar-face-color:ffffcc;
scrollbar-highlight-color:800000;
scrollbar-3d-light-color:800000;
scrollbar-dark-shadow-color:800000;
scrollbar-shadow-color:800000;
scrollbar-arrow-color:ff0000; }
.box { background-color:#ffffcc;
border-color:#800000;
border-width:4px;
border-style:solid; }
.box8 {
border-width:2px;
border-style:solid;
border-color:#800000;
text-align:center;
background-color:#ccffcc;
font-familiy:Times;
font-size:14pt;
font-color:#800000;
font-weight:bold;
padding-top:10px;
padding-bottom:10px;
padding-left:4px;
padding-right:4px; }
.box8a {
border-width:2px;
border-style:solid;
border-color:#800000;
text-align:center;
background-color:#ccffcc;
font-familiy:Times;
font-size:12pt;
font-color:#800000;
font-weight:normal;
white-space:nowrap;
padding-top:10px;
padding-bottom:10px;
padding-left:4px;
padding-right:4px; }
.box8a a {
text-decoration:none;
color:#000000;
background:#ffff00;
border:0px; }
.box8a a:visited { color:#ff0000; }
.box8a a:hover { color:#800000; border:0px; cursor:pointer; }
.box8a a:active { color:#0000ff; }
.box8a a .info1 {
display:none; }
.box8a a:hover .info1 {
display:block;
position:relative;
background:#ffff00;
top:30px;
left:30px;
padding-top:2px;
padding-bottom:2px;
padding-left:6px;
padding-right:6px;
border-width:2px;
border-style:solid;
border-color:#800000; }
.boxa {
border-width:2px;
border-style:solid;
border-color:#800000;
text-align:center;
background-color:#ccffcc;
font-familiy:Times;
font-size:18pt;
font-color:#800000;
font-weight:bold;
padding-top:6px;
padding-bottom:6px;
padding-left:0px;
padding-right:0px; }
</style>
<script language="JavaScript">
var speed = 100;
var pause = 3000;
var timerID = null;
var bannerRunning = false;
var ar = new Array();
ar[0] = "die Bundesregierungen der 2. Republik";
var currentMessage = 0;
var offset = 0;
function stopBanner() {
if (bannerRunning)
clearTimeout(timerID)
bannerRunning = false }
function startBanner() {
stopBanner();
showBanner(); }
function showBanner() {
var text = ar[currentMessage];
if (offset <text.length) {
if (text.charAt(offset)== " ") offset++;
var partialMessage=text.substring(0, offset + 1);
window.status=partialMessage;
offset++;
timerID=setTimeout("showBanner()", speed);
bannerRunning=true; }
else {
offset=0;
currentMessage++;
if (currentMessage== ar.length) currentMessage=0;
timerID=setTimeout("showBanner()", pause);
bannerRunning=true } }
</script>
</head>
<body onLoad="startBanner()" text="#800000" bgcolor="#ffffcc" link="#ff0000" alink="#0000ff" vlink="#ff0000">
<noscript>
Liebe Besucher! Ich nutze auf dieser Seite JavaScript - bitte aktiviert das in euerem Browser, damit die Seite richtig angezeigt werden kann.
</noscript>
<table style="width:100%" class="box">
<tr>
<td class="box8" style="font-size:28pt">Die Bundesregierungen der 2. Republik</td>
</tr>
</table>
<table style="width:64%" class="box">
<tr>
<td class="box8a" style="width:2%"><a href="1945-01.htm" onfocus="if(this.blur)this.blur();" onmouseover="status='[leer]';return true;"><img src="pfeil.gif" alt="" style="width:25px; height:25px; border:0px; background-color:ccffcc"><span class="info1">Provisorische Staatsregierung Renner</span></a></td>
<td class="boxa" style="width:62%">Provisorische Staatsregierung Renner<br>
<span style="font-size:12pt">27.04.1945 bis 20.12.1945</span></td>
</tr>
</table>
<table style="width:100%" class="box">
<tr>
<td class="box8" style="width:2%"><a href="1945-02.htm"><img src="pfeil.gif" alt="Regierung Figl I" style="width:25px; height:25px; border:0px"></a></td>
<td class="boxa" style="width:31%">Regierung Figl I<br>
<span style="font-size:12pt">20.12.1945 bis 08.11.1949</span></td>
<td class="box8" style="width:2%"><a href="1945-03.htm"><img src="pfeil.gif" alt="Regierung Figl II" style="width:25px; height:25px; border:0px"></a></td>
<td class="boxa" style="width:31%">Regierung Figl II<br>
<span style="font-size:12pt">08.11.1949 bis 28.10.1952</span></td>
<td class="box8" style="width:2%"><a href="1945-04.htm"><img src="pfeil.gif" alt="Regierung Figl III" style="width:25px; height:25px; border:0px"></a></td>
<td class="boxa" style="width:31%">Regierung Figl III<br>
<span style="font-size:12pt">28.10.1952 bis 02.04.1953</span></td>
</tr>
</table>
</body>
</html>
 
Zuletzt bearbeitet:
Deine "info"-<span> befinden sich in den Tabellenzellen...daher werden die Inhalte dort auch verschoben, sobald das info angezeigt wird.
Du musst sie "absolute" positionieren, dann verschieben sie auch nichts.
Alles in allem halte ich diese Lösung(...erfolgt ja lediglich über CSS, nicht über Javascript), für weniger gut.... nur die wenigsten Browser werden deine CSS-Selektoren und Formate so interpretieren, wie du es willst. Mein IE macht die ganze Sache z.B. nur dank tutorials.de...:-) ....da wurde nämlich in deinem Code "cursor: pointer" durch "cursor:pointer" ersetzt... sobald ich das ausbessere, läufts nicht mehr(warum auch immer).
googl'e mal ein bischen herum, es gibt Millionen von Tooltip-Skripten, welche das besser lösen, höchstwahrscheinlich wirst du sogar hier fündig :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück