Deus Figendi: Mouseover Problem

Beitrag lesen

Guten Morgen,
ohne dir zu nahe treten zu wollen, aber ich fürchte dein Vorhaben übersteigt derzeit deine Fähigkeiten. Ich will nicht sagen, dass du HTML neu lernen musst, aber dir fehlen offensichtlich ein paar Grundlagen.
Um den Code mal lesbarer zu gestalten...

<div id="box">
 <a href="#">
  <img style="width: 95px; height: 75px;" alt="BTh-007-1.jpg" src="BTh-007-1.jpg">
 </a>
 <div>
  <p>
   <a href="#">
    <img src="BTh-007-1.jpg" alt="" height="307" width="410">
   </a>
  </p>
 </div>
</div>
<div id="box">
 <a href="#">
  <img style="width: 95px; height: 75px;" alt="BTh-009-1.jpg" src="BTh-009-1.jpg">
 </a>
 <div>
  <p>
   <a href="#">
    <img src="BTh-009-1.jpg" alt="" height="307" width="410">
   </a>
  </p>
 </div>
</div>
<div id="box">
 <a href="#">
  <img style="width: 95px; height: 75px;" alt="BTh-010-1.jpg" src="BTh-010-1.jpg" >
 </a>
 <div>
  <p>
   <a href="#">
    <img src="BTh-010-1.jpg" alt="" height="307" width="410">
   </a>
  </p>
 </div>
</div>

  
  
Beispielsweise:  
Du verwendest die ID "box" viele Male in deinem Dokument. IDs müssen aber einmalig sein.  
Du verwendest verschiedenste Techniken um die Größe der Bilder zu bestimmen  
Du verwendest leere alt-Attribute wo vermutlich Inhalt zu finden ist (oder verwendest den nichtssagenden Dateinamen).  
Du verschachtelst deine Bilder in unterschiedlichen Ebenen (einmal div-a-img und einmal div-p-a-img) und wirkst irritiert, dass sie sich unterschiedlich verhalten.  
und das Härteste: Es macht dir Schwierigkeiten Bilder (img-Elemente) waagerecht aneinander zu reihen.  

> Das eigentliche Problem liegt darin, dass die Waagerechtstellung der  
> Bilderleiste nicht zu erzwingen ist, die Bilder  
> lassen sich nur in der Vertikalen (untereinander) positionieren.  

img-Elmente sind sog. "inline-Elemente", sie ordnen sich ganz von selbst waagerecht an, wenn man sie zu nichts anderem zwingen will.  
~~~html
<img class="BildK" alt="was auf dem Bild zu sehen ist" src="BTh-007-1.jpg">  
<img class="BildG" alt="was auf dem Bild zu sehen ist" src="BTh-007-1.jpg">  
<img class="BildK" alt="was auf dem Bild zu sehen ist" src="BTh-008-1.jpg">  
<img class="BildG" alt="was auf dem Bild zu sehen ist" src="BTh-008-1.jpg">  
<img class="BildK" alt="was auf dem Bild zu sehen ist" src="BTh-009-1.jpg">  
<img class="BildG" alt="was auf dem Bild zu sehen ist" src="BTh-009-1.jpg">

schon fertig. Alles was du tun musst um Bilder waagerecht anzuordnen ist, ihre img-Elemente hintereinander weg ins Dokument zu schreiben.
Meinetwegen kann man da auch noch ne Box drum machen oder um jeweils zwei gleiche Bilder ein Span-Element.

<div id="box">  
 <span id="Paar7">  
  <img class="BildK" alt="wadBzsi" src="BTh-007-1.jpg" />  
  <img class="BildG" alt="wadBzsi" src="BTh-007-1.jpg" />  
 </span>  
 <span id="Paar8">  
  <img class="BildK" alt="wadBzsi" src="BTh-008-1.jpg" />  
  <img class="BildG" alt="wadBzsi" src="BTh-008-1.jpg" />  
 </span>  
 <span id="Paar9">  
  <img class="BildK" alt="wadBzsi" src="BTh-009-1.jpg" />  
  <img class="BildG" alt="wadBzsi" src="BTh-009-1.jpg" />  
 </span>  
 <span id="Paar10">  
  <img class="BildK" alt="wadBzsi" src="BTh-010-1.jpg" />  
  <img class="BildG" alt="wadBzsi" src="BTh-010-1.jpg" />  
 </span>  
</div>

Damit kann man schon mehr anfangen wenn man nun mit Styles und Scripten ran will.

Für eine Hilfestellung wär ich sehr dankbar.

Wie gesagt, die beste Hilfestellung die man dir imho geben kann ist: Zurück auf die Schulbank, du musst HTML noch lernen.

--
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(