Mouseover Problem

[hilfe]

Hallo Forummitglieder,

ich benötige Unterstützung bei folgendem Problem:
beim Aufbau einer Homepage soll eine waagerechte Bilderleiste mit 10
Bildern zu sehen sein,
die Bilder sollen jeweils durch Mouseover auf der selben Seite in einer
anderen Position und Größe erscheinen.
Die Position und Größe der zu erscheinenden Bilder ist bereits festgelegt.
Das eigentliche Problem liegt darin, dass die Waagerechtstellung der
Bilderleiste nicht zu erzwingen ist, die Bilder
lassen sich nur in der Vertikalen (untereinander) positionieren.

<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>

Für eine Hilfestellung wär ich sehr dankbar.
Schönen Gruß Roy

[Gerch2003]

  
<div id="box" style="position:absolute;left:0px;top:10px;>Box1</div>  
<div id="box" style="position:absolute;left:10px;top:10px;>Box2</div>  
<div id="box" style="position:absolute;left:20px;top:10px;>Box3</div>

So würde es aussehen wenn ein Div 10px breit wär.
Ich denke du verstehst was ich meine.
Ganz wichtig ist dabei "position:absolute;" Da die Positionierung sonst nicht funktioniert.

Grüße

[Marc]

Hallo,

<div id="box" style="position:absolute;left:0px;top:10px;>Box1</div>
<div id="box" style="position:absolute;left:10px;top:10px;>Box2</div>
<div id="box" style="position:absolute;left:20px;top:10px;>Box3</div>

>   
>   
> So würde es aussehen wenn ein Div 10px breit wär.  
> Ich denke du verstehst was ich meine.  
> Ganz wichtig ist dabei "position:absolute;" Da die Positionierung sonst nicht funktioniert.  
  
Schade, dass man Beiträge nciht als nicht hilfreich bewerten kann...  
  
Anführungsstriche schließen, IDs nur einmal je Dokument verwenden, absolute Psoitionierung nciht verwenden, um etwas zu erreichen, was "automatisch" geschieht, keine inline-styles verwenden...  
  
Das Problem des OP ist lediglich, dass die Bilder in DIVs stecken. Diese nehmen als Block-Level-Elemente die gesamte Breite des Elternelementes und die Höhe ihres Inhaltes an, also beginnt jedes neue DIV unter seinem Vorgänger und ist so hoch wie das enthaltene Bild. Dass die Bilder, die sich in dem DIV befinden nicht neben den Bildern in dem ersten DIV angezeigt werden, ist eigentlich selbstverständlich.  
Das Problem lässt sich auf verschiedene Weisen lösen. Die Bilder nebeneinander zu stellen wurde ja schon von Deus Figendi gezeigt.  
  
Die unnötigen DIVs nun absolut zu positionieren mag zwar funktionieren, ist aber einer der schlechtesten denkbaren Lösungen, da die Elemente so aus dem normalne Elementfluss gerissen werden und sich der OP nun um die Positionierung aller nachfolgenden Elemente händisch kümmern müsste.  
  
Viele Grüße,  
Marc.

-- 
Und immer schön  
validieren (<http://validator.w3.org/>)

[hilfe]

<div id="box" style="position:absolute;left:0px;top:10px;>Box1</div>
<div id="box" style="position:absolute;left:10px;top:10px;>Box2</div>
<div id="box" style="position:absolute;left:20px;top:10px;>Box3</div>

>   
>   
> So würde es aussehen wenn ein Div 10px breit wär.  
> Ich denke du verstehst was ich meine.  
> Ganz wichtig ist dabei "position:absolute;" Da die Positionierung sonst nicht funktioniert.  
>   
> Grüße  
  
Vielen Dank für die schnellen Tipps.  
Das Problem mit der Waagerechtstellung der Bilder konnte ich lösen, die kleinen Thumbnails sind nun wie gewünscht positioniert.  
  
Doch bei der Mouseover Funktion gibt es ein Problem in der Positionierung der vergrößerten Ansicht.  
Da die Bildleiste aus bis zu 10 Bildern besteht wandert bei der jeweils nächsten Vergößerung die Abbildung immer um die Größe des vorherigen Thumbnail nach rechts.  
Es wirkt wie eine starre Verbindung zwischen Thumbnail und Vergrößerung, die immer den gleichen vorher fixierten Abstand aufweist.  
Da aber die Abbildungen immer in der gleichen Position erscheinen sollen bitte ich um Hilfe wie ich das einfach umsetzen kann.  
(Bin leider kein HTML Profi, bitte um Nachsicht!)  
  
Beispiel hier nur mit 3 Bildern:  
~~~html
  
<head>  
<style type="text/css">  
<!--  
img {  
border:none;  
}  
  
#box{  
height:75px;  
width:95px;  
padding:0;  
margin:0px;  
font:bold 14px verdana, sans-serif;}  
  
#box div{display:none;}  
#box:hover div{  
display:block;  
width:300px;  
position:absolute;bottom:120px;left:680px;  
padding:0px;  
font:normal 14px verdana, sans-serif;}  
-->  
</style>  
</head>  
  
<body>  
<div id="box" style="position: absolute; left: 140px; top: 550px;">  
<a href="#"><img style="width: 95px; height: 75px;" alt="Bild1.jpg" src="Bild1.jpg">  
</a><div><p><a href="#"><img src="Bild1-big.jpg" alt="Bild1-big.jpg" height="307" width="410"></a></p></div></div>  
  
<div id="box" style="position: absolute; top: 550px; left: 237px;">  
<a href="#"><img style="width: 95px; height: 75px;" alt="Bild2.jpg" src="Bild2.jpg">  
</a><div><p><a href="#"><img src="Bild2-big.jpg" alt="Bild2-big.jpg" height="307" width="410"></a></p></div></div>  
  
<div id="box" style="position: absolute; left: 334px; top: 550px;">  
<a href="#"><img style="width: 95px; height: 75px;" alt="Bild3.jpg" src="Bild3.jpg">  
</a><div><p><a href="#"><img src="Bild3-big.jpg" alt="Bild3-big.jpg" height="307" width="410"></a></p></div></div>  
</body>  

Schöne Grüße Roy

[EKKi]

Mahlzeit hilfe,

Du solltest die Änderungen, die Du aufgrund von Gerch2003s Beitrag vorgenommen hast, schleunigst wieder entfernen - siehe Marcs Anmerkungen.

Vielen Dank für die schnellen Tipps.

... deren Brauchbarkeit aber stark eingeschränkt ist.

Das Problem mit der Waagerechtstellung der Bilder konnte ich lösen, die kleinen Thumbnails sind nun wie gewünscht positioniert.

... was hauptsächlich Zufall ist. "Gelöst" hast Du Dein Problem jedenfalls nicht - allerhöchstens verlagert.

Doch bei der Mouseover Funktion gibt es ein Problem in der Positionierung der vergrößerten Ansicht.
Da die Bildleiste aus bis zu 10 Bildern besteht wandert bei der jeweils nächsten Vergößerung die Abbildung immer um die Größe des vorherigen Thumbnail nach rechts.

Aha. Da wären schon die ersten Probleme, die sich aus murksiger absoluter Positionierung ergeben. Verzichte darauf. Dringend.

MfG,
EKKi

[Deus Figendi]

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.