Textfeld nach Mouseover anzeigen

W

WACSF

Erfahrenes Mitglied
Guten Abend.

Ich weiß nicht, wie man so ein Problem nennen kann. Ich versuche es euch mal zu erklären.

Ich will auf meiner Homepage eine Frage der Woche einrichten, die folgendermaßen aussieht.

Bevor man mit der Maus darüber geht:

Frage der Woche:

Wenn man draufklickt oder darüberfährt:

Frage der Woche:
_______________
|Hier soll dann die| //
|Frage stehen........| //
|................................| //TEXTFELD
|................................| //
_______________ //

Ich habe auch schon "auf Glück" im JAVA Forum gesucht, aber ich weiß ja nichteinmal, wie ist das nennen soll. Achja, falls es einen Unterschied machen sollte. Die Frage will ich aus einer MYSQL Database auslesen.

Ich würde mich für Vorschläge sehr freuen,

WACSF
 
<img src="deinbild.jpg" alt="Die Frage der Woche kommt hier rein">

Das finde ich immer ganz witzig.

Und die Frage kannst du dann ja immer per Zufall aus der SQL Datenbank auslesen.
 
Du kannst natürlich auch per CSS so etwas programmieren (mit ganz wenig JavaScript), ist ganz einfach.

Hier der JavaScript:

HTML: 
<script language="javascript">
function show(divid) {
document.getElementById("frage").style.display="none";
document.getElementById(divid).style.display="inline";
}
</script>

und jetzt der Quelltext:

HTML: 
<a href="#" onmouseover="show('frage')">Frage der Woche</a><br>
<div id="frage" style="display:none">Hier kannst du dann die Texte von der Datenbank laden</div>

Wenn du die Frage noch genau platzieren möchtest, kannst du ja auch per div-Tag und css-id eine position angeben.

Ich hoffe, dass ich dir helfen konnte.

Gruss Jonas
 
Erstmal herzlichen Dank für die Hilfe.

Eine Frage hätte ich noch. Wie kann ich es einrichten, dass die frage der woche beim ersten mausklick "ausfährt" und beim zweiten wieder "einfährt"?

Danke nochmal,

WACSF
 
Du kannst mal nach Klappmenü im JavaScript Forum suchen.
Da das aber irgendwie fast immer falsch geschrieben (Klappnenü, Klappmenu etc.) wird, gebe ich Dir hier mal einen Link, in dem ich auch schonmal sowas gepostet habe:
Alter Thread
Das klappt ein und aus.

Gruß hpvw
 
Also Danke erstmal an alle, die mir geholfen haben, aber ich hätte da noch eine Frage.

Ich habe momentan folgenden Code
PHP: 
<script type="text/javascript">
function wechselDich(id) {
if (document.getElementById) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
}
else {
document.getElementById(id).style.display = 'none';
}
}
} 
</script>

<a href="alternativer_link_fuer_user_ohne_js.html" onClick="wechselDich('test'); return false;">mehr...</a>
<div id="test" class="versteckt">bla bla bla</div>
So, wenn ich nun die Seite aufrufe steht gleich der Hiddentext da und ich wollte eigentlich, dass es erst angezeigt wird, wenn man auf den Button klickt. Also müsste ich es irgendwie einfach nur umdrehen, aber ich weiß nicht, wie ich es umsetzen kann.

Wäre sehr dankbar für eure Hilfe,

WACSF
 
Du kannst als letztes im body-Bereich einen JavaScript Bereich erstellen, in dem Du die wechsel Funktion einmal aufrufst.
So ist das versteckte erstmal sichtbar und wird sofort für alle JavaScript User versteckt.
Alle User, die JavaScript ausgeschaltet haben, kommen trotzdem in den Genuß des Inhalts.
HTML: 
...
<html>
<head>
...
<script type="text/javascript">
function wechselDich(id) {
if (document.getElementById) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
}
else {
document.getElementById(id).style.display = 'none';
}
}
}
</script> 
...
</head>
<body>
...
<a href="alternativer_link_fuer_user_ohne_js.html" onClick="wechselDich('test'); return false;">mehr...</a>
<div id="test" class="versteckt">bla bla bla</div> 
...
<script type="text/javascript">
wechselDich('test');
</script> 
</body>
</html>
Gruß hpvw
 
Herzlichen Dank für Deine Hilfe. Jetzt funktioniert es.
Ich hätte da noch eine theoretische Frage.

Das selbe Prinzip, also eine Art Klapptext könnte doch auch mit PHP gehen, oder?
Ich habe das einfach mal "just for fun" probiert und bin auf die Container gekommen.

Also mal angenommen ich habe eine Tabelle (2 Zeilen / 1 Spalte) und schreibe in die erste Zeile "..:: MEHR ::.." oder was auch immer und in der zweiten Zeile setzte ich den Container rein, dann müsste es ja auch gehen. zumindest geht es bei mir.
Ich poste mal den HTML mit, weil das ist eh recht klein.
PHP: 
<table width="150" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150"><a href="testklapp.php?action=frage">Frage der Woche:</a> </td>
  </tr>
  <tr>
    <td><?php
switch($action)
{
case "frage":
include("fragederwoche.php");
break;} ?>
</td>
  </tr>
</table>
So aber jetzt würde mich interresieren, wie ich es schaffe, dass ich den Inhalt wieder wegbekomme beim nächsten Klick. Ich bräuchte doch irgendwie ein kleines PHP Codeschnipselchen, welches beim ersten Klick auf "Frage der Woche" die fragederwoche.php öffnet und bei einem weiteren Klick z.B. die leere Seite test.php öffnet.
Geht sowas? Falls ihr mir da auf die Sprünge helfen könntet, wäre das echt nett. Ist nur so ein Versuch, hoffe jedoch, dass ich es hinbekomm :)

Danke schonmal im Vorraus,

WACSF
 
HTML: 
<table width="150" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150"><?php
switch($action)
{
case "frage":
echo '<a href="testklapp.php?action=keinefrage">Frage der Woche:</a>';
break;
default: echo '<a href="testklapp.php?action=frage">Frage der Woche:</a>';
} 

?></td>
  </tr>
  <tr>
    <td><?php
switch($action)
{
case "frage":
include("fragederwoche.php");
break;} ?>
</td>
  </tr>
</table>
Wenn Du das mit einer JavaScriptlösung kombinierst, kannst Du's für alle perfekt machen. JavaScript-Anwender können ohne reload klappen und JavaScript-Verweigerer bekommen die Möglichkeit mit reload zu klappen. Und bei keinem mußt Du das Klappmenü vorsichtshalber vorher schon anzeigen.
Nachteil an der php-Variante ist, dass der Reload der Seite die Scrollposition an den Anfang bringt oder wenigstens (Stichwort Anker) verschiebt. Das ist für manche User unter Umständen verwirrend.

Gruß hpvw
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück