Grafik -> Text laden

A

Alice

Erfahrenes Mitglied
Hallo Leute. :)

Ich habe folgende Frage.

Kann ich mit Javascript oder Ajax folgendes realisieren?

Ich habe ein XHTML-Formular. Ich möchte neben jedem Punkt eine Grafik einbauen (ein Fragezeichen), wenn man auf die Grafik klickt, soll in einem DIV-Container ein Text geladen werden. Ich möchte eine Beschreibung für jeden Punkt einbauen.

Ich bin absoluter Javascript/Ajax Anfänger. Am liebsten wäre es mir wenn diese Funktion auch mit deaktiviertem Javascript funktionieren würde (Ajax?).

Kann mir jemand dabei helfen?
 
Mh, ich glaube, dass ich mal eine Lösung gesehen habe, die dieses Problem mit CSS gelöst hat, wenn man darauf geklickt hat. Wenn es jedoch auch für dich akzeptabel wäre, wenn dir diese Information nur angezeigt wird, wenn man mit der Maus darüber fährt, dann solltest du dir mal die Pseudoklassen von CSS ansehen:
HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>form tooltips</title>
  <style type="text/css">
    a + div {
      display:none;
    }
    a:focus + div, a:active + div, a:visited + div, a:hover + div {
      display:block;
    }
  </style>
</head>
<body>
  <a href="#">?</a>
  <div>hallo</div>
</body>
</html>
 
Das sieht ja auch nicht schlecht aus. Danke!

Kann man irgendwie die "Bedingung" ändern? Denn "a + div" würde bei mir auf der Webseite (inkl. Forum) zu Problemen führen.

Wie kann ich den Text "hallo" denn ändern? Also es sollen ja immer andere Texte angezeigt werden.

DANKE!
 
Das ist ein ganz normales HTML-Element mit Inhalt .. Ansonsten müsste man anhand deines Seitenlayouts entscheiden, was es da an Möglichkeiten gibt, dass umzusetzen.
 
Das Problem ist, das mit dem Code mein Header und ein paar anderen Menüs nicht mehr gehen. Und ich kann den "Text-Container" nicht einfach irgendwo einbauen, der DIV-Container muss leider immer unter dem "Link" sein.
 
Echt?

Ich hatte mal XHTML-Formular auf einer Webseite gesehen was ziehmlich auswändig erstellt wurde. Zumindest sah es so aus. Das Skript hat in Echtzeit User-Name, Passwort (ob es Sicher ist) usw. geprüft. Um zu verstehen wie das Teil funktioniert habe ich im FF Javascript deaktiviert und trotzdem funktionieren alle Sachen noch. Auch nach dem ich die Seite neugeladen habe.

Aber ok, wenn ihr das sagt, dann wird es so sein.

Edit:

Das hier Funktioniert bei mir perfekt. Aber ist leider JS.

HTML: 
<script language="JavaScript" type="text/javascript">
function einblenden(div) {
with(document.getElementById(div).style){
if(display=="none"){
display="inline";
}
else{
display="none";
}
}
}
</script>






<div id="ebene1" style="display:none;"><br>
Bildtext Bildtext Bildtext Bildtext<br>
Bildtext Bildtext Bildtext Bildtext<br>
Bildtext Bildtext Bildtext Bildtext<br>
Bildtext Bildtext Bildtext Bildtext<br>
Bildtext Bildtext Bildtext Bildtext<br>
Bildtext Bildtext Bildtext Bildtext<br>
</div>

Die CSS-Variante finde ich eigentlich besser...
 
Zuletzt bearbeitet:
Welche Version ist den dein Firefox? Vermutlich ist es einer der neueren, der schon HTML5-Formulare unterstützt und die werden ohne Javascript validiert.
 
Das XHTML-Formular was ich meine habe ich vor 1-2 Jahren mal gesehen.

Kann man die CSS-Variante so umbauen das der "Link" im unteren Bereich des Formular ist, jedoch der anzuzeigende Text oben dargestellt wird?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück