1.2k Aufrufe
Gefragt in Bildbearbeitung von
weiss jemand wie das funktioniert? habe schon viele tips aus dem internet probiert,
aber negativ. hier mal der link zu dem foto:
http://www.stylished.de/models-berlin/model-beatrice-68895.html

bedanke mich schon jetzt für die hilfe

christina

6 Antworten

0 Punkte
Beantwortet von
Das ist so gewollt.
1x1
0 Punkte
Beantwortet von friedel Experte (3.3k Punkte)
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.
0 Punkte
Beantwortet von friedel Experte (3.3k Punkte)
Um das ganze aus zu heben, gibt es mehrere Möglichkeiten.

Du kannst dir natürlich den Quellcode ansehen. Dort findest du mit einiger Mühe natürlich das Bild:
<img src="/photos/5/9/68895/a2e768c0b1f3f9f4.jpg">
Das ist eine relative Pfadangabe, die sich hier auf die Domain bezieht. Die Domain der Website ist ja http://www.stylished.de/models-berlin/model-beatrice-68895.html. Das Bild findet sich also auf http://www.stylished.de/photos/5/9/68895/a2e768c0b1f3f9f4.jpg. Das ist allerdings recht zeitaufwendig und verlangt ein paar Kenntnisse in Html und Css. Um das ist kurzer Zeit machen zu können, braucht man viel Erfahrung und am besten ein paar Tools.

Sehr viel einfacher geht es z.B. mit dem Firefox und dem (auch für viele andere Sachen sehr praktischen Addon QuickJava. Zusätzlich sollte man dann noch das "Addon The Addon Bar" istallieren. Das ergänzt eine Leiste mit verschiedenen Buttons von Addons. Dann braucht man nicht für jedes Addon eine eigene Leiste, wenn man die ganzen Buttons in diese Leiste macht. Wenn man also in diese Addon-Bar die Buttons von QuickJava macht, hat man 8 Buttons, mit denen man auf Knopfdruck jederzeit und einzeln Javascript, Java, Flash, Silverlight, Cookies, Bilderanzeige, animierte Bilder und CSS deaktivieren oder aktivieren kann. Nebenbei erhöht dieses Addon die Sicherheit und Performance des Rechners und Browsers gewaltig, denn man kann z.B. Flash und Java immer deaktiviert lassen und nur bei Bedarf mit einem Klick aktivieren. Wenn du CSS deaktivierst, wird die Srite ohne alle Formatierungen angezeigt. Es werden also alle Elemente der Seite untereinander in Originalgröße dargestellt. Positionierungen, Abstände, Größeneinstellungen usw werden nicht mehr berücksichtigt. Die beiden Bilder verdecken sich jetzt also nicht mehr. Du kannst jetzt auch das vorher verdeckte Bild einfach kopieren.
0 Punkte
Beantwortet von
Du könntest auch einfach einen Screenshot machen ...
0 Punkte
Beantwortet von massaraksch Experte (3.1k Punkte)
Hi,

auf dieser Seite geht das mit dem Firefox z.b. auch so:

Rechtsklick irgendwo auf der Seite (z.B. neben dem vergößerten Bild) und "Seiteninformationen anzeigen".

Dort auf "Medien" gehen und z.B. nach Größe sortieren... Da findest du große Grafiken einfacher. Dann speichern unter... ;o)

Zusatz:

Mit Firefox sowie IE könnte man die URL des Bildes schnell herausfinden, indem man Rechtsklick auf das Bild macht und "Element untersuchen" wählt. Dann hat man im "Inspektor" bzw. "DOM Explorer" den Quelltext an der richtigen Stelle vor sich und kann sich die Bildadresse kopieren. Man erhält dort auch andere interessante Einblicke.

mfg, Massaraksch
0 Punkte
Beantwortet von massaraksch Experte (3.1k Punkte)
Nachtrag:

Man kann direkt auf das Bild Rechtsklick machen und "Grafik-Info anzeigen" wählen. Dann kommt man auch sofort in die Medienliste. Es ist zwar das 1-Pixel-Bild ausgewählt, aber das Original sieht man dann schon...

mfg, Massaraksch
...