Mouseover bei klapptext

[Leonard Claus]

Guten Tag,
ich habe eine kleines Problem und hoffe dass mir hier geholfen werden kann.

Wenn man in die Galerie kommt, sieht man den Punkt "webdesign" mit einem Plus davor.
Klickt man darauf, ändert sich das Plus in ein Minus und der Klapptext, klappt aus. (was auch ohne Probleme funktioniert)
Dann sieht man diesen Deadly INK Button der ausgeklappt wurde.
Fährt man über diesen mit der Maus, soll die Schrift auf ihm grün werden.
Klickt man auf ihn drauf, klappt auch dieser herunter und zeigt genauere Daten über das Design, in diesem Falle das clandesign "deadly ink".

Hier die Problemseite:
http://www.same.memoryplace.de/index.php?show=galerie

Hier die beiden bilder für den mouse over:
1: http://www.same.memoryplace.de/images/deadly.png
2: http://www.same.memoryplace.de/images/deadlyon.png

Ich hoffe ihr könnt mir helfen, vielen dank im Voraus.

MfG, Leonard Claus.

[JürgenB]

Hallo Leonard,

was hast du denn seit
http://forum.de.selfhtml.org/archiv/2007/9/t158894/#m1033491
geänedrt? HTML-Fehler sind auf jedem Fall immer noch da. Achte bei "onMouseOver" und "onMouseOut" auf die im xhtml erforderliche Kleinschreibung.

Deine Seite hat diverse Fehler, die du zuerst beseitigen solltest, bevor es überhaupt Sinn macht, die Javascript-Probleme zu lösen.

Gruß, Jürgen

[l.c.]

Hallo Leonard,

was hast du denn seit
http://forum.de.selfhtml.org/archiv/2007/9/t158894/#m1033491
geänedrt? HTML-Fehler sind auf jedem Fall immer noch da. Achte bei "onMouseOver" und "onMouseOut" auf die im xhtml erforderliche Kleinschreibung.

Deine Seite hat diverse Fehler, die du zuerst beseitigen solltest, bevor es überhaupt Sinn macht, die Javascript-Probleme zu lösen.

Gruß, Jürgen

Es hat sich nichts geändert, allerdings antwortet auf den alten thread niemand mehr und ich weiß nicht mehr was ich machen soll.
Welche anderen Fehler meinst du ?

Ich suche ja nur jemanden der mir sagt, was genau an dem mouseover befehl falsch ist :(

lg.

[wucher wichtel]

Hallo!

Gruß, Jürgen

Bitte zietiere nicht alles. Das ist suboptimal ;-)

Es hat sich nichts geändert, allerdings antwortet auf den alten thread niemand mehr und ich weiß nicht mehr was ich machen soll.

Antworten ist jetzt schwer (der Thread ist ja im Archiv) :-))

Welche anderen Fehler meinst du ?

Diese Fehler: insgesamt 77

Ich suche ja nur jemanden der mir sagt, was genau an dem mouseover befehl falsch ist :(

Das hat Jürgen doch:

Achte bei "onMouseOver" und "onMouseOut" auf die im xhtml erforderliche Kleinschreibung.

Außerdem sollten wirklich erst die anderen Fehler beseitigt werden. Sonst kann man nicht sicher stellen, dass sich der Browser normal verhält.

Ich schau mir dein Problem später mal an, muss jetzt dann aber weg.

ciao, ww

[wucher wichtel]

Hallo!

Ich schau mir dein Problem später mal an, muss jetzt dann aber weg.

Na da hab ich mich aber in was reingeritten ;-)

Im ernst: Dein Quelltext ist nicht sehr schön. Wir haben 2 Möglichkeiten:
Die erste wäre, dass du die bei deinem kompletten Quelltext helfen lässt. Dann könnten wir zusammen deinen Quelltext entrümpeln und du würdest dabei eine Menge lernen. Allerdings ist das warscheinlich auch der etwas schwierigere Weg (aber IMO auf jeden Fall der bessere).
Die zweite Möglichkeit wäre, du schreibst den Teil deines Quelltextes, der Probleme bereitet, in eine extra HTML-Datei, damit wir uns das anschauen können. Dann müssen wir uns nicht durch deinen Quelltext kämpfen und du bekommst das Problem warscheinlich ziemlich schnell gelöst. Aber du wirst wenig bzw. gar nichts lernen.

ciao, ww

[Leonard Claus]

Wenn du mir wirklich dabei helfen würdest, was super nett wäre,
überlasse ich dir natürlich die Entscheidung.
Ich wäre mit beiden Möglichkeiten zufrieden,
also kommt es nur auf dich an.

Lg, Leonard.

[wucher wichtel]

Hallo!

Wenn du mir wirklich dabei helfen würdest, was super nett wäre,

Dafür ist das Forum ja da :-)

überlasse ich dir natürlich die Entscheidung.

Ok, dann wähle ich Möglichkeit 1. Sie ist zwar für uns beide anstrengender, aber es lohnt sich.

  
<div id="all" align="center">  

Alle HTML-Angaben, die das Aussehen steuern (in diesem Fall das Attribut align) sollten durch CSS ersetzt werden -> text-align.

  
<div id="header">  
</div>  

