Bild preload bei onmouseover ?

[Trash]

Hallo,
ich weiß nicht genau ob es DHTML oder JavaScript ist, denn ich suche eine Funktion die folgendes tut:

Wir haben einen Textlink und wenn man über diesen fährt öffnet sich ein größeres Fenster in dem das Bild als "Vorschau" angezeigt wird. Wenn man auf den Link klickt soll sich das Bild in voller Größe öffnen ... letzteres bekomme ich noch selber hin )


Danke

Beispiel:
http://www.vipom.de/torben/bildgross.jpg

 

[Andreas Gaisbauer]

Meinst du so wie hier: http://digitalart.org/art.categories.php?ID=19 ?

 

[bruderherz]

ja, so meint er das crono, glaub ich jedenfalls^^

na ja, jedenfalls machst du das am besten mit einzelnen layern, in denen immer die bilder sind. die layer machst du anfangs alle unsichtbar, und wenn man über einen link fährt änderst du die sichtbarkeit mit dhtml (was eigentlich nichts anderes ist, als javascript in ner höheren version )

 

[Andreas Gaisbauer]

Original geschrieben von bruderherz
dhtml (was eigentlich nichts anderes ist, als javascript in ner höheren version )

Das glaub ich nicht Tim Sorry, da muss ich dich berichtigen... DHTML is eigentlich nur ein Sammelbegriff für die Kombination aus HTML, CSS und Javascript - es ist keine neue Sprache - sondern nur die Kombination aus bereits bekannten Technologien...

ciao

 

[bruderherz]

Original geschrieben von crono
Das glaub ich nicht Tim Sorry, da muss ich dich berichtigen... DHTML is eigentlich nur ein Sammelbegriff für die Kombination aus HTML, CSS und Javascript - es ist keine neue Sprache - sondern nur die Kombination aus bereits bekannten Technologien...

ciao

hmm...ja, für mich ists einfach javascript 1.4 (oder 1.3?^^)

aber nur ne kombination aus css und javascript. in html hat sich da nichts verändert, oder irre ich mich mal wieder?^^

na gut, dann ist dhtml halt, javascript das auf die style elemente zugreifen kann, sie lesen, ändern und setzen kann, tom

was soll das tim eigentlich pater?

 

[Andreas Gaisbauer]

Original geschrieben von bruderherz
hmm...ja, für mich ists einfach javascript 1.4 (oder 1.3?^^)

aber nur ne kombination aus css und javascript. in html hat sich da nichts verändert, oder irre ich mich mal wieder?^^

Nein, du überschätzt DHTML nur - es hat sich auch nix an JS 1.4 (is die aktuelle JS-Version) oder an CSS geändert

na gut, dann ist dhtml halt, javascript das auf die style elemente zugreifen kann, sie lesen, ändern und setzen kann, tom

Ok - von mir aus

was soll das tim eigentlich pater?

Kennst du "Hör mal wer da Hämmert" (RTL - täglich 17:00 Uhr) ? Wenn nicht, ist es auch egal - der Spruch kommt halt aus der Serie - is aber egal...


ciao

 

[bruderherz]

Original geschrieben von crono
Nein, du überschätzt DHTML nur - es hat sich auch nix an JS 1.4 (is die aktuelle JS-Version) oder an CSS geändert


Ok - von mir aus



Kennst du "Hör mal wer da Hämmert" (RTL - täglich 17:00 Uhr) ? Wenn nicht, ist es auch egal - der Spruch kommt halt aus der Serie - is aber egal...


ciao

überschätzt? nicht eher unterschätzt? doch hat sich, man kann doch jetzt wie schon gesagt auf die css zugreifen, oder versteh ich mal wieder was falsch?^^

jo, kenn ich, guck ich aber nicht

 

[Trash]

ja sowas meine ich Tim nur das Problem ist ich habe sogut wie kaum einen Plan von DHTML geschweige denn JavaScript, deshalb wäre ich für eine fertige Funktion recht dankbar. Wo wir schon dabei sind kennt jemand ein gutes javascript buch welches ich mir mal kaufen kann ...?



//edit:

Ist das vielleicht der Code:

var win = null;
function PopupWindow(url, name, w, h){
var l = (screen.width - w) / 2;
var t = (screen.height - h) / 2;
win = window.open(url, name, 'height='+h+',width='+w+',top='+t+',left='+l+',scrollbars=yes,resizable=yes');
if (parseInt(navigator.appVersion) >= 4) {
win.window.focus();
}
}

<a href="http://digitalart.org/artwork.php?ID=22222" target="_top" onMouseOut="popUp(event,'art22222')" onMouseOver="popUp(event,'art22222')">Merry easter!!</a>

nur art22222 oder event sind keine URLs

bitte helft mir danke

 

[Andreas Gaisbauer]

Original geschrieben von bruderherz
doch hat sich, man kann doch jetzt wie schon gesagt auf die css zugreifen, oder versteh ich mal wieder was falsch?^^

Was aber eigentlich dem DOM zu verdanken ist, aber lassen wir das - is ja schlussendlich sowieso egal, da wir ja das gleiche meinen

Aber um wieder auf´s Topic zu kommen, hab ich schnell eine billig Version geschrieben...

<html>
<head>
    <title>Test</title>
   <script type="text/javascript">
           function show(pic)
           {
            document.getElementById(pic).style.display = "block";
           }

           function kill(pic)
           {
            document.getElementById(pic).style.display = "none";
           }
   </script>

   <style type="text/css">
   .imagebox {
             height: 200px;
             width: 200px;
             position: absolute;
             margin-left:30px;
             margin-top:30px;
             background-color:039BC1;
             border: 1px solid black;
             z-index:2;
             }

   .linkbox {
            position:absolute;
            z-index:1;
            }
   </style>

</head>

<body>
<div class="linkbox">
         <a href="#" onMouseOver="show('test1.jpg')" onMouseOut="kill('test1.jpg')">test1</a>
         <div id="test1.jpg" style="display:none;" class="imagebox">test1 - hier kann auch ein Bild stehen</div>
         <br>
         <a href="#" onMouseOver="show('test2.jpg')" onMouseOut="kill('test2.jpg')">test2</a>
         <div id="test2.jpg" style="display:none;" class="imagebox">test2 - hier kann auch ein Bild stehen</div>
</div>
</body>
</html>

Erklärung: In ".imagebox" wird der Style des Popups festgelegt - die margins sind dabei wichtig um die Position zu bestimmen. Der Z-Index regelt das sich die Reihenfolge.

Zum JS: show() bekommt als parameter das anzuzeigende Bild (kann natürlich auch anders gemacht werden, aber so kann man sich zum Beispiel extrem leicht eine Galiery mit PHP erzeugen lassen), was geichzeitig auch die ID des Layers ist. Der Rest sollet sich selbst erklären...


ciao

 

[bruderherz]

ne, das ists ganz bestimmt nicht

warte ich such mal nbisschen.

edit: ach ist wohl nicht mehr nötig^^