kostenloser Webspace werbefrei: lima-city


Bild bei Mausberührung vergrössern

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    wolle-joy

    Kostenloser Webspace von wolle-joy

    wolle-joy hat kostenlosen Webspace.

    Bei nachfolgendem Code wird die Vergrösserung bei Firefox und Opera angezeigt,
    Im IE Vers. 8 dagegen nicht:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="de">
    <head>
    <meta http-equiv="content-type" content="text/html;
    charset=ISO-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>Bildergalerie</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <link rel="stylesheet" type="text/css" href="../css/demo.css">
    <style type="text/css">
    body
    {
    background-color: #fff;
    font-family: Verdana, Arial, sans-serif;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0
    font-size: 100.01%;
    }

    #container
    {
    margin: 20px 0;
    padding: 10px;
    font-size: 0.9em;
    }
    #galerie li
    {
    list-style-type: none;
    float: left;
    margin: 0 10px 10px 0;
    text-align: center;
    font-weight: bold;
    position: relative;
    }

    #galerie img
    {
    width: 180px;
    height: 125px;
    display: block;
    padding: 3px;
    border: 1px solid #8B0000;
    }

    #galerie a .gross
    {
    display: none;
    }

    #galerie a:hover .gross
    {
    width: 328px;
    height: 228px;
    display: block;
    position: absolute;
    top: -50px;
    left: -50px;
    z-index: 1;
    background: #fff;
    }

    /*--Spezialangaben f&uuml;r den Internet Explorer 7--*/
    *+html #galerie a:hover { z-index: 1;}
    *+html #galerie li{position: static;}
    *+html #galerie a {position: relative;}

    /*--Spezialangaben f&uuml;r den Internet Explorer 6--*/
    *html #galerie a:hover {display: block; z-index: 1;}
    *html #galerie li{position: static;}
    *html #galerie a {position: relative;}

    </style>
    <!--Parameter Suchfunktion-->
    <script src="../searchhi.js" type="text/javascript"></script>
    <!--Ende Parameter Suchfunktion-->

    </head>
    <body>

    <div id="container">
    <h3 align="center">Bildergalerie mit Vergrößerung bei Mausberührung</h3>

    <div id="galerie">
    <ul>



    <li>
    <a href="#"><img src="test/01DSC_4083_klein.jpg" alt="klein"><img class="gross" src="test/01DSC_4083_gross.jpg" alt="gross"></a>
    </li>

    <li>
    <a href="#"><img src="test/02DSC_4084_klein.jpg" alt="klein"><img class="gross" src="test/02DSC_4084_gross.jpg" alt="gross"></a>
    </li>

    <li>
    <a href="#"><img src="test/03DSC_4094_klein.jpg" alt="klein"><img class="gross" src="test/03DSC_4094_gross.jpg" alt="gross"></a>
    </li>

    <li>
    <a href="#"><img src="test/04DSC_4095_klein.jpg" alt="klein"><img class="gross" src="test/04DSC_4095_gross.jpg" alt="gross"></a>
    </li>







    </ul>

    </div> <!--Ende galerie-->
    <br style="clear: both;">

    Wer hat eine Lösung?

    wolle-joy
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Hi

    Ich habs grad in meinen Browsern getestet, bei mir funktionierts. Der IE 8 funktioniert vieles wie im FF oder Opera, villeicht bindest du deine <IE8 Versionen per Browserweiche ein oder fügst bei onHover eine Hilfsklasse ein.
    Mit der Hilfsklasse wäre dann auch :hover unnötig und die Browserweiche und Javascript braucht man so oder so überall.

    Grüsse
  4. Autor dieses Themas

    wolle-joy

    Kostenloser Webspace von wolle-joy

    wolle-joy hat kostenlosen Webspace.

    Hallo glitzerglas,

    danke für Deine schnelle Reaktion, ich werde den Sachverhalt überprüfen und denke, dass das Thema damit erledigt ist

    Liebe Grüsse aus dem sonnigen Thailand

    wolle resp.: wolle-joy
  5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!