Bild vergrößern mit Mouseover

  • Hallo Zusammen, ich möchte ein paar Bilder nebeneinander haben und wenn man mit der Mouse drüber geht soll sich das Einzelne vergrößern. Mit dem vergrößern habe ich auch schon hinbekommen aber leider schiebt das vergrößerte Bild das daneben liegende weg. Ich möchte, das das vergrößerte Bild über das andere dargestellt wird. :?:


    Bisher habe ich es so:

    Code
    <table  cellspacing="5" style="text-align: center;margin: 0 auto;">
        <tr>
            <td><img onmouseover="(src='bild.jpg')" onmouseout="(src='bild.jpg')" src="bild.jpg"/></td>
            <td><img onmouseover="(src='bild.jpg')" onmouseout="(src='bild.jpg')" src="bild.jpg"/></td>
        </tr>
    </table>
  • Das hat nichts mit JavaScript zu tun, sondern mit CSS :P
    Du solltest ein anderes Bild die neue Source geben und es absolut positionieren und einen z-index vergeben :)


    Übrigens, ein Tipp:
    Es ist weitaus professioneller wenn man nicht die on-Events in den HTML-Tags verwendet, sondern die Events überwachen/"abhören" lässt.
    Verwendest du irgendwelche Frameworks? Ansonsten kann ich dir dazu gleich noch eine kleine Funktion schreiben, da der IE < 9 mal wieder ne extra wurst braucht^^

  • Mit CSS ginge das so:


    HTML:

    Code
    <div class="imageHold">
        <div><img src="bild.jpg" /></div>
        <div><img src="bild.jpg" /></div>
        <div><img src="bild.jpg" /></div>
        <div><img src="bild.jpg" /></div>
      </div>


    CSS:


    Funktioniert auch im IE, wir brauchen nur noch ein Bild.

  • Hallo Zusammen,


    Bin zur Zeit an eine Homepage für mich zu schreiben. Da ich noch nicht Fit bin in der HTML Sprache, bin ich viel unterwegs im IE um eine Lösung für mein Problem zu finden.
    Dabei bin ich auf diese Seite gekommen. Habe den Code von Basiii verwendet und der gefällt mir sehr gut. Nur habe ich noch ein Problem damit. Dazu benötige ich einmal eure Hilfe.


    Bei mir geht es darum, das ich Fotos auf meiner Homepage zeigen möchte, die erst in Kleinformat und wenn man mit der Mouse drüber geht vergrößert dargestellt wird. Besonders gefällt mir das dass größere Foto drüber gelegt wird.
    Aber ich habe Fotos, die in Hoch- und Querformat sind. Wenn ich den Code von Basiii nehme werden die Fotos in Querformat richtig dargestellt, aber wenn ich ein Hochformat Foto nehme wird das nicht in Hochformat sondern auch in Querformat gezogen, was natürlich nicht gut aussieht.
    Kann man den Code von Basiii noch etwas abändern, das sowohl hoch- als auch Querformat Fotos richtig dargestellt werden?


    Über eure Hilfe wäre ich sehr Dankbar.

  • Du könntest einfach zwei Klassen verwenden, wo dann jeweils die richtigen Maße angegeben werden.. Dann musst du halt jedem Bild die entsprechende Klasse geben und dann entsprechend die Größe ändern.


    Alternativ könntest du das auch mit Javascript dynamisch lösen..

  • Hallo Lauras,


    Danke für deine Antwort. Leider habe ich da noch ein anderes Problem, so ähnlich hatte ich es auch versucht. Wenn ich die Vorlage von Basiii benutze und den HTML Code nehme:


    <div class="BildHoch">
    <div><img src="bild.jpg" /></div>
    <div><img src="bild.jpg" /></div>
    <div><img src="bild.jpg" /></div>
    <div><img src="bild.jpg" /></div>
    </div>
    geht das mit den Klassen ja nur wenn ich class in den einzelnen div Anweisungen setze.
    <div class="BildWeit"><img src="bild.jpg" /></div>


    Nur das funktioniert nicht. Eventuell mache ich ja auch ein Denkfehler.
    Wäre es möglich den Code von Basiii entsprechend abzuändern und hier einzustellen bez. mir als PM zu schicken?

  • Hallo Lauras,


    ich habe den Code von Basiii verwendet den er hier etwas höher im Tread 3 geschrieben hat, vom 08.Sep.2011.Deswegen denke ich das ich ihn nicht noch einmal hier hochladen muss.
    Das klappt wunderbar. Aber nur mit Fotos mit Querformat.
    Ich habe Fotos die unterschiedlich sind sowohl in Hoch- und Querformat. Wobei die Anordnung der Bilder von Hoch- und Querformat variieren.
    Dafür benötige ich eine Lösung. Wenn möglich ohne Java, denn da kenne ich mich noch gar nicht aus.
    Es wär klasse wenn du mir da etwas unterstützen könntest.

  • Ja, ich habe dir doch geschrieben, wie du den Code abwandeln musst, damit sollte es doch funktionieren ;)
    Du musst auch schon ein bisschen was selbst machen, du sollst ja was lernen, ich werde dir da jetzt keinen fertigen Code vorsetzen, so schwer ist das nicht :)

  • Hey, Basiii, der Code funktioniert super und ist ziemlich erhellend. Was heißen soll, ich verstehe ihn. Danke dafür.
    Ich baue am meiner Website. Soll ganz einfach werden, am besten nur aus einer einzigen Seite bestehen. ... oder zumindestens einfach aussehen.


    Ich habe vier kleine Bilder, die als Navigationsbuttons funktionieren. Über einen Hoovereffekt gehen darüber vier neue Bilder auf, in denen Text und kleine Bilder zu sehen sind. Das konnte ich mit Hilfe von MSWeb4 bewerkstelligen.


    1. Problem dabei ist, Bild 1 muss genauso groß sein, wie Bild 2.


    So sieht das im HTML-Quellcode (Java) aus:
    <img id="img1" alt="web" class="auto-style1" height="383" longdesc="web" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'images/web_color.jpg')" src="images/web.jpg" width="255">


    Ich habe es so gelöst: Das erste Bild (Button) hat die Maße 255x283. Es ist eine weiße Fläche, oben klein der Button plaziert. Das Bild für den onmouseover hat die selben Maße, nur eben voll mit Bild und Text.


    2. Problem: Dadurch, dass ich vier relativ große Bilder verwenden muss, liegen die Buttons zu weit auseinander. Das ist suboptimal.


    Frage: ... endlich ...
    Wir kriege ich es hin, dass von einem kleinen Bild auf ein größeres gehoovert wird. Geht das auf einfache Weise?


    Bin gespannt, ob eine Antwort kommt. Danke.
    Gerhard

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!