Hallo,
ich möchte wenn ich über verschiedene Links/Buttons (eigentlich egal) hovern und dabei soll dann des Links spezifischer Inhalt (Text und 2 Bilder) in einer Tabelle oder in einem abgetrennten Bereich angezeigt werden.
Etwas so:
Hoffe jemand kann mir weiterhelfen und mir vielleicht ein Muster für die ersten Kategorein zeigen, damit ich es dann weiterführen kann.
Vielen Dank schonmal.
Seite 1 von 1
Bei Hover Inhalt Dynamisch Anzeigen....?
Anzeige
#2
geschrieben 13. März 2008 - 14:48
Beim Link musst hald mit onmouseover Arbeiten, zumindestens denke ich, dass das wohl die günstigste Möglichkeit ist.
Wie die den abgetrennten Bereich anzeigen willst musst dir hald überlegen. Du kannst den Inhalt per xmlHttpRequest nachladen oder hald einfach einen Unsichtbaren Divider, der bereits mitgeladen wurde einfach sichtbar schalten (Zu letzterem würde ich bei kleinen Inhalten tendieren).
Es bleibt hald zu beachten, dass bei dieser Variante Leute, die kein JS aktviert haben das Nachsehen haben.
Wie die den abgetrennten Bereich anzeigen willst musst dir hald überlegen. Du kannst den Inhalt per xmlHttpRequest nachladen oder hald einfach einen Unsichtbaren Divider, der bereits mitgeladen wurde einfach sichtbar schalten (Zu letzterem würde ich bei kleinen Inhalten tendieren).
Es bleibt hald zu beachten, dass bei dieser Variante Leute, die kein JS aktviert haben das Nachsehen haben.
#3
geschrieben 13. März 2008 - 16:08
Vielen Danke erstmal, aber ich als Anfänger kann damit wirklich nicht soviel anfangen. Gibt es kein Tutorial wo ich es mir selber beibringen kann oder ist jemand so nett und würde es kurz schrieben und es erläutern wenn es nicht zu viel Arbeit macht...
#4
geschrieben 13. März 2008 - 16:28
Okay, hier ein kurzes Beispiel, allerdings sicher nicht die beste mögliche Lösungsvariante:
Dein Link:
<a href="#" onclick="java script:Toggle('foo');">Link</a>
<a href="#" onclick="java script:Toggle('bar');">Link</a>
Der Container mit dem Inhalt:
<div id="foo" style="display: none;">Beispieltext, der NICHT dynamisch nachgeladen wird: Foo!</div>
<div id="bar" style="display: block;">Beispieltext, der NICHT dynamisch nachgeladen wird: Bar!</div>
Das Java Script:
<script type="text/javascript">
/* <![CDATA[ */
var ActiveDivider = 'bar';
function Toggle(Divider)
{
document.getElementById(ActiveDivider).style.displ
ay = 'none';
document.getElementById(Divider).style.display = 'block';
ActiveDivider = Divider;
}
/* ]]> */
</script>
Dein Link:
<a href="#" onclick="java script:Toggle('foo');">Link</a>
<a href="#" onclick="java script:Toggle('bar');">Link</a>
Der Container mit dem Inhalt:
<div id="foo" style="display: none;">Beispieltext, der NICHT dynamisch nachgeladen wird: Foo!</div>
<div id="bar" style="display: block;">Beispieltext, der NICHT dynamisch nachgeladen wird: Bar!</div>
Das Java Script:
<script type="text/javascript">
/* <![CDATA[ */
var ActiveDivider = 'bar';
function Toggle(Divider)
{
document.getElementById(ActiveDivider).style.displ
ay = 'none';
document.getElementById(Divider).style.display = 'block';
ActiveDivider = Divider;
}
/* ]]> */
</script>
Dieser Beitrag wurde von [Elite-|-Killer] bearbeitet: 13. März 2008 - 16:31
#5
geschrieben 13. März 2008 - 17:45
oder schau mal hier:
http://www.javarea.de/index.php3?opencat=J...Info&id=208
Die Seite bietet allgemein ziemlich nützliche scripts + Quellcode
http://www.javarea.de/index.php3?opencat=J...Info&id=208
Die Seite bietet allgemein ziemlich nützliche scripts + Quellcode
#6
geschrieben 15. März 2008 - 00:12
Okay danke.. ich schaff das schon.. danke für eure Hilfe
Thema verteilen:
Seite 1 von 1