orezanie obrazku <img>

Leda tak, že by si to dělal přes div a přes background to by šlo aspoň myslim.
Přes img nevim

Není to možné. Prochy správně nastínil možné řešení.

Přes JavaScript to jde určitě, bez něj ne.

elfi:
„Leda tak, že by si to dělal přes div a přes background to by šlo aspoň myslim.“
DIV je blokový, zalamuje řádek, což je sice možné řešit třeba floatem. CSS vlastnost inline-block nemá 100% podporu v prohlížečích, ale jde to obejít.
Nejjednodušší bude použít obrázek na pozadí průhledného 1px GIFu roztaženého HTML atributy "width" a "height na požadovaný rozměr. Dokonce si pak můžeš vybrat, kterou oblast obrázků chceš zobrazovat.

Napadá mě ještě pár krkolomných řešení, uvádím jen nástin bez podrobností:
HTML: obrázek v IFRAME
CSS: overflow, crop

joe:
„Přes JavaScript to jde určitě, bez něj ne.“
Ani JavaScriptem, ani přes JavaScript to nepůjde.

margin:
„Nejjednodušší bude“
To skutečně nebude. Spíš je to pěkná prasárna. Ten nejjednodušší způsob nastínil už Prochy. elfimu řešení zbytečně nekomplikuj.

„Dokonce si pak můžeš vybrat, kterou oblast obrázků chceš zobrazovat.“
Tak to v případě background pochopitelně také.

elfi:
Máš minimálně tyto tři možnosti jak to udělat:

1. Přes CSS - background a pozicované pozadí (napsal Prochy)

2. Přes JavaScript, jak jsem napsal já a margin nesmyslně a bezdůvodně vyvrátil, ale bylo by to složitější.

3. Asi nejlepší a nejpoužitelnější způsob ze zde uvedených je takový:



EDIT: opraveno, možná to jde udělat i nějak komplexněji bez nutnosti počítání.

Problém je, že to půjde jen tam, kde je jako pozadí barva.

margin:
Vím co píšu, nemusíš mě opravovat. A když píšu, že to jde přes JavaScript, tak tím myslím, že to přes JavaScript opravdu půjde. Máš nějaký důvod, aby to nešlo?

joe:
„JavaScript (zpravidla) neumí nic, co by neumělo HTML/CSS. (Nepočítám-li <canvas>, který by vlastně v tomto případě mohl pomoct, ale také jen ve zlomku prohlížečů.)“
Zdroj: Chamurappi: http://diskuse.jakpsatweb.cz/?action=vthread&forum=4&topic=106004#5

„Máš nějaký důvod, aby to nešlo?“
Jak se jmenuje JS metoda pro manipulaci s obrázkem? Nebo znáš jiný způsob?

Ale tvoje řešení (uvedené jako nejlepší), joe, dělá něco jiného. V podstatě jen zakryje určitou část obrázku, cílem ale je vložit jen tu jeho chtěnou část. Co se týče JS, tak ten by se dal použít maximálně tak k nahrazení toho <img> obrázkovým <div>em.

Str4wberry:
„Ale tvoje řešení (uvedené jako nejlepší), joe, dělá něco jiného“
Moje řešení dělá přesně to, co je potřeba - viz požadavek od elfiho:
„ale aby sa zobrazil len vysek obrazku s danymi rozmermi.“

Navíc cropnutí obrázku ne vždy znamená změnit ho na trvalo. Jde jen o možnost, jak zobrazit část z obrázku a přitom ho nezničit.

Cílem je zobrazit část obrázku návštěvníkovi a to možné je (jak jsem uvedl příklad).
Možný HTML kód pro následnou úpravu JS by mohl vypadat následovně:




margin:
Asi jsi moc nepochopil smysl toho, co Chamurappi myslel, v JavaScriptu sice neexistuje přímo metoda na oříznutí obrázku, to ale neznamená, že si ji nemůžu sám dotvořit a nějak napodobit. Nebo ty snad používáš jen to, co existuje a už někdo vymyslel? Nemáš svůj vlastní nápad jak problém řešit?

Možný HTML kód pro následnou úpravu JS by mohl vypadat následovně:
<img src="example.jpg" width="100" height="100" class="crop-5-10-5-10">
Takže nakonec z toho vyleze nastavení stylu skriptem. Nebo to bude opravdu něco, co bez JS nejde?

margin:
Proč se pořád chytáš toho, co jsem napsal? I to co je v odpovědi #3 platí, záleží na pohodlnosti, jak by to chtěl kdo udělat, někdo si to třeba spočítá, jiný na to využije skript, který to udělá za něj a obalí to do divů jak je potřeba... nechápu co se ti na tom pořád nelíbí.

To samé bych mohl citovat já, například:

„Ani JavaScriptem, ani přes JavaScript to nepůjde.“

Tady vidíš, že to jde jak s JS, tak bez něj. Při psaní odpovědi #3 jsem uvažoval komplexní řešení a narozdíl od tvého řešení je mé řešení použitelné a tak, jakby mělo být, i přes to, že ve skutečnosti se načítá víc než jen zobrazovaná oblast.

Reaguji na joa:
„v JavaScriptu sice neexistuje přímo metoda na oříznutí obrázku, to ale neznamená, že si ji nemůžu sám dotvořit a nějak napodobit“
Můžeš nanejvýš změnit CSS nebo HTML. JavaScript ořezávat neumí (nepočítám-li <canvas>). Kolega margin mě pochopil správně, v příspěvku [#4] jsi podpořil častou scestnou představu, že JS dokáže s grafikou nějaké (statické) zázraky, které jsou bez něj nemožné.


Reaguji na margina:
„CSS: overflow, crop“
Spíše clip.

joe: „Moje řešení dělá přesně to, co je potřeba - viz požadavek od elfiho:“

Ale ten obrázek bude na stránce zabírat původní místo, jen nebude celý vidět, nepletu-li se, což nemusí být žádoucí.

Str4wberry:
Teď ano, ale dá se to změnit nastavením display na inline-block a overflow na hidden. Případně jinak nastylovat. A rozhodně je to spolehlivější řešení

Chamurappi:
Na začátek bych upřesnil, že JavaScript samozřejmě dokáže víc než pouhé HTML (http://diskuse.jakpsatweb.cz/?action=vthread&forum=4&topic=106004#5), zřejmě jsi to myslel v kontextu, ale aby si to někdo nevysvětloval jinak), tak jednoduché vyvrácení - dokáže HTML pracovat s cookies? Jde v HTML zjišťovat adresu z adresního řádku? Nebo například můžeš vyhazovat chybové hlášení? (spíše otázky pro margina)

A teď k tomu, co jsi napsal v [#14]
Uvedl jsem příklad, který ti ořeže obrázek v HTML a ty napíšeš, že JavaScript ořezávat neumí :-) Samozřejmě, že neexistuje nic jako crop('example.jpg', 10,10,10,10);, však to ale neznamená, že nemůžu obrázek zakrýt divama a zobrazit jen tu část, kterou chci (například). Což je v podstatě také ořez. (Návštěvníkovi je jedno, jestli načtu celý obrázek, ten ořežu způsobem, o kterým tady píšu a nebo mu rovnou předhodím skutečně oříznutý obrázek. V obou případech může dostat stejný výsledek)

Teď jsem si všíml, že ve svém příspěvku ([#13]) jsem se odkazoval na [#3], správně má být [#4], kterou jsem uvažoval komplexní řešení nad všemi obrázky v dokumentu.

A jak jsem psal, oříznutí obrázku nemusí vždy znamenat jeho destrukci (skutečný ořez), ale jen zobrazení uživateli. Navíc pouhé zobrazení části z obrázku na stránce může mít i své výhody, než načtení skutečně oříznutého obrázku.

Reaguji na joa:
„zřejmě jsi to myslel v kontextu,“
V kontextu statických vizuálních efektů.

„dokáže HTML pracovat s cookies?“
Cookies jsou zase stoprocentně v režii HTTP protokolu, JS s nimi nedokáže udělat nic, co by neumělo HTTP.

„však to ale neznamená, že nemůžu obrázek zakrýt divama a zobrazit jen tu část, kterou chci (například)“
JS umí pracovat s těmi <div>y, ale neumí ořezávat (nepočítám-li <canvas>). Když by se někdo zeptal, jak udělat červený nadpis, odpověděl bys mu také, že to umí JavaScript? Do čehokoliv jde zamíchat JS, záleží na tom, zda je v postupu klíčovou (a nezbytnou) přísadou.

„Uvedl jsem příklad, který ti ořeže obrázek v HTML a ty napíšeš […]“
HTML také neumí ořezávat.

„pouhé zobrazení části z obrázku na stránce může mít i své výhody“
Může mít, nicméně to nemá žádný dopad na schopnosti jazyka.

Chamurappi:
Ale... ořezávat umí i CSS - overflow je svým způsobem ořez a je možné ho na to použít. Tzn. že přidávám další metodu, jak oříznout obrázek :-)

„Cookies jsou zase stoprocentně v režii HTTP protokolu, JS s nimi nedokáže udělat nic, co by neumělo HTTP.“
To je jedno, podstatné je, že JS dokáže víc než jen HTML, což jsem tím vyvrátil.

Reaguji na joa:
Zásah do cookies je interaktivní změna, nikoliv statický vizuální efekt (o čemž je řeč tady i ve vlákně, z něhož citace pochází). Vyvrátil jsi větu vytrženou z obou kontextů. Nevím, jestli tohle je opravdu podstatné…

„přidávám další metodu, jak oříznout obrázek“
Ta už tu byla zmíněna.

Chamurappi:
„Ta už tu byla zmíněna.“
<del>A přesto jsi psal, že to nejde. No vidíš to.</del> Jinak myslím, že autor svou odpověď dostal, a přes to, že oba máme jiné názory, ukončeme to... nikam to nevede.

Reaguji na joe:
„A přesto jsi psal, že to nejde. No vidíš to.“
Nevidím :-)
Kde jsem to psal?

Pravda, nepsal :-) upraveno. Promiň.