Kommt da eventuell noch was rein? Sonst kannst du das rausschmeißen.

  
<table width="100" border="0" cellpadding="0" cellspacing="0">  
       <tr>  
         <td><a href="index.php?show=start" onMouseOver="change(0,mouseover0)" onMouseOut="change(0,standart0)"><img src="images/start.jpg" border="0" /></a></td>  
         <td>  
           <!--  
            [...]  
           -->  
         </td>  
       </tr>  
     </table>  

Tabellen sollten nur für tabellarische Daten eingesetzt werden. Zum Beispiel für einen Fahrplan o.ä. Ein Menü ist eher eine *Liste* von Links. Deswegen wäre es besser, wenn du <ol> oder <ul> nimmst, und diese dann per CSS formatierst.

  
<font size="-2"><b><font color="#2C2D22"><div align="center">Galerie.</div></font></b> <br />  

Der folgende Code hätte das gleiche Ergebnis:

  
<h1>Galerie</h1>  

Ich habe hier eine <h1> gewählt, weil es die Überschrift der Seite ist. Die Schriftgröße, Schriftfarbe, und das Schriftgewicht kannst du mit CSS einstellen -> font.

  
<script type="text/javascript">  
<!--  
//viel JS-Code  
//-->  
</script>  

Kleiner Tip: Die HTML-Kommentare sind unnötig. Das hat man früher gebraucht, dass Browser, die kein JS können, dieses ignorieren und nicht als Text ausgeben. Das dürfte heute wohl nicht mehr der Fall sein.
Viel wichtiger ist, dass du zweimal die Funktion change() und viermal die Funktion Klappen() in deinem HTML-Dokument hast. Das ist unnötig. Einmal reicht jeweils vollkommen aus.

  
function Klappen(Id) {  
var KlappText = document.getElementById('Lay'+Id);  
var KlappBild = document.getElementById('Pic'+Id);  
var jetec_Minus="images/minus.jpg", jetec_Plus="images/plus.jpg";  
if (KlappText.style.display == 'none') {  
KlappText.style.display = 'block';  
KlappBild.src = jetec_Minus;  
} else {  
KlappText.style.display = 'none';  
KlappBild.src = jetec_Plus;  
}}  

Du formatierst deinen Code nicht, bzw. nicht durchgängig. Diesen JS-Block kann man nur schwer lesen.

  
function Klappen(Id) {  
  var KlappText = document.getElementById('Lay'+Id);  
  var KlappBild = document.getElementById('Pic'+Id);  
  var jetec_Minus="images/minus.jpg", jetec_Plus="images/plus.jpg";  
  
  if (KlappText.style.display == 'none') {  
    KlappText.style.display = 'block';  
    KlappBild.src = jetec_Minus;  
  } else {  
    KlappText.style.display = 'none';  
    KlappBild.src = jetec_Plus;  
  }  
}  

So ist das ganze viel übersichtlicher. Wenn du deinen kompletten Code so formatieren würdest, dann wäre es auch einfach dir zu helfen.

  
<a href="javascript:Klappen(1)">  

Das javascript: kannst du weglassen. Mache es lieber über onclick.

  
<br /><br />  

Mehr als ein <br> deutet darauf hin, dass du einen Abstand regeln willst. Aber das geht viel viel besser und genauer mit CSS -> margin & padding.

  
 <style>  
a:link {text-decoration:underline;color:#6F7F0A}  
a:visited {text-decoration:underline;color:#6F7F0A}  
a:active {text-decoration:underline;color:#6F7F0A}  
a:hover {text-decoration:underline;color:#2C2D22}  
</style>  

<style>-Bereiche lagerst du am besten in ein externes CSS aus, oder du schreibst es wenigstens in den <head>-Bereich.

So :-) Das war's für den Anfang. Wenn du Fragen hast, dann poste einfach.

ciao, ww

[Leonard Claus]

so, hab jetzt ersmal alles auf 4 errors reduziert:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.same.cavenet.de%2Findex.php%3Fshow%3Dgalerie&charset=%28detect+automatically%29&doctype=Inline&group=0

[JürgenB]

Hallo Leonard,

so, hab jetzt ersmal alles auf 4 errors reduziert:

leider sind mindestens zwei davon entscheidend. Vieleicht habe ich dein Problem ja auch falsch verstanden, aber du hast ein Problem mit den Maus-Events, ich weise dich darauf hin, das man "onMouseOver" und "onMouseOut" klein schreibt, und genau diese beiden Fehler lässt du drin. Großes ? meinerseits.

Gruß, Jürgen

[wucher wichtel]

Hallo!

Großes ? meinerseits.

Meinerseits auch. Es befindet sich noch immer der gleiche Code an verschiedenen Stellen. Der Code ist nicht formatiert (=schwer zu lesen).

Übrigens bekommst du deinen Mouseover-Effekt ziemlich einfach hin:

  
<img src="test.jpg" alt="testbild" onmouseover="this.src = 'test_on.jpg'" onmouseout="this.src = 'test.jpg'">  

Dafür brauchst du keine Funktion(en, vorallem nicht die gleiche 4 mal). Ob du eine Funktion benützen willst, oder den Code bleibt dir überlassen. Bei der Funktion kann ich dir jetzt leider nicht helfen. Habe keine Zeit. Morgen abend schau ich es mir hoffentlich an, wenn dir bis dahin niemand weitergeholfen hat.

ciao, ww