Bild links, Beschreibung rechts

locar · 4. März 2007, 17:42

Hallo.
Ich wollte einmal fragen ob es mit JS möglich ist, dass wenn man mit der Maus über ein Bild fährt, in einem anderen Content dann die Beschreibung usw. angezeigt wird?

Torben Brodt · 4. März 2007, 17:52

Hi, ja das geht mit onmouseover und innerHTML.
nachzulesen bei Selfhtml

Quellcode

function c(eid) {
document.getElementById(eid).innerHTML = '2';
}

Quellcode

<img src="..." alt="..." onmouseover="c('e2')" />
<div id="e2">1</div>

Baby Herman · 4. März 2007, 17:55

In wieweit reichen jetzt deine JS-Kenntnisse?

Im img-Element benötigst du lediglich das Attribut onmouseover, in dem du dann jeweilige Befehle ausführen kannst.
Der Text-Bereich benötigt eine ID, mit der er ansprechbar ist.

Zum Beispiel in etwa so:

Quellcode

<img src="" onmouseover="putText('textbox','Test');" />
<div id="textbox"></div>

Quellcode

function putText(box,content) {
document.getElementById(box).innerHTML = content;
}

// Edit: Ups, da war jemand schneller ...

locar · 4. März 2007, 17:56

Okay, vielen dank! Werde das gleich mal ausprobieren!

locar · 4. März 2007, 22:29

Sry für den DP, aber irgendwie funktioniert mein Script grad nicht so richtig mit PHP?

Header

Quellcode

<script type="text/javascript" language="JavaScript">
function c(id, nummer) {
<?php
$abfrage = mysql_query("SELECT * FROM gallery");
while($row = mysql_fetch_object($abfrage))
{
echo "
if(nummer == $row->id) {
document.getElementById(id).innerHTML = 'Benutzte Programme: $row->programme';
}
";
}
?>
}
</script>

Alles anzeigen

Link

Quellcode

$abfrage = mysql_query("SELECT * FROM gallery");
while($row = mysql_fetch_object($abfrage))
{
echo "<a href=\"images/gallery/$row->original\" rel=\"lightbox\" title=\"$row->titel\"><img src=\"images/gallery/$row->thumb\" alt=\"$row->titel\" width=\"380\" height=\"25\" border=\"1\" onmouseover=\"putText('content_right','$row->id');\"></a><br/><br/>";
}

Ausgabe

Quellcode

<div id="content_right">
<img src="images/information-background.jpg" alt="information-image" />
<div>
test
</div>
</div>

Baby Herman · 4. März 2007, 22:47

Quellcode

"$row->titel"

Das wird so nichts, da er nur $row, nicht aber das Objekt danach auswertet. Versuch die mal einzuklammern.

Quellcode

"{$row->titel}"

In solchen Fällen hilft oft ein gute Syntaxhighlighting im Editor oder aber auch das Codeergebnis zu betrachten.

locar · 4. März 2007, 23:11

Der PHP Teil funktioniert ohne Probleme, trotzdem danke

Mir gehts hier nur um JS.

Baby Herman · 4. März 2007, 23:29

Naja, du erzeugst mit PHP JavaScript. Also spielt das sehr wohl eine Rolle:

Quellcode

while($row = mysql_fetch_object($abfrage))
{
echo "
if(nummer == $row->id) {
document.getElementById(id).innerHTML = 'Benutzte Programme: $row->programme';
}
";
}

Schau dir mal Zeile 4 an. Erstmal wird JavaScript damit nicht anfangen können, weil jeder String wie auch in PHP mit ' ' "eingeklammert" werden muss. Desweiteren wird hier nicht $row->id sondern lediglich $row ersetzt. Deshalb das einklammern mit { }.

locar · 5. März 2007, 09:52

ALso im Quelltext sieht das aber nicht so aus wie du es gesagt hast. Die ID wird richtig angezeigt. So sieht es nämlich dann aus, wenbn ich die .php datei aufrufe:

Quellcode

<script type="text/javascript" language="JavaScript">
function c(id, nummer) {
if(nummer == 1)
{
document.getElementById(id).innerHTML = 'Benutzte Programme: Cinema4D, Photoshop';
}
if(nummer == 2)
{
document.getElementById(id).innerHTML = 'Benutzte Programme: Photoshop';
}
}
</script>

Alles anzeigen

Baby Herman · 5. März 2007, 12:48

Okay, dann vergleich mal die Funktion, die du mit PHP erstellst und die, die du im Bild per mouseover auslöst.

Ich würde dir außerdem empfehlen, Firefox zu benutzen. Da gibt es die recht bekannte Fehlerkonsole, die fast immer sehr gute Fehlermeldung für JavaScript ausspuckt. Da wäre dann auch schon der Fehler gefallen, dass die Funktion nicht vorhanden ist etc.

locar · 5. März 2007, 14:48

Bin Firefox User seit der ersten Stunde

Aber die Fehlerkonsole hab ich noch nie benutzt, mal gucken

//edit
boah, verdammt. wieso hab ich das nicht bemerkt -.-
dankeschön!

//edit2
Ist es möglich in JS HTML/CSS zu benutzen? Also Absatz, div usw.?

Baby Herman · 5. März 2007, 16:13

Wie meinst du das "verwenden"? Klar kannst du da HTML in einem String haben, was dann aber nicht ausgewertet wird und entsprechend bearbeitet werden muss.

Beispiel:

Quellcode

var string = "<div class=\"test\">Blabla</div>"

Bild links, Beschreibung rechts

Bild links, Beschreibung rechts

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Tags