[CSS] Image over Image

[Ruffian]

Voor een webshop zijn we bezig om een functie te maken voor image over image.
Via position kan je dit makkelijk opzetten alleen zit ik dan met het probleem dat ik ook de positie door moet geven.
Op een pagina komt dynamisch een plaatje uit een grote database (XML), nu kan ik dus niet makkelijk een plaatje photoshoppen met de "overlay"
Wil ik het via position doen en laten we zeggen dat ik 40 plaatjes moet laten zien zit ik met 40 verschillende classes.

Nu dacht ik, je kan ook de "hoofdfoto" als background maken en de overlay er overheen plaatsen, alleen moet de "hoofdfoto" wel een vast formaat hebben.En dit is dus niet het geval. De hoofdfoto moet hardcoded geresized worden (dit is niet schrikbarend veel)

Hopelijk is het te snappen, iemand een suggestie?

[Rekcor]

Voor een webshop zijn we bezig om een functie te maken voor image over image.

Een functie waarin, in Javascript?

Via position kan je dit makkelijk opzetten alleen zit ik dan met het probleem dat ik ook de positie door moet geven.

Waarom is dit een probleem? Dat kun je toch gewoon doen met de 'style'-attribute van je img?

[ Voor 22% gewijzigd door Rekcor op 20-05-2010 15:41 . Reden: toevoeging ]

[martin149]

je geeft een posite en een oplopende z-index door, dan zou het toch door over elkaar moeten gaan, lijkt me niet moeilijk

[Tharulerz]

Zoals het nu lijkt gaan jullie een soort van watermark toevoegen oid?

Eventueel kan je eens kijken naar imagemagick (een CLI voor linux), waar je via de command line afbeeldingen kan converten, resizen, en nog veel meer dingen (zoals bijv een watermark toevoegen).

Alleen moet je dan wel die niet on the fly gaan converteren, maar ook een gewatermarkete versie opslaan...

[Dennahz]

Een watermerk met javascript? Oei, dat is niet erg veilig he?

Ik heb zelf een applicatie ontwikkeld waarbij er on the fly door PHP een watermerk op een foto gezet wordt (afhankelijk van de gebruiker). Als het niet bedoelt is als watermerk heb ik niks gezegd

[Joolee]

Let er wel op dat als je afbeeldingen over elkaar heen gaat plaatsen het voor de gebruiker niet eenvoudig is een plaatje via msn door te sturen bijv.

[UltimateB]

Kijk eens naar phpthumb: http://phpthumb.sourceforge.net/ brilliant stukje php met caching

[Ruffian]

Er gaat een "prijssticker" over het plaatje dus niet echt een watermerk, maar aan zoiets heb ik dus helemaal niet gedacht.
Ik ga ermee aan de slag. Tnx

[geert1]

Als we een voorbeeld zouden kunnen zien, kunnen we er beter over oordelen. Ik maak uit je verhaal tot nu toe op dat je telkens één foto hebt, waar je één andere afbeelding (prijssticker) overheen wilt leggen. Je kunt dit inderdaad met php doen en de beide afbeeldingen samenvoegen tot één afbeelding. Maar dit is niet de enige manier. Je kunt het namelijk ook gewoon met html/css doen:

Je plaatst de img-tag in een container, bijvoorbeeld een div. Die div geef je position: relative. Vervolgens plaats je onder de img-tag een tweede img-tag voor de "prijssticker", en je geeft deze tweede image een class (bijvoorbeeld "prijssticker"). Ten slotte positioneer je de prijssticker-img met position: absolute + left/right + top/bottom, en je bent klaar. Dan zou de HTML er ongeveer zo uit kunnen zien:

HTML:

<div class="imagebox">
  <img src="/pad-naar-de-foto.jpg" alt="Titel van het product" />
  <img class="prijssticker" src="/prijssticker-afbeelding.jpg" alt="Prijs" />
</div>

en de CSS:

Cascading Stylesheet:

.imagebox {
  position: relative;
  /* hier eventueel ook vaste breedte of float opgeven */
}

.imagebox .prijssticker {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

Als ik het verkeerd begrepen heb, dan excuus

[ Voor 7% gewijzigd door geert1 op 22-05-2010 16:12 ]

[Ruffian]

Geert1 je hebt het niet verkeerd begrepen, dit was ook mijn eerste idee om het zo te doen.
Het nadeel is echt dat we 2 prijsstickers hebben en een 40-tal foto's.
Dat komt dus neer op 40 classen wat erg veel is, we hebben het nu via een "watermerk" techniek gedaan.

[Verwijderd]

Als de pagina bijvoorbeeld met PHP wordt opgebouwd en de artikelen(+foto's) uit een database komen, wat is dan het probleem om de oplossing van geert1 te implementeren? Dit is ook qua code de meest toegankelijke optie, je zult bij een aangepaste prijs niet al je foto's opnieuw hoeven te genereren, wat je met een watermerk in het bestand zelf wel zult moeten doen.

Gebruik server side image editing vooral voor schalen en het toevoegen van watermerken. Waar je informatie wilt toevoegen aan een afbeelding, zoals een overlay voor een prijs, dan kun je dat beter via de HTML en CSS oplossen. Op deze manier (mits je met overeenkomstige alt-attributen werkt in je code) is dit soort tekstuele informatie ook leesbaar voor bezoekers die je site bezoeken met een browser die geen afbeeldingen weergeeft op een scherm.

[geert1]

Nog beter zou natuurlijk zijn om de prijssticker niet als afbeelding op te nemen, maar als actieve tekst (het bedrag dus) met een achtergrond + wat styling. Dan is het nog gemakkelijk aan te passen, sneller om te laden en nog beter te lezen.

En @Rufian: Ik snap niet waar jij 40 "classes" voor nodig hebt. Ik neem aan dat je css-classes bedoelt, maar in principe zou je telkens dezelfde HTML kunnen gebruiken, met een extern CSS-bestand die er telkens dezelfde vormgeving op toepast. Als je de pagina zelf dan door PHP laat uitspugen, hoef je de HTML ook maar één keer uit te tikken en heb je zomaar die pagina's in elkaar. Maar soms moet je ook werken met de manier die je zelf het beste ligt of met de beperkingen die de data je oplegt. Dus in elk geval succes verder.