Bildlaufleiste soll bei MouseOver Bild vergrößert anzeigen.

  • Frage

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Bildlaufleiste soll bei MouseOver Bild vergrößert anzeigen.

    Hallo Leute,

    habe eine Frage. Und zwar möchte ich eine Bildlaufleiste erstellen bei der jedes einzelne Bild wenn man mit der Maus darüber geht vergrößert angezeigt wird.

    Wie man das mit dem Bild vergrößern hinbekommt hab ich jetzt mal mit css gemacht.

    Also:
    im Head
    <link rel="stylesheet" href='css/hoverbox.css' type="text/css" media="screen, projection" />
    <!--[if IE]>
    <link rel="stylesheet" href='css/ie_fixes.css' type="text/css" media="screen, projection" />
    <![endif]-->

    im Body
    <ul class="hoverbox">
    <li>
    <a href="#"><img src="img/photo01.jpg" alt="description" /><img src="img/photo01.jpg" alt="description" class="preview" /></a>
    </li>
    <li>
    <a href="#"><img src="img/photo02.jpg" alt="description" /><img src="img/photo02.jpg" alt="description" class="preview1" /></a>
    </li>
    <li>
    <a href="#"><img src="img/photo03.jpg" alt="description" /><img src="img/photo03.jpg" alt="description" class="preview" /></a>
    </li>
    <li>
    <a href="#"><img src="img/photo04.jpg" alt="description" /><img src="img/photo04.jpg" alt="description" class="preview" /></a>
    </li>
    <li>
    <a href="#"><img src="img/photo05.jpg" alt="description" /><img src="img/photo05.jpg" alt="description" class="preview" /></a>
    </li>
    </ul>

    css hoverbox
    *
    {
    border: 0px none;
    margin: 0;
    padding: 0
    }

    /* =Basic HTML, Non-essential
    ----------------------------------------------------------------------*/

    a
    {
    text-decoration: none;
    }

    body
    {
    background: #fff;
    color: #777;
    margin: 0 auto;
    padding: 50px;
    width: 620px;
    }

    h1
    {
    background: inherit;
    border-bottom: 1px dashed #ccc;
    color: #933;
    font: 17px Georgia, serif;
    margin: 0 0 10px;
    padding: 0 0 5px;
    text-align: center;
    }

    p
    {
    clear: both;
    font: 10px Verdana, sans-serif;
    padding: 10px 0;
    text-align: center;
    }

    p a
    {
    background: inherit;
    color: #777;
    }

    p a:hover
    {
    background: inherit;
    color: #000;
    }

    /* =Hoverbox Code
    ----------------------------------------------------------------------*/

    .hoverbox
    {
    cursor: default;
    list-style: none;
    }

    .hoverbox a
    {
    cursor: default;
    }

    .hoverbox a .preview
    {
    display: none;
    }

    .hoverbox a:hover .preview
    {
    display: block;
    position: absolute;
    top: -33px;
    left: -45px;
    z-index: 1;
    }

    .hoverbox img
    {
    background: #fff;
    border-color: #aaa #ccc #ddd #bbb;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    padding: 2px;
    vertical-align: top;
    width: 75px;
    height: 100px;
    }

    .hoverbox li
    {
    background: #eee;
    border-color: #ddd #bbb #aaa #ccc;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
    }

    .hoverbox .preview
    {
    border-color: #000;
    width: 300px;
    height: 200px;
    }

    .hoverbox
    {
    cursor: default;
    list-style: none;
    }

    .hoverbox a
    {
    cursor: default;
    }

    .hoverbox a .preview1
    {
    display: none;
    }

    .hoverbox a:hover .preview1
    {
    display: block;
    position: absolute;
    top: -33px;
    left: -45px;
    z-index: 1;
    }

    .hoverbox img
    {
    background: #fff;
    border-color: #aaa #ccc #ddd #bbb;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    padding: 2px;
    vertical-align: top;
    width: 100px;
    height: 75px;
    }

    .hoverbox li
    {
    background: #eee;
    border-color: #ddd #bbb #aaa #ccc;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
    }

    .hoverbox .preview1
    {
    border-color: #000;
    width: 500px;
    height: 200px;
    }

    css ie_fixes
    /* =Internet Explorer Fixes
    ----------------------------------------------------------------------*/

    .hoverbox a
    {
    position: relative;
    }

    .hoverbox a:hover
    {
    display: block;
    font-size: 100%;
    z-index: 1;
    }

    .hoverbox a:hover .preview
    {
    top: -38px;
    left: -50px;
    }

    .hoverbox li
    {
    position: static;
    }

    Was allerdings ein Problem ist, ist das die Bilder nicht nebeneinander sind was sie eigentlich sein sollen. Und ich bekomme es nicht hin das die Bilder wie eine Laufschrift laufen. Hab es mal mit <marquee></marquee> ausprobiert aber irgendwie läuft dann nur ein einziges Bild in der Art. Wie kann man das lösen? Ich hab sehr wenig Ahnung von Flash. Geht das irgendwie mit CSS, JavaScript oder HTML?

    Es sollen ganz einfach so 5-10 Bilder auf einer Homepage unten als Vorschau für die Gallerie angezeigt werden. Und wenn man mit der Maus über das jeweilige Bild geht soll es vergrößert dargestellt werden und bei klick darauf soll die Gallerie aufgehen.

    Danke schonmal für eure Hilfe.