Problem z losowym obrazkiem

Dla specjalistów Webmastering
#1

Witam, jestem początkującym w temacie jednak lubią eksperymenty. Stworzyłem swoją stronkę korzystając z kreatora ale nie ma w nim wielu elementów które mnie interesują. Chciałbym zrobić obrazek losowy. Poczytałem że muszę to zrobić w php i połączyć z css. Robiłem według opisów z internetu ale coś pokręciłem chyba.

Stronkę można zobaczyć pod adresem http://www.karlowice.osp.org.pl . Chodzi mi to tego strażaka aby zieniał się co jakiś czas. A niżej podsyłam swoje wypociny:

CSS:

div.art-headerobject

{

   display: block;

   left: 0;

   margin-left: -5px;

   position: absolute;

   top: 16px;

   width: 319px;

   height: 453px;

   background-image: url(' images/background.jpg/index.php ');

}

php:

<?php

$i=0;

foreach(scandir('bg') as $plik){

   $roz=substr($plik, -4);

   if($roz=='.jpg' || $roz=='jpeg' || $roz=='.png' || $roz=='.gif' || $roz=='.bmp'){

      $img[$i][0]='bg/'.$plik;

      $img[$i][1]=$roz;

      $i++;

   }

}

$wyb=rand(0, count($img)-1);


switch($img[$wyb][1]){

   case '.jpg':

      header("Content-type: image/jpeg");

      $img=imagecreatefromjpeg($img[$wyb][0]);

      imagejpeg($img);

      break;

   case 'jpeg':

      header("Content-type: image/jpeg");

      $img=imagecreatefromjpeg($img[$wyb][0]);

      imagejpeg($img);

      break;

   case '.png':

      header("Content-type: image/png");

      $img=imagecreatefrompng($img[$wyb][0]);

      imagesavealpha($img, true);

      imagepng($img);

      break;

   case '.gif':

      header("Content-type: image/gif");

      $img=imagecreatefromgif($img[$wyb][0]);

      imagegif($img);

      break;

   case '.bmp':

      header("Content-type: image/bmp");

      $img=imagecreatefrombmp($img[$wyb][0]);

      imagejbmp($img);

      break;

}

imagedestroy($img);

?>

byłbym wdzięczy o jakieś wskazówki i podpowiedzi.

– Dodane 18.07.2012 (Śr) 16:10 –

Aha, kod php znalazłem na forum i postępowałem zgodnie z opisem do niego załączonym.

#2

Jak wygląda skrypt ze strażakiem, bo jak widzę to jest Flash i powinno się dać odniesienie w tym że pliku, czyli połączyć ActionScript z PHP.

Tak samo ten wpis jest raczej błędny:

background-image: url(' images/background.jpg/index.php ');

Bo tutaj jest katalog/katalog.jpg/skrypty.

#3

Sorki za gafę ale nie zmieniłem templatki wczoraj, dzisiaj jest ta o którą mi chodzi.

Ten strażak jest wstawiony tylko w css jako background. Coś mi się wydaje że pokićkałem coś w tym kreatorze jak zacząłem w kodzie grzebać.

Nie wiem może idzie to zrobić jakoś łatwiej?

#4

No jest możliwość zrobić to łatwiej.

Można stworzyć katalog z ilością większą niż jeden strażak i stworzyć skrypt który za każdym przeładowaniem strony będzie losował inny obraz z katalogu. Poszukaj pewnie gdzieś są gotowe takie skrypty.

#5

Znalazłem potrzebny kod i stworzyłem plik php z tym kodem. Nazwałem go: losowanie-jednego-obrazka-ze-zdefiniowanego-folderu-oraz-ze-zdefiniowanymi-rozszerzeniami.php Chciałbym teraz podstawić ten kod w css na miejsce sztywnego obrazka. zrobiłem to tak: background-image: url(’…/losowanie-jednego-obrazka-ze-zdefiniowanego-folderu-oraz-ze-zdefiniowanymi-rozszerzeniami.php’); jednak zamiast zmieniających się obrazków nie ma żadnego. Mógłby ktoś pomóc mi powiązać plik.php z css.

#6

nie możesz w css do background-image przypisać pliku php.

Jeżeli chcesz wylosować obrazek to zrób kilka klas w css z obrazkami np.

div.obrazek1

{

 ...

}

div.obrazek2

{

 ...

}

itd

a w pliku php zrób np. coś takiego

[/code]

i sprawa najprościej załatwiona.

Drugi parametr funkcji rand w tym przypadku to ilość tych obrazków, które masz do wyboru.

#7

oki. a jeśli mam w css coś takiego

/* begin HeaderObject */

div.art-headerobject

{

   display: block;

   left: 0;

   margin-left: -154px;

   position: absolute;

   top: 0;

   width: 693px;

   height: 406px;

   background-image: url('../losowanie-jednego-obrazka-ze-zdefiniowanego-folderu-oraz-ze-zdefiniowanymi-rozszerzeniami.php');

}

/* end HeaderObject */

a w html

[/code]

i jeśli zrobię tak jak pisałeś to jak to wszystko ze sobą połączyć aby wszystko było OK.

#8

ale to jest niepotrzebne komplikowanie sprawy. Jaki jest kod tego pliku php? Ustawiasz tam header content-type na obrazek?

#9

z php jestem zielony i ściągnąłem z neta coś takiego:

<?php

$cfg['dir_images'] = 'images2';

$cfg['expansions'] = array('png', 'gif', 'jpg');


// Jeżeli wersja PHP < 4.2.0 wtedy zachodzi potrzeba użycia generator licz losowych

// srand(floor(time() / (60*60*24)));


// Losowanie

$tmp['randed_img']['name_file'] = $tmp['img'][array_rand($tmp['img'] = glob('./'.$cfg['dir_images'].'/*.{'.implode(',', array_unique(array_map('strtolower', $cfg['expansions']))).'}', GLOB_BRACE))];

$tmp['randed_img']['file_info'] = getimagesize($tmp['randed_img']['name_file']);

// Throw

echo '';

?>

[/code]
#10

Według mnie to jest serio niepotrzebnie przekombinowane. Co się dzieje jak otworzysz ten plik php? Wyświetla się chociaż jakiś obrazek? Ten plik php zwraca html’a z obrazkiem zawartym w . Tak to się na pewno nic nie wyświetli jak to ustawiasz w taki sposób w css. To by miało prawo zadziałać jakbyś w pliku php, w którym chcesz mieć wyświetlony ten obrazek zrobił:

include('losowanie-jednego-obrazka-ze-zdefiniowanego-folderu-oraz-ze-zdefiniowanymi-rozszerzeniami.php');
#11

robiłem jak mówiłeś. PHP

[/code] a w css

[code]/* begin losowy obrazek */ div.obrazek1 { content: url(’…/images2/img6.png’); } div.obrazek2 { content: url(’…/images2/img7.png’); } /* begin losowy obrazek*/

i na stronce zostało mi tylko tło :confused:

#12

spróbuj:

div.obrazek1

{

   background: url('../images2/img6.png');

   width: {szerokosc}px;

   height: {wysokosc}px;

   display: block;

}

div.obrazek2

{

   background: url('../images2/img7.png');

   width: {szerokosc}px;

   height: {wysokosc}px;

   display: block;

}
#13

OK teraz mam w CSS

/* begin losowy obrazek */

div.obrazek1

{

   background: url('../images2/img6.png');

   width: 50px;

   height: 50px;

   display: block;

}

div.obrazek2

{

   background: url('../images2/img7.png');

   width: 50px;

   height: 50px;

   display: block;

}


/* begin losowy obrazek*/

ale dalej żadnego obraza na stronie. Może coś w html źle robię. Oto część kodu html gdzie ma być ten obrazek wyświetlany

<?php echo $this->params->get(‘siteTitle’); ?>

<?php echo $this->params->get(‘siteSlogan’); ?>

…

A tak jeszcze zapytam skąd ten php wie z jakich obrazków losować ?

#14

A jakie ma rozszerzenie ten plik, którego źródło wkleiłeś post wyżej? To jest html czy php?

W php tam jest jedynie funkcja rand wywoływana, która zwraca 1 lub 2 w Twoim przypadku.

Zobacz w źródle strony czy faktycznie jest tam

lub

[/code]

Ten kod jedynie przypisuje numer do klasy diva z tłem obrazka, które zdefiniowane są w css.

#15

Plik z którego pochodzi kod html ma nazwę index.php . W podglądzie źródła strony znalazłem coś takiego

ale nic nie wyświetla. Podgląd jest na www.karlowice.osp.org.pl

#16

W css masz ustawioną wysokość i szerokość na 50px podczas gdy ten obrazek 1 ma 563px na 800px. Jeżeli chcesz to zeskalować i mieć mniejszy to najlepiej to zrobic w jakimś programie graficznym. Druga sprawa jest taka, że ten obrazek jest w lewym górnym rogu strony. Na pewno chcesz go w tamtym miejscu?

#17

tu jest fotka tego o co mi chodzi http://imageshack.us/photo/my-images/82 … naild.png/ chciałbym aby ten strażak się zmieniał a te parametry to ustawiałem tak dla sprawdzenia

#18

Te obrazki są w zbyt dużej rozdzielczości. Możesz spróbować z background-size, ale nie wiem jak to się będzie zachowywało na różnych przeglądarkach. Najlepiej je zmniejszyć do takiego rozmiaru jaki potrzebujesz. A na szybko w css z background-size, podmień klasę obrazek1 i obrazek2.

div.obrazek1

{

   background: url('../images2/img6.png');

   width: 220px;

   height: 312px;

   display: block;

   background-size: 100%;

}

div.obrazek2

{

   background: url('../images2/img7.png');

   width: 693px;

   height: 500px;

   display: block;

   background-size: 88%;

   position: absolute;

   top: -90px;

   left: -130px;

}
#19

oki podmieniłem i już są obrazki. tylko ten jeden za duży na 100% i ten mniejszy się pokazuje częściej a ten większy tylko raz. Wielkie dzięki za pomoc. Spróbuję zmienić rozmiar tego drugiego .

#20

One są zmieniane zgodnie z tym co zostanie wylosowane przez funkcję rand(). Jeżeli chciałbyś, żeby się zmieniało sekwencyjnie to możesz to zrobić na różne sposoby - np. sesja, cookies.

na początku pliku php mógłbyś zrobić coś takiego:

<?php


$countImg = 2; // ilość obrazków


function getImage($id,$countImages)

{

	if($id<$countImages) return ++$id;

	return 1;

}


if(!isset($_COOKIE['obrazek']))

	setcookie('obrazek',1);

else setcookie('obrazek',getImage($_COOKIE['obrazek'],$countImg));


?>

a w miejscu gdzie masz:

[/code] zmień na:

[code]