Mousover mit CSS - ich find hier keine Lösung

  • Hallo alle,

    mein voriges Posting blieb leider ohne Antworten.
    Ich denke ich bin auf dem richtigen Weg, leider müßte noch einfacher gehen deshalb brauche ich Eure Hilfe.

    Ich will die Bildern (Thumbs) beim rüberfahren mit der Maus das das jeweilige (große) Bild in einem immer den gleichen festen positioniertem Fenster (rechter mittiger Bildschirmrand) ohne Rahmen u.d. öffnen lassen.
    Allerdings sollte es so sein, das beim verlassen des Thumbs sich das Fenster auch wieder schließt. Und es sollte sich kein vergrößertes Bild verzerren, d.h. das ich zwei verschiedene Formate habe...bsp. 1. 480px x 240px und 2. 280px x 480px, also Hoch -und Querformat.

    Hier mein Script was bisher einigermaßen funktioniert allerdings ohne feste angabe des öffnenden Fenster und ohne wie im untersten Script mit "anzeige3" und "anzeige4":

    <style type="text/css">
    a.info{
    position:relative;
    z-index:1; background-color:#ccc;
    color:#000;
    text-decoration:none}

    a.info:hover{z-index:2; background-color:#ff0}


    a.info span{display: none;

    }
    a.info:hover span{
    display:block;
    position:absolute;
    top:2em; left:25em; width:5em;
    border:1px solid ccff;
    background-color:#cff; color:#000;
    text-align: center}
    </style>

    <tr>
    <td>
    <span></span>
    </td>
    <td>
    <span></span>
    </td>
    <td>
    <span></span>
    </td>
    </tr>

    Ich möchte allerdings was ich schon in einem anderen Script gesehen habe nicht unbeding die Maßangaben der Großbilder mit angeben wie hier in dem volgendem Script zu sehen ist:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML><HEAD>
    <TITLE></TITLE>
    <script language="JavaScript">
    <!--

    var nummer;
    bild = new Array("01.jpg","01.jpg","02.jpg","03.jpg","04.jpg","05.jpg","06.jpg");


    function anzeige3(nummer){
    fensterchen = window.open("","seite","width=480,height=320,top=100,left=200",screenx="300",screeny="200",menubar="no");
    fensterchen.document.open();
    fensterchen.document.write("<body topmargin='0' leftmargin='0' marginheight='0' marginwidth='0'>" + "");
    fensterchen.document.close();
    }

    function anzeige4(nummer){
    fensterchen = window.open("","seite","width=320,height=480,top=100,left=200",screenx="300",screeny="200",menubar="no");
    fensterchen.document.open();
    fensterchen.document.write("<body topmargin='0' leftmargin='0' marginheight='0' marginwidth='0'>" + "");
    fensterchen.document.close();
    }


    //-->
    </script>
    <link rel="stylesheet" type="text/css" href="css/format.css">
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    </HEAD>
    <BODY aLink="#000000" bgColor="#ffffff" leftMargin="0" link="#445366" text="#445366" topMargin="0" vLink="#445366" marginwidth="0" marginheigt="0">


    <table border="0" cellpadding="0" cellspacing="20">
    <tr>
    <td width="180" height="120" bgcolor="#000000"></td>
    <td width="180" height="120" bgcolor="#000000"></td>
    <td width="180" height="120" bgcolor="#000000"></td>
    <td width="180" height="120" bgcolor="#000000"></td>
    </tr>
    <tr>
    <td width="180" height="120" bgcolor="#000000"></td>
    <td width="180" height="120" bgcolor="#000000"></td>
    </tr>
    </table>
    </BODY></HTML>


    Kann mir jemand Helfen?
    Ich wäre euch wirklich dankbar.

    Richi