[CSS] plaatje over plaatje

[BKJ]

Ik ben bezig met een CMS voor een hotel. Nu kunnen de mensen een plaatje uploaden. Die staat dan op de website met een klein pijltje in de linkeronderhoek zodat bezoekers weten dat als je er op klikt dat er dan een vergroting komt.

Voorbeeld:




Nu weten de mensen die de site beheren geen klap van PS oid. Kan ik niet mbv van CSS (of iets anders?) die twee plaatjes over elkaar heen leggen? Ik heb ook de beschikking over GD icm PHP.

[We Are Borg]

Je kan toch een plaatje met een hogere z-index over het orginele plaatje gooien ?

[crisp]

HTML:

<div style="position:relative">
  <img src="uploaded_plaatje.gif" alt="" />
  <img src="pijltje.gif" alt="" style="position:absolute;left:0px;bottom:0px" />
</div>

[Genoil]

als je de foto absoluut positioneert, kun je zoals We Are borgt zegt dat pijltje ook abs. positioneren met een hogere z-index. fraaie html levert dat niet op, want je mag geen <img> in een <img> nesten. Moet het plaatje gewoon in de standaard HTML flow (dus niet abs. gepositioneerd), dan zul je daarom iets anders moeten doen. Ik heb ooit een volgende constrcutie gemaakt. ook niet superfraai, maar werkt goed:

HTML:

<div style="background:url(hotel.jpg)" onclick="...">
    [img]"pijltje.gif"[/img]
</div>

Cascading Stylesheet:

img.zoom {
    position:relative;
    left:0px;
    bottom:0px;
}

edit:
ja, da's fraaier crisp...:)

[ Voor 12% gewijzigd door Genoil op 13-10-2004 19:03 ]

[BKJ]

crisp schreef op 13 oktober 2004 @ 18:56:

HTML:

<div style="position:relative">
  [img]"uploaded_plaatje.gif"[/img]
  [img]"pijltje.gif"[/img]
</div>

netjes...tnx...het moet wel absolute zijn ipv relative...