✔ zeitverzögertes einblenden

F

Fuma15

Mitglied
Hi Leute

basierend auf folgenden Topic: http://www.tutorials.de/forum/javas...gert-ausblenden-probleme-mit-id-ubergabe.html,
habe ich versucht ein zeitverzögertes Einblenden eines Infotextes via onmouseover zu realisieren.

Ich habe diesen Quelltext teilweise übernommen und so angepasst, wie ich ihn benötigt hatte

Nun wird aber der Infotext nicht mehr eingeblendet obowhl die ID richtig übergeben wird.(mit alert abgeprüft)

Kann mir da jemand helfen?

Hier mein aktueller Quelltext:

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Video-Datenbank</title>
		<link rel="stylesheet" type="text/css" href="../css/styles.css">
		<script type="text/javascript">
			
			function sleep(id){
				if(document.getElementById(id).style.display=="none"){
					eval("t_"+id+"=window.setTimeout(function(){anzeigen("+id+")}, 2000);")	
				}else{
					eval("window.clearTimeout(t_" + id + ");");
					anzeigen(id);
				}
			}
				
			function anzeigen(id){
				
			alert(id);
		
			 if(document.getElementById(id).style.display=="none") {
			  document.getElementById(id).style.display="inline";
			 }
			 else {
			  document.getElementById(id).style.display="none";
			 }
			}
		</script>
		<style type="text/css">
			img{
				height:90px;
				width:90px;
			}
			img:hover{
				height:180px;
				width:180px;
			}
			
			.bereich {
				position: absolute;
			}
			
			.beschreibung {
				border:1px solid black;
				color: #76835F;
				background-image: url(../bilder/bearbeitet/ausruf.gif);
				background-repeat: no-repeat;
				width: 500px;
				height: 110px;
				position: relative;
				left: -50px;
				display: block;
				padding-top: 5px;
				padding-left: 70px;
				padding-right: 5px;
			}
		</style>
	</head>
	<body>
		<div id="formShow">
			<form action="<?php $PHP_SELF ?>" method="post">
				<label>Suche nach:</label>&nbsp;<input type="Text" name="suchanfrage" size="24" maxlength="60">&nbsp;
				<label>Suchkriterium:</label>&nbsp;<select name='suchkrit'>
        										<option value='titel'>Titel</option>
							        			<option value='typ'>Typ</option>
							        			<option value='genre'>Genre</option>
								       			<option value='sonstiges'>Bemerkungen</option>
											</select>&nbsp;
				<label>Sortieren nach:</label>&nbsp;<select name='sort'>
							        			<option value='titel'>Titel</option>
							        			<option value='typ'>Typ</option>
							        			<option value='genre'>Genre</option>
											</select>&nbsp;<input type="Submit" name="suche" value="Suche">
			</form>
		</div>
		
		<div id="tabShow">
			<table>
				<tr>
					<td height=190 width=190>
						<span>
							<img src="./untitled.bmp" onMouseover="sleep('text1');"  onMouseOut="sleep('text1');">
							<span class="bereich" style="display: none;" id="text1">
								<div class="beschreibung">Beschreibung 1</div>
							</span>
						</span>
					</td>
					<td height=190 width=190>
						<span>
							<img src="./untitled.bmp" onMouseover="sleep('text2');"  onMouseOut="sleep('text2');">
							<span class="bereich" style="display: none;" id="text2">
							 <div class="beschreibung">Beschreibung 2</div>
							</span>
						</span>
					</td>
					<td height=190 width=190>
						<span>
							<img src="./untitled.bmp" onMouseover="sleep('text3');"  onMouseOut="sleep('text3');">
							<span class="bereich" style="display: none;" id="text3">
							 <div class="beschreibung">Beschreibung 2</div>
							</span>
						</span>
					</td>
					<td height=190 width=190>
						<span>
							<img src="./untitled.bmp" onMouseover="sleep('text4');"  onMouseOut="sleep('text4');">
							<span class="bereich" style="display: none;" id="text4">
							 <div class="beschreibung">Beschreibung 2</div>
							</span>
						</span>
					</td>
					<td height=190 width=190>
						<span>
							<img src="./untitled.bmp" onMouseover="sleep('text5');"  onMouseOut="sleep('text5');">
							<span class="bereich" style="display: none;" id="text5">
							 <div class="beschreibung">Beschreibung 2</div>
							</span>
						</span>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

Ich würde mich über eine schnelle Antwort sehr freuen.

MFG Fuma15
 
Hi,

die ID muss als String an die Funktion anzeigen übergeben werden.
Code: 
eval("t_"+id+"=window.setTimeout(function(){anzeigen('"+id+"')}, 2000);")

Ciao
Quaese
 
Danke das hat mir schonmal sehr geholfen.

Jetzt habe ich aber wieder mein altes Problem:

Ich möchte prüfen ob der Mauszeiger bereits 2 Sekunden auf dem Bild "liegt" erst danach soll dieses Info-Text erscheinen.

Jedoch ist es zur Zeit so das das ausführen der anzeigen Funktion 2 Sekunden verzögert wird.

Dies hat den Effekt zur Folge das bei schnellem drüber fahren über mehre Elemente nach 2 Sekunden trotzdem für einen kurzen Moment der Info-Text erscheint
diesen Effekt möchte ich gerne ausmerzen.

Kann mir dabei jemand helfen?

Die notwenidgen Quelltexte findet ihr oben im Zusammenspiel mit der Ausbesserung von Quasse
 
Hi,

dann reicht eine einzige globale Variable, die als Timerhandle dient.

Im mouseover-Event wird zunächst ein bereits laufdender, aktiver Timer gestoppt und mit der aktuellen ID ein neuer Timer gestartet.

Die Funktion sleep muss so abgeändert werden, dass erkennbar ist, ob es sich um einen over- oder out-Event handelt. Hierzu wird die Routine um einen Parameter blnOut erweitert. Besitzt dieser den Zustand true, handelt es sich um einen mouseout-Event und die Funktion wird vor dem Starten des Timers verlassen.

JavaScript:
Code: 
<script type="text/javascript">
var hTimer = null;

function sleep(id, blnOut){
  if(document.getElementById(id).style.display=="none"){

    // Falls bereits ein Timer läuft -> stoppen
    if(hTimer != null){
      window.clearTimeout(hTimer);
      hTimer = null;
    }

    // Falls ein mouseout-Ereignis eingetreten ist -> Fkt verlassen
    if(blnOut) return;

    // Anzeigeroutine zeitverzögert aufrufen
    hTimer = window.setTimeout(function(){anzeigen(id);}, 2000);
  }else{
    // Timer stoppen und Handle zurücksetzen
    window.clearTimeout(hTimer);
    hTimer = null;
    // Anzeigefunktion aufrufen
    anzeigen(id);
  }
}

function anzeigen(id){
  if(document.getElementById(id).style.display=="none") {
    document.getElementById(id).style.display="inline";
  }else {
    document.getElementById(id).style.display="none";
  }
}
</script>

Der zugehörige Aufruf im HTML-Code:
Code: 
<img src="../bilder/down.gif" onMouseover="sleep('text1', false);"  onMouseOut="sleep('text1', true);">

Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Danke sehr funktioniert hervorragend

Dann kann ich ja nächstes Jahr mit dem Anbinden der Datenbank und allem drum und dran beginnen

Danke nochmals für deine Hilfe

Und ich wünsche dir und allen anderen ein guten Rutsch ins neue Jahr

Das wird bestimmt nicht der letzte Beitrag sein den ich schreibe hihi ^^

MFG Fuma15
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück