Bild preload bei onmouseover ?

T

Trash

Erfahrenes Mitglied
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
 
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 ;) )
 
Original geschrieben von bruderherz
dhtml (was eigentlich nichts anderes ist, als javascript in ner höheren version ;) )
Zum Vergrößern anklicken....

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
 
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
Zum Vergrößern anklicken....

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? :)
 
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?^^
Zum Vergrößern anklicken....
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 :)
Zum Vergrößern anklicken....
Ok - von mir aus ;)


was soll das tim eigentlich pater? :)
Zum Vergrößern anklicken....

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
 
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
Zum Vergrößern anklicken....

ü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 :)
 
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 :p danke
 
Zuletzt bearbeitet:
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?^^
Zum Vergrößern anklicken....

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...

PHP: 
<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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück