Mousover bei Thumbnail neues Fenster mit größerem Bild öffne

richi

Hallo,

bin absuluter Neuling und schon seit 2 Tagen am Programieren.

Ich versuche meine Thumbnails beim überfahren mit der Maus ein selbstpositioniertes Fenster (bsp. rechter Bildschirmrand Mitte) mit dem größeren Bild darzustellen.
Beim verlassen des Thumbnails soll sich das größere Fenster wieder schließen.
Da ich aber auch 2 verschieden Bildformate (hoch=480 und quer=512 und umgekehrt) habe sollten diese nicht verzerrt werden.

Gibt es hierfür vielleicht eine einfache Lösung mit Beispiel?

Wäre echt toll wenn mir jemand dabei helfen könnte, ich verzweifle langsam.

Lieben Gruß
freesy

sejuma

Die Positions-, Größen- und Dateiangaben müsstest du noch anpassen. Ansonsten sollte es klappen:
CSS

Code

a.info{


    position:relative;
    z-index:1;
    text-decoration:none;
    }


a.info:hover{z-index:2;position:absolute;}


a.info span{display: none;
background-image: url(hoverbild.jpg);
}


a.info:hover span{
    display:block;
    position:absolute;
    top:2em; left:20em; width:150px;height:100px;
}

Alles anzeigen

HTML

Code

[url='#'][img]bild1.jpg[/img] <span></span>[/url]

freesy

Danke dir, aber damit wird das Problem nicht gelöst, habe seither viel experimentiert und dieses soweit hin bekommen, habe die CSS auch extern abgespeichert wo drauf zugegriffen wird...hier nur zu veranschaulichen:

CSS

Code

<style type="text/css">
<div class="aussencontainer">
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:10em; left:40em; width:1em; height:1px;
    border:2px solid ccff;
    background-color:#cff; color:#000;
    text-align: center}
</div>
</style>

Alles anzeigen

HTML

Code

[url='#'][img]klein/01.jpg[/img]<span>[img]01.jpg[/img]</span>[/url]
</td>
<td>
[url='#'][img]klein/02.jpg[/img]<span>[img]02.jpg[/img]</span>[/url]
</td>
<td>
[url='#'][img]klein/03.jpg[/img]<span>[img]03.jpg[/img]</span>[/url]

Was ich gerne möchte als CSS ist:

JS "onclick" was ich aber nicht will:

Code

<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'>" + "[img]"+bild[nummer]+"[/img]");
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'>" + "[img]"+bild[nummer]+"[/img]");
fensterchen.document.close();
}




                //-->
        </script>

Alles anzeigen

HTML

Code

<td width="180" height="120" bgcolor="#000000">[url='#'][img]klein/01.jpg[/img][/url]</td>
    <td width="180" height="120" bgcolor="#000000">[url='#'][img]klein/02.jpg[/img][/url]</td>
    <td width="180" height="120" bgcolor="#000000">[url='#'][img]klein/03.jpg[/img][/url]</td>

Wie du siehst brauche ich im HTML nicht mehr das großeFoto mit größenangaben eintragen, ebenso sind diese im JS-Script eingetragen.

gibt es soetwas als CSS, das wäre zu schön um wahr zu sein.

Tags