zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Frage, dumme

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.08.2009, 13:51
poz poz ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.08.2009
Beiträge: 9
poz befindet sich auf einem aufstrebenden Ast
Standard Frage, dumme

Moin Moin!

Ich suche eine Funktion mit deren Hilfe sich ein Fester - mit Hinweisen, Infos - offnet, wenn man mit der Maus drauf kommt, jedoch ohne Klick.

Beispiel im Text steht "Bayern" wenn man mit der Maus auf "Bayern" kommt, soll sich ein Fenster öffnen "kleines diebisches Volk am Nordrand der Alpen".


cu
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.08.2009, 14:07
Webdesigner & Fotograf
neuer user
 
Registriert seit: 04.08.2009
Ort: Gelnhausen, GER.
Beiträge: 3
2StepWeb befindet sich auf einem aufstrebenden Ast
Standard

Meinst du so etwas wie einen Tooltip?

Wenn man mit der Maus über etwas fährt, dass sich dann obendrüber (wie bei Windows z.B.) eine kleine Box öffnet?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.08.2009, 14:09
poz poz ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.08.2009
Beiträge: 9
poz befindet sich auf einem aufstrebenden Ast
Standard

Genau das!
Mit Zitat antworten
  #4 (permalink)  
Alt 04.08.2009, 14:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Dann geht das so: Tooltips mit CSS - CSS Tutorial - Grundlagen - Webdesign Forum
Mit Zitat antworten
  #5 (permalink)  
Alt 04.08.2009, 15:26
Benutzerbild von Gumbo
XHTMLforum-Kenner
 
Registriert seit: 22.08.2004
Ort: Trier
Beiträge: 2.735
Gumbo ist jedem bekanntGumbo ist jedem bekanntGumbo ist jedem bekanntGumbo ist jedem bekanntGumbo ist jedem bekanntGumbo ist jedem bekannt
Standard

Wohl eher: Titel, dummer.
__________________
Markus Wulftange
Mit Zitat antworten
  #6 (permalink)  
Alt 04.08.2009, 15:30
Benutzer
neuer user
 
Registriert seit: 03.01.2008
Beiträge: 40
Loilo befindet sich auf einem aufstrebenden Ast
Standard

Hmm, ich hab für diesen Zweck (den ich öfter brauche) immer einen fertigen Code bereitstehen
(Grundsätzlich würde ich aber immer title-Attribute dafür benutzen, da man Javascript nicht voraussetzen kann und diese title-Attribute dann per Javascript eliminieren)

Folgender Javascript-Code:
Code:
// INFOBOX-FUNKTIONEN

function mouse_pos(e) {
	if(!e) e = window.event;
	var body = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ? 
	window.document.documentElement : window.document.body;
	return {
	// Position im Dokument
	top: e.pageY ? e.pageY : e.clientY + body.scrollTop - body.clientTop,
	left: e.pageX ? e.pageX : e.clientX + body.scrollLeft  - body.clientLeft,
	};
}

var on = false;

function maus(){
    if(on)   {
         window.document.onmousemove = null;
		 document.getElementById('infobox').style.display = "none";
    }else  {
         window.document.onmousemove = showMousePos;
    }
    on = !on;
}

function showMousePos(e){
	document.getElementById('infobox').style.display = "block";
	var p = mouse_pos(e);
 	document.getElementById('infobox').style.top = (p.top + 10) + "px";
 	document.getElementById('infobox').style.left = (p.left + 10) + "px";
}

function infobox(content)
{
	maus();
	document.getElementById('infobox').innerHTML = content;
}

// INFOBOX-FUNKTIONEN ENDE
Dann brauchst du eine (von mir aus leere) Div-Box (am Anfang des Dokuments, am besten direkt nach dem body-Tag) mit der ID "infobox".
HTML-Code:
<div id="infobox"></div>
...und in den Styles-Definitionen musst du ein bisschen was rumschreiben, das wichtigste ist, dass die ID "infobox" absolut positioniert ist und unsichtbar (display: none), den Rest kannst du frei gestalten.

Das Element, das du dann mit einem Tooltip beschreiben willst, braucht dann folgende Attribute:
Code:
onmouseover="infobox('Beschreibung')"
onmouseout="infobox('')"

In einem Beispieldokument würde das also bedeuten (ja, man könnte noch viel optimieren, auslagern usw.):
HTML-Code:
<html>
<head>
<title>Infobox</title>
<style type="text/css">
#infobox {
	position: absolute;
	border: 1px solid #c87600;
	color: #c87600;
	background-color: #FFC;
	padding: 3px;
	display: none;
}

acronym {
	border-bottom: 1px dashed black;
}
</style>
<script type="text/javascript">
<!--
// INFOBOX-FUNKTIONEN

function mouse_pos(e) {
	if(!e) e = window.event;
	var body = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ? 
	window.document.documentElement : window.document.body;
	return {
	// Position im Dokument
	top: e.pageY ? e.pageY : e.clientY + body.scrollTop - body.clientTop,
	left: e.pageX ? e.pageX : e.clientX + body.scrollLeft  - body.clientLeft,
	};
}

var on = false;

function maus(){
    if(on)   {
         window.document.onmousemove = null;
		 document.getElementById('infobox').style.display = "none";
    }else  {
         window.document.onmousemove = showMousePos;
    }
    on = !on;
}

function showMousePos(e){
	document.getElementById('infobox').style.display = "block";
	var p = mouse_pos(e);
 	document.getElementById('infobox').style.top = (p.top + 10) + "px";
 	document.getElementById('infobox').style.left = (p.left + 10) + "px";
}

function infobox(inhalt)
{
	maus();
	document.getElementById('infobox').innerHTML = inhalt;
}

// INFOBOX-FUNKTIONEN ENDE
-->
</script>
</head>

<body>
<div id="infobox"></div>

<ul>
	<li onmouseover="infobox('Listenpunkt mit toller Beschreibung :)')" onmouseout="infobox('')">Listenpunkt 1</li>
    <li>Listenpunkt 2 mit <a href="http://xhtmlforum.de" onmouseover="infobox('Super Seite &uuml;ber XHTML')" onmouseout="infobox('')">Link</a></li>
</ul>
Du kannst das ganze im Grunde auf jedes beliebige <acronym onmouseover="infobox('Hypertext Markup Language')" onmouseout="infobox('')">HTML</acronym>-Element im Dokument anwenden
</body>
</html>
__________________
Ich bin kein Maßstab!
Mit Zitat antworten
  #7 (permalink)  
Alt 04.08.2009, 20:23
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.222
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
Zitat von Loilo Beitrag anzeigen
[...] da man Javascript nicht voraussetzen kann und [...] dann per Javascript eliminieren [...] Folgender Javascript-Code:
???

Frag doch mal unsere Suchfunktion oder die Suchmaschine deines Vertrauens nach "Pure CSS Tooltips" ....
Mit Zitat antworten
  #8 (permalink)  
Alt 04.08.2009, 20:34
Benutzer
neuer user
 
Registriert seit: 03.01.2008
Beiträge: 40
Loilo befindet sich auf einem aufstrebenden Ast
Standard

Joa klar, so geht's auch
__________________
Ich bin kein Maßstab!
Mit Zitat antworten
  #9 (permalink)  
Alt 05.08.2009, 07:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Zitat:
Zitat von EvT Beitrag anzeigen
???

Frag doch mal unsere Suchfunktion oder die Suchmaschine deines Vertrauens nach "Pure CSS Tooltips" ....
Das habe ich doch schon getan
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 05.08.2009, 09:01
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.222
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Ja, stimmt. Ich war so fasziniert von "da man Javascript nicht voraussetzen kann und [...] dann per Javascript eliminieren", dass ich deinen Beitrag gar nicht gesehen habe. Versehen, dummes.

Geändert von EvT (05.08.2009 um 09:04 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
XHTML 1.0 , 1.1, 1.2, 2.0 frage??? Altair_AC (X)HTML 8 15.08.2009 13:49
Doctype Verständniss Frage Midnight Run (X)HTML 4 26.12.2008 03:16
Frage zu einem Gedanken (DIV positionieren) charlie CSS 1 06.09.2008 11:36
vielleicht ne dumme frage, aber wie?! benzrecordings CSS 2 15.12.2006 10:55
Frage zu "display:block;" John CSS 1 05.04.2005 16:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:53 Uhr.