Hallo,
fehlt noch die Antwort auf deine Frage nach dem "wie geht das?". Dazu muss ich zuerst mal erklären, warum es bei dir nicht geklappt hat.
Ich teile das ganze in 2 Beiträge auf. Im ersten erkläre ich, wie das ganze funktioniert, im zweiten, wie du es aushebeln kannst.
In der Website ist folgender Quellcode:
<div id="photozoom-image-canvas">
<img style="width: 800px; height: 533px;" id="photozoom-image-container" src="/photos/5/9/68895/a2e768c0b1f3f9f4.jpg">
<img style="width: 800px; height: 533px;" id="photozoom-image-copyprevention" src="/images/blank.gif">
</div>
(Ich habe das absichtlich als Zitat und nicht als Code eingefügt, weil die Zeile sehr lang sind. Das Design dieser Supportnet-Seite wurde sonst an diese langen Zeilen angepasst und du müsstest auf der ganzen Seite beim Lesen in jeder Zeile waagerecht scrollen.
Noch mal das gleiche ohne Style-Angaben:
<div>
<img src="/photos/5/9/68895/a2e768c0b1f3f9f4.jpg">
<img src="/images/blank.gif">
</div>
<div></div> ist eine Art Behälter. Das ist ein rechteckiger Bereich, den man mit Inhalten füllen kann. Du kannst es mit einem Textabsatz vergleichen, nur kann man da eben nicht nur Text rein machen. Alles, was in dem Behälter sein soll, steht zwischen <div> und </div>.
<img> ist ein Bild, und src ist die Eigenschaft von diesem Bild, in dem die Adresse des Bildes steht.
In dem Behälter sind also
2 Bilder!
Mit style="width: 800px; height: 533px;" wird festgelegt, dass ein Bild 800px breit und 522px hoch dargestellt werden soll. px steht dabei für Pixel. Diese Darstellungsgröße hat nichts mit der eigentlichen Größe des Bildes zu tun, wie sie in der Bilddatei ist. Das Bild wird so vergrößert oder verkleinert und verzerrt, dass es eben 800px*522px dargestellt werden kann.
Außerdem haben der Behälter und beide Bilder jeweils eine Eigenschaft, die sich id nennt. Über diese Eigenschaft kann man in weitere Formatierungen vorgeben. Und das wurde auch hier gemacht:
#photozoom-image-canvas { position:relative; }
#photozoom-image-copyprevention {
position:absolute;
top:0;
left:0;
cursor:pointer;
}
#photozoom-image-container {
text-align:center;
background-repeat:no-repeat;
cursor:pointer;
}
B
Das Rautezeichen (#) bedeutet, dass es um eine Id geht. Dahinter steht der Wert der id des Elements, das formatiert werden soll. Und hinter diesem Wert steht eine geschweifte Klammer, in der die Formatierungsangaben stehen.
Der oberste Teil, der mit #photozoom-image-canvas anfängt, betrifft also den Behälter. Der unterste Teil mit #photozoom-image-container betrifft das erste Bild. Der mittlere Teil mit #photozoom-image-copyprevention betrifft das zweite Bild.
Dem Behälter wird also die Formatierung position:relative; gegeben. Das sorgt einfach nur dafür, dass dieser Container als Bezugselement für die Positionierung des Inhalts verwendet wird. Wenn ein Element in diesem Behälter also die Position top:0; left:0; bekommt, ist es oben links
in diesem Behälter. Wenn der Behälter diese Formatierung nicht hätte, wäre das Element oben links im nächsten umgebenden Bezugselement. Wahrscheinlich wäre das das Browserfenster. Das Element wäre dann also links oben im Browserfenster.
Die Formatierungsangaben im ersten Bild sind nicht relevant. Nur die letzte Einstellung (cursor:pointer;) hat überhaupt etwas mit mit dem Bild zu tun. Die sorgt dafür, dass sich der Mauszeiger verändert, wenn die Maus über dem Bild ist.
Das untere Bild hat die Eigenschaften
position:absolute;
top:0;
left:0;
cursor:pointer;
}
position:absolute; sorgt dafür, dass dieses zweite Bild ohne Rücksicht auf andere Elemente positioniert wird. Es wird also so positioniert, wie wenn das erste Bild gar nicht da wäre.
top:0; left:0; ordnet das zweite Bild links oben im Bezugselement, also im umgebenden Behälter, an.
Das ganze sorgt also dafür, dass da 2 Bilder übereinander sind, bei denen das zweite das erste vollständig verdeckt. Das untere ist das Bild, das du sehen kannst und gerne kopieren willst. Das zweite, das das erste verdeckt, ist ein transparentes Gif, das eigentlich nur 1*1 Pixel groß ist und so vergrößert und verzerrt dargestellt wird, dass es genau die Abmessungen des hinteren Bildes hat.
