HTML Bild in Bild

Question

hi

ich will zwei Bilder auf meine Hopmepage haben.

Bild1 480px x 480px
Bild2 10px x 10px

nun möchte ich das Bild2 an einem ganzbestimmten ort in Bild1 ist z.B von oben 200px und von links 366px wie kann ich das machen?
bis jetzt hab ich das mit divs und tabllen aus probiert. ab wenn ich das dann mal mühsam hingefummel habe zeigt er das nur bei fier fox richtig an und im alten inetExplorer nicht.

Answer 1

du brauchst die CSS-Eigenschaften position, top und left

Answer 2

ok dank für dei schnelle hilfe

Answer 3

"z-index" nicht zu vergessen, damit das kleine Bild auch "vor" dem großen angezeigt wird.

Answer 4

Du solltest das ganze in einem Container machen, z.B. in einem Div. Diesem Div gibst du die Eigenschaft position:relative;, damit die enthaltenen Elemente an diesem Element ausgerichtet werden. In dieses Div kannst du dann mit <img src="bild1.gif" style=position:absolute; top:0; left:0; z-index:1; width:480px; height:480px;"> das erste Bild einbauen. Das 2. Biild baust du dann entsprechend mit <img src="bild2.gif" style=position:absolute; top:200px; left:366px; z-index:2; width:10px; height:10px;"> ein.

Answer 5

@Friedel & Supermax & derjenige, der A3 als gute Antwort bewertet hat (ist das hier Ausdruck einer Fangemeinde?):
die z-index-Angabe ist überflüssig, wenn das 2te Bild vor dem 1ten liegen soll.

Im Quelltext später notierte Elemente überdecken vorhergehende.

(siehe
SelfHTML z.index)

Answer 6

Schau mal hier für Beispielcode, die Transparenz-Sachen kannste ja
einfach weglassen :)


web.html">http://www.grafik-blog.de/140-halbtransparenz-im-
web.html