Oldal: 1 / 3 123 UtolsóUtolsó
Eredmény: 1 - 10 (22) összesen

Téma: CSS sprite megoldás hír képekkel

  1. #1
    Bölcs
    Csatlakozott
    12-08-31
    Hozzászólás
    1.032
    Begyűjtött 351 köszönetet
    239 hozzászólásával

    Alapbeállítás CSS sprite megoldás hír képekkel

    Sziasztok!

    Lefejlesztettem a CMS rendszeremben egy olyan szolgáltatást, mely egy hír lista oldalon a thumbnail képeket egy sprite-ba gyúrja, majd beteszi a cache fileba. A cache betöltésekor pedig ugye már nem azt az x képet tölti be, hanem egyetlen egyet, amit css-el pozicionálok. A CSS is külső fileba megy, automatán generálja.

    A cél az volt, hogy, ahol baromi sok képet kellene betölteni ne lassítsam a betöltést azzal, hogy a sok képet egyesével rántsa be, hanem erre egyidejüleg csak 1 http hívást használjon és a többi szálon pedig tölthessen bármit. Természetesen erre lehetne használni aldomaint cloudot, lemingeket a háttérben. Üzemeltetés szempontjából ez a legolcsóbb és legkönnyebben elérhető megoldás bárki számára, emellé pedig a kép mérete is jóval kisebb.

    A script tökéletesen működik. Ellenben egy nagy dilemmám még is van vele és ebben kérem a véleményeteket.

    Eddig ugye úgy nézett ki ez a lista, hogy az "img" tag köré volt téve a link. De most nem fog képet betölteni, hanem magának az "a" tagnek lesz a kép a háttere. Gondolom nem jó megoldás, ha a link tag közé nem teszek szöveget. Ha meg teszek és elrejtem, bármilyen technikával is, az mennyire lesz veszélyes? 2 szempont miatt kérdezem:

    1.) Lenne mondjuk oldalanként 20-50 cím ismétlésem, ugyan azzal a linkkel.
    2.) Nem tudom ennyi linknél mennyire díjazná a Google az eltűntetett link szövegeket. Title tag természetes lenne.

    Mi a véleményetek?



  2. #2
    Szerkesztő
    Csatlakozott
    11-11-28
    Hozzászólás
    241
    Begyűjtött 21 köszönetet
    21 hozzászólásával

    Alapbeállítás re: CSS sprite megoldás hír képekkel

    Az <a> tag inline element, ugyhogy annak hatteret adva az eredmeny nem lesz jo. Tegyel inkabb az <a> tag-en belul egy block elemet (pl. div), adj neki szelesseget es magassagot es ennek a div-nek tedd be a sprite-ot mint hatter. Igy szerintem menni fog.



  3. #3
    Bölcs
    Csatlakozott
    12-08-31
    Hozzászólás
    1.032
    Begyűjtött 351 köszönetet
    239 hozzászólásával

    Alapbeállítás re: CSS sprite megoldás hír képekkel

    a{display:inline-block;width:100%;height:auto;}

    Ezzel a probléma ezen része meg van oldva. Attól, hogy ez még bővítem egy teljesen fölösleges DOM elemmel, szövegem még mindig nem lesz benne és a kérdés ugyanúgy fennáll.

    A kérdés nem arra irányult, hogy meg tudom-e jeleníteni a képet, mert a válasz a fenti példával élve: igen.



  4. #4
    Hekker 0xFF logója
    Csatlakozott
    09-08-21
    Hozzászólás
    1.079
    Begyűjtött 168 köszönetet
    118 hozzászólásával

    Alapbeállítás re: CSS sprite megoldás hír képekkel

    Az <a> tagot szét tudod húzni pl paddingal.

    Szerintem a legjobb megoldás az lenne, hogy a képre tegyél nofollow-t vagy vezzesen egy sectionhoz.

    <h2><a href="belfold/hir-ize-mize.html>Ize mize hir</a><h2>
    <a href="belfold/hir-ize-mize.html#content"><div/img></a>

    Így van kulcsszavas linked és a fragment miatt a keresők figyelembe veszik mind a 2 linket.



  5. #5
    Bölcs
    Csatlakozott
    12-08-31
    Hozzászólás
    1.032
    Begyűjtött 351 köszönetet
    239 hozzászólásával

    Alapbeállítás re: CSS sprite megoldás hír képekkel

    Látom rosszul fogalmaztam akkor. Továbbra sem a megjelenítéssel van a problémám. A fennt írt 1 soros css kód tökéletesen működik, aki nem hiszi próbálja ki, ehhez nem kell padding, meg semmi. Nem a megjelenítéssel van a gondom.


    Eddig így nézett ki egy hír listázási kódja:
    <a href="#" title="#"><img src="#" alt="#" title="#" /></a>
    <a href="#" title="#"><h2>Cím</h2></a>

    Viszont a programom ilye kódot dobna ki a végén:
    <a href="#" title="#" id="article-(megflelő id)"></a>
    <a href="#" title="#"><h2>Cím</h2></a>

    VAGY

    <a href="#" title="#" id="article-(megflelő id)">Cím</a>
    <a href="#" title="#"><h2>Cím</h2></a>

    A kép megjelenítése a megfelelő módon, méretben, minőségben nem kérdés, mert az meg van oldva CSS-ből. Ergo a látogató mind a 3 esettel ugyan azt fogja látni, csak a Google nem. A kérdés, hogy az alsó 2 verzió közül melyiket lehet használni?

    Az id pedig össze van kötve egy generált css kóddal, amit fileba ír. PL:
    a{display:inline-block}
    #article-140x86-47{background:url('http://domainem.hu/images/sprites/article/1/1264e1266799d2aab7c4ee0c56b5119d.jpg') 0px 0px no-repeat;width:140px;height:86px}
    #article-140x86-46{background:url('http://domainem.hu/images/sprites/article/1/1264e1266799d2aab7c4ee0c56b5119d.jpg') -140px 0px no-repeat;width:140px;height:86px}


    Utoljára módosítva: Karessz által : 2013-11-22 18:38

  6. #6
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.784
    Begyűjtött 863 köszönetet
    659 hozzászólásával

    Alapbeállítás re: CSS sprite megoldás hír képekkel

    Én értem mire gondolsz, megoldásom cserébe nincs rá.

    Najó, két ötlet:
    Legyen egy blank imaged is, amie gy átlátszó kép, és ezt rakd be mint kattintható objektum. Tehát van a linked, aminek van háttere, azt megoldod/megoldottad már, és van egy másik kép, ami mondjuk elég nagy, hogy az összes link területét kitöltse és átlátszó. Miért jó ez? Mert akkor mindenhol tudod ezt az egy képet használni. A cache miatt pedig összesen egyszer töltődik le, nem lesz gond a sok http kérésből.

    Amúgy én azt is átgondolnám, hogy ne a link hátterének rakd be a képet, amit most használd, és ott csúsztasd, hogy a megfelelő része jelenjen meg, hanem inkább a linkeken belül egy img tag, ami is ezt a képet használja, csak src-ben adod meg neki, és úgy csúsztatod arrébb, hogy a megfelelő része jelenjen meg. így is csak egyszer töltődik be a böngésző cache miatt, elkerülve a sok http kérést (hisz miért töltené le ugyan azt a képet többször?).



  7. Az alábbi felhasználók hálásak a válaszért:

    Karessz (2013-11-23)

  8. #7
    Bölcs
    Csatlakozott
    12-08-31
    Hozzászólás
    1.032
    Begyűjtött 351 köszönetet
    239 hozzászólásával

    Alapbeállítás re: CSS sprite megoldás hír képekkel

    Az első megoldásod kifejezetten tetszik, főleg a jobb klikk letöltöm vandálok ellen

    A második megoldást csak félig értem. Azt mondod, hogy az img tag forrásának magát a sprite képet adjam meg és css-el pozítciónáljam a képet, mintha például egy div háttere lenne?

    Tehát:
    <a href="#" title="#"><img src="#" alt="#" title="#" id="article-(megflelő id)" /></a>

    #article-140x86-47{display:inline-block;background:url('http://domainem.hu/images/sprites/article/1/1264e1266799d2aab7c4ee0c56b5119d.jpg') 0px 0px no-repeat;width:140px;height:86px}

    Erre gondoltál?



  9. #8
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.784
    Begyűjtött 863 köszönetet
    659 hozzászólásával

    Alapbeállítás re: CSS sprite megoldás hír képekkel

    Igen, valami ilyesmi járt a fejemben. Azt nem tudom, hogy CSS-el arréb lehet-e szépen tolni a képet, de biztos van rá megoldás. Ellenben itt ugye nem az img háttere a sprite, hanem az img src-jében van benne, és én negatív paddinggel szórakoznék. Esetleg az img-t be lehet pakolni egy div-be, és lehet relative position-t adni neki, majd szépen tologatni. Így maga a sprite lesz kattitható objektum. Ha már a http kérések minimalizálására megyünk, akkor ne legyen +1 átlátszó blank kép, elég a sprite is.

    Találtam pár leírást hozzá:
    https://www.google.hu/search?q=img+tag+sprite



  10. Az alábbi felhasználók hálásak a válaszért:

    Karessz (2013-11-23)

  11. #9
    Bölcs
    Csatlakozott
    12-08-31
    Hozzászólás
    1.032
    Begyűjtött 351 köszönetet
    239 hozzászólásával

    Alapbeállítás re: CSS sprite megoldás hír képekkel

    A tökéletes megoldás végül itt volt számomra:
    Image Replacement technique and the sprite method

    Ezek szerint ezen már más is elgondolkodott Köszönöm a segítséget.

    Remélem ez amúgy nem fog visszafelé elsülni a Google szemében. Kiszámíthatatlan, mint egy menstruáló nő



  12. #10
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.784
    Begyűjtött 863 köszönetet
    659 hozzászólásával

    Alapbeállítás re: CSS sprite megoldás hír képekkel

    Én is ezt a linket találtam meg, de mivel a többi is elég hasonlóan jó, inkább a gyűjtőoldalt linkeltem.

    Nincs mit amúgy, bár én akkor is átgondolnám, hogy ne kép legyen a link, főleg ha menüről van szó.



Oldal: 1 / 3 123 UtolsóUtolsó

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •