Readme.ge Blog

FB image FB image

ფონის ფერის სრული ავტომატური გრადაცია ბროუზერებში

ავტორი: ალექსანდრე თარიღი: Sunday, April 12th, 2009

ვერ მოვიფიქრე უფრო კარგად როგორ დამეწერე ამ ყველაფრის სათაური, აქ არის განხილული და მოცემული ერთგვარი სოლუშენი თუ როგორ გავუკეთოთ ჩვენს HTML დოკუმენტს ფონად გრადაციული სურათი, რომელიც არ არის ფიქსირებული სიგრძის სურათი და შესაბამისად დოკუმენტის სიგრძის მიუხედავად იგი გრძელდება მის ბოლომდე.
ამისთვის უნდა მივყვეთ შემდეგ საფეხურებს –
ჯერ უნდა გავზომოთ დოკუმეტის სიგრძე, რომელიც გვინდა არ გვინდა უნდა გაიზომოს ჯავასკრიპტით  🙂 –

1
2
3
4
5
6
7
8
function getDocHeight() {
var d = document;
return Math.max(
Math.max(d.body.scrollHeight, d.documentElement.scrollHeight),
Math.max(d.body.offsetHeight, d.documentElement.offsetHeight),
Math.max(d.body.clientHeight, d.documentElement.clientHeight)
);
}

ესეც ესე – დოკუმეტის სიგრძე გვაქვს და ანუ შესაბამისად ვიცით რა სიგრძის სურათი გვინდა რომ დოკუმენტის ფონი სრული სიგძით შეავსოს.
ეხლა გვინდა გრადაციული სურათი, რომელიც იქნება მიღებული ზომის და დავუდებს ჩვენს დოკუმენტს ფონად, ამისათვის დაგვჭირდება PHP და ჯადოსნური GD2.
ქვემოთ მოცემულია php კლასი, რომელიც უზრუნველყოფს ასეთი სურათის გენერირებას, მისთვის გვაქვს რამოდენიმე პარამეტრი – სურათის სიგრძე, სურათის ფერი დასაწყისში და სურათის ფერი ბოლოში

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php

class gd_gradient_fill {

    function gd_gradient_fill($h,$s,$e) {
        $this->height = $h;
        $this->startcolor = $s;
        $this->endcolor = $e;
        $this->image = imagecreatetruecolor(1,$this->height);
        $this->fill($this->image,$this->startcolor,$this->endcolor);
        $this->display($this->image);
        return $this->image;
    }
   
    function display($im) {
        header("Content-type: image/png");
        imagepng($im);
    }
   
    function fill($im,$start,$end) {        
                $line_numbs = imagesy($im);
                $line_width = imagesx($im);
                list($r1,$g1,$b1) = $this->hex2rgb($start);
                list($r2,$g2,$b2) = $this->hex2rgb($end);

        for ( $i = 0; $i < $line_numbs; $i=$i+1 ) {
            $old_r=@$r;
            $old_g=@$g;
            $old_b=@$b;
            $r = ( $r2 - $r1 != 0 ) ? intval( $r1 + ( $r2 - $r1 ) * ( $i / $line_numbs ) ): $r1;
            $g = ( $g2 - $g1 != 0 ) ? intval( $g1 + ( $g2 - $g1 ) * ( $i / $line_numbs ) ): $g1;
            $b = ( $b2 - $b1 != 0 ) ? intval( $b1 + ( $b2 - $b1 ) * ( $i / $line_numbs ) ): $b1;
            if ( "$old_r,$old_g,$old_b" != "$r,$g,$b")
                $fill = imagecolorallocate( $im, $r, $g, $b );
                    imagefilledrectangle($im, 0, $i, $line_width, $i, $fill);
        }
    }
   
    function hex2rgb($color) {
        $color = str_replace('#','',$color);
        $s = strlen($color) / 3;
        $rgb[]=hexdec(str_repeat(substr($color,0,$s),2/$s));
        $rgb[]=hexdec(str_repeat(substr($color,$s,$s),2/$s));
        $rgb[]=hexdec(str_repeat(substr($color,2*$s,$s),2/$s));
        return $rgb;
    }
}
?>

ესეც ესე მივიღეთ php კოდი, რომელიც გვაძლევს გარდამავალი ფერის სურათს.
ეხლა ჯერი მინდა ამ ყველაფრის ინტეგრაციაზე ჩვენს html დოკუმენტში
პრიველ რიგში ავღწერთ getDocHeight() ფუნქციას და მერე window.onload ევენთზე მივაბამთ უკვე შექმნილი დოკუმენტის სიგრძის გაზომვასა და ფონის დადებას –

1
2
3
4
window.onload = function (){
    document.body.style.backgroundImage='url(gradient.php?sc=F00F00&ec=FFFFFF&h='+getDocHeight()+')';
    document.body.style.backgroundRepeat='repeat-x'
}

აქ ფონად ვიძახებთ radient.php ფაილს რომელსაც გადავცემთ 3 ცვლადს და აბრუნებს სურათის ტიპის ჰედერს, რომელსაც მერე დოკუმეტის ფონად ვდებთ.
radient.php ფაილი შეიცავს შიგთავს რომელიც მოცემულის ზემოთ php კოდის სახით + ამ ფალში არსებული კლასის გამოძახება და პარამეტრების გადაცემა –

1
2
// აქ იქნება ზემოთ მოცემული php კოდი რომელსაც მოყვება შემდეგი კოდი -
new gd_gradient_fill($_GET['h'],$_GET['sc'],$_GET['ec']);

ამ ყველაფრის მაგალითი შეგიძლიათ ნახოთ აქ –

ცოცხალი მაგალითი (Demo)

გადაწერეთ (.rar)

ესეც ასე დემოდან კარგად ჩანს რო მიზანი მიღწეულია, თუმცა ამ ყველაფრის ერთერთ მინუსი არის რომ ფონი აგვიანებს ჩატვირთვას – მიზეზი კიდევ არის ფონის სტილის window.onload ევენთზე მიბმაა და window.onload-ზე მიბმის მიზეზი კიდევ არის ის რომ თუ დოკუმეტი სრულად არ ჩაიტვირთა რათქმაუნდა წინასწარ ვერასოდეს ვერ გვეცოდინება რა სიგრძისაა ჩვენი დინამიური კონტენტის მქონე დოკუმენტი.
დატესტილია chrome, opera, firefox, IE7, safari -ში

წარმატებულ გრადაციას გისურვებთ 🙂

კატეგორიებში: GD2, PHP. |

5 გამოხმაურება “ფონის ფერის სრული ავტომატური გრადაცია ბროუზერებში”-ზე

  1. იოსები:
    April 12th, 2009 at 9:19 pm

    ძალიან კარგია ალექს!!! კარგია რომ არ დაგეზარა ამის გაკეთება 😀 ჯოხით რომ მცემო ამაზე დროს არ დავხარჯავდი 😉

  2. ალექსანდრე:
    April 12th, 2009 at 9:23 pm

    @იოსები
    დიდი პატივია ჩემთვის შენი შეფასება სოსოჯან 🙂
    უკვე იმდენმა მთხოვა ამ პრობლემის გარჩევა რო ფორუმელი Lekso-Dav-ის თხოვნამ პიკს მიაღწია 😀

  3. იოსები:
    April 12th, 2009 at 9:27 pm

    ფორუმიდან მოვაკვლიე ამ პოსტს 😀

    ისე ცოტა უფრო თუ გააქტიურდები კარგი იქნება, აი ნახე რა კარგია რომ დრო დახარჯე ამ თემაზე? აწი რომ დამჭირდეს აქ მოვალ და ერთის მხრივ ექპსერიმენტებში არ დავხარჯავ დროს, მეორეს მხრივ ჩემს აუტანელ სიზარმაცეს გამართლების საშუალება აღარ ექნება 😀

  4. Lekso:
    April 28th, 2009 at 5:03 am

    ე.ი მე რომ არ მეკითხა ეგ ფორმუმზე ასეთი საინტერესო სტატია არ იარსებებდა 😀

  5. ალექსანდრე:
    April 28th, 2009 at 1:15 pm

    @Lekso
    ნაწილობრივ მართალი ხარ 🙂 თეორიულად ნაფიქრი მქონდა და პრაქტიკულ განხორციელებაში მიბიძგე ხელი 🙂

დატოვე კომენტარი

...

Copyright © 2024 - About.Ge
მოდიფიცირებულია სპეციალურად About.Ge-სთვის