Temat: maskowanie krawedzi obrazkow
Niedawno miałem podobny problem i tam rozwiązałem go sobie po stronie serwera. U mnie było o tyle łatwiej, że chciałem zrobić jedynie zokrąglane rogi w wyświetlanych obrazkach prezentowanej oferty.
Wystawiona oferta ma od 1 do 3 obrazków rożnej wysokości (szerokość na szczęście ta sama ale to akurat nie problem.).
Rozwiązałem to dość prosto i działa pod każdą przeglądarką i z użyciem png-24 na rogach co daje mi pożądaną półprzeźroczystość (testowane pod IE 8).
Na początek narysowałem sobie te cztery zaokrąglone rogi, dałem je jako tło DIVów spozycjonowanych absolutnie i umieściłem je w kontenerze spozycjonowanym relatywnie.
CSS ostatecznie dla tych elementów wygląda tak:
#details_bdy_right {float: right; display: inline; margin: 7px 22px 0 0; position: relative;}
#left_top {background: url(../img/left_top.png) no-repeat; position: absolute; top: 0px; right: 296px; width: 4px; height: 4px; z-index: 10;}
#right_top {background: url(../img/right_top.png) no-repeat; position: absolute; top: 0px; right: 0px; width: 4px; height: 4px; z-index: 10;}
#right_bottom_1 {background: url(../img/right_bottom.png) no-repeat; position: absolute; right: 0px; width: 4px; height: 4px; z-index: 10;}
#left_bottom_1 {background: url(../img/left_bottom.png) no-repeat; position: absolute; right: 296px; width: 4px; height: 4px; z-index: 10;}
#right_bottom_2 {background: url(../img/right_bottom.png) no-repeat; position: absolute; right: 0px; width: 4px; height: 4px; z-index: 10;}
#left_bottom_2 {background: url(../img/left_bottom.png) no-repeat; position: absolute; right: 296px; width: 4px; height: 4px; z-index: 10;}
#right_bottom_3 {background: url(../img/right_bottom.png) no-repeat; position: absolute; right: 0px; width: 4px; height: 4px; z-index: 10;}
#left_bottom_3 {background: url(../img/left_bottom.png) no-repeat; position: absolute; right: 296px; width: 4px; height: 4px; z-index: 10;}
Gdzie
#details_bdy_right jest naszym relatywnym kontenerem.
Takie rozwiązanie umożliwiło mi pozycjonowanie absolutne dla rogów względem początku kontenera a nie początku strony. Przy pozycjonowaniu narożników względem początku strony trzeba by jeszcze wcześniej rozpoznawać rozdzielczość i przeliczać właściwą pozycję. Jeśli dorzucimy do tego jeszcze rożną interpretację paddingów dla IE i reszty przeglądarek sprawa byłaby nieco bardziej skomplikowana, a tak to mamy to dość prosto rozwiązane.
Mając takiego CSSa reszta jest już dość prosta.
W HTMLu umieszczam te DIVy narożnikowe w kontenerze (jest ich tak dużo bo mogą być trzy obrazki do każdej oferty i niestety każde zdjęcie może mieć inną wysokość.
HTML
<div id='details_bdy_right'>
<div id='left_top'></div>
<div id='right_top'></div>
<div id='right_bottom_1' style='top: <?=($round1_width-4)?>px'></div>
<div id='left_bottom_1' style='top: <?=($round1_width-4)?>px'></div>
<div id='right_bottom_2' style='top: <?=($round2_width-4)?>px; display: none'></div>
<div id='left_bottom_2' style='top: <?=($round2_width-4)?>px; display: none'></div>
<div id='right_bottom_3' style='top: <?=($round3_width-4)?>px; display: none'></div>
<div id='left_bottom_3' style='top: <?=($round3_width-4)?>px; display: none'></div>
</div>
Jak widzisz lewy górny róg i prawy górny róg są zawsze na tej samej pozycji co mi nieco ułatwiło sprawę.
Na koniec (a w zasadzie na samym początku na wejściu na stronę z produktem) serwer jak ładuje obrazki sprawdza mi ich wysokość nadając odpowiednią wartość dla każdego z
style='top: xxx'
PHP
$info1 = getimagesize("img/oferta/$obrazek1");
$round1_width = $info1[1]; // wysokość zaokrąglenia rogów miezona od góry
$info2 = getimagesize("img/oferta/$obrazek2");
$round2_width = $info2[1]; // wysokość zaokrąglenia rogów miezona od góry
$info3 = getimagesize("img/oferta/$obrazek3");
$round3_width = $info3[1]; // wysokość zaokrąglenia rogów miezona od góry
Gdzie zmienne
$obrazek to nazwy obrazków z bazy.
I wuala. Działanie możesz zobaczyć przykładowo
tutaj.
Tylko patrz na rogi obrazków :)
пропозиції роботи
