Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Jquery nałożenie przezroczystego paska na zdjęcie.
Forum PHP.pl > Forum > Przedszkole
arzach
Witam jak mogę osiągnąć taki efekt jak na






Chodzi o ten przezroczysty pasek na dole zdjęcia. Chciał bym nałożyć taki pasek na zdjęcie w którym będę mógł umieszczać informacje na temat zdjęcia. Zdjęcie nie zawsze morzę być takiego samego rozmiaru.

Prosił bym o wskazówki jak to wykonać. Nie chodzi mi o gotowca chciał bym sam takie coś zrobić sam od początku. Domyślam się że na początku musiał bym pobrać szerokość obrazka i potem na podstawie szerokości nałożyć div na obrazek.
erix
Półprzezroczysty PNG.
arzach
Ale pół przezroczysty obrazek mogę nałożyć w php ? coś na zasadzie jak znak wody ? I żeby mógł na nim umieścić informacje na temat obrazka pobrane z bazy ? Da się tak zrobić ?
Spawnm
to w końcu js czy php?
erix
Cytat
Da się tak zrobić ?

Da się, ale IMHO bez sensu - nie dasz na to łatwo linka, obniżysz jakość obrazka...
arzach
Jak się da w php to wole w php a domyślam się ze się da. Proszę o wskazówki z jakich funkcji mam skorzystać by to wykonać. Na początku pobierał bym szerokość obrazka za pomocą getimagesize i potem na podstawie szerokości tworzył bym przezroczysty pasek. I dalej już nie wiem jak miał bym go nałożyć na obrazek z danymi na temat obrazka pobranymi z bazy. Proszę o wskazówki z jakich funkcji skorzystać ?


EDIT

Cytat
Da się, ale IMHO bez sensu - nie dasz na to łatwo linka, obniżysz jakość obrazka...


Czyli w php musiał bym nałożyć tylko przezroczysty obrazek a w js informacje na temat obrazka ?
Tylko jak mam to zrobić proszę o wskazówki ? w manualu znalazłem imagecolorallocatealpha
vokiel
A czy nie lepiej będzie to osiągnąć w samym css (z półprzezroczystym png jako tło)? Dwie warstwy, jedna na drugiej, druga przyklejona do dołu.
arzach
Cytat
A czy nie lepiej będzie to osiągnąć w samym css (z półprzezroczystym png jako tło)? Dwie warstwy, jedna na drugiej, druga przyklejona do dołu.


Możesz coś bardziej przybliżyć jak mogę to zrobić ?

A i obrazek może być różnego rozmiaru bo jest pobierany z bazy.

Jak mogę nałożyć warstwę na obrazek ? ( pasek) by był na samym dole obrazka ?






Bo na chwile obecną zrobiłem w php takie coś
przykład
http://www.fusion.boo.pl/pasek.php
( chodzi o kółko )
i nie mogę znaleźć funkcji którą mógł bym zrobić prostokąt zamiast kółka oto kod jaki napisałem
  1. <?php
  2. $origfile = 'test.jpg';
  3. $image = imagecreatefromjpeg($origfile);
  4. $blue_x   = 387;
  5. $blue_y   = 125;
  6. $radius   = 150;
  7. $blue = imagecolorallocatealpha($image, 0, 0, 0, 70);
  8. imagefilledellipse($image, $blue_x, $blue_y, $radius, $radius, $blue);
  9. header('Content-type: image/png');
  10. imagepng($image);
  11. imagedestroy($image);
  12. ?>
Kildyt
W CSS możesz to zrobić na kilka sposobów. Ja bym zastosował ujemny margines górny dla paska. Wtedy nie musisz obrazka wrzucać do oddzielnego div-a.
gcdreak
HTML:
Kod
<div class="foto">
            
        </div>
        <p class="pasek">
            
        </p>

CSS:
Kod
*{margin:0; padding:0}
        .foto {
            
            width:300px;
            height:150px;
            background:#4d4d4d;
        }
        .pasek {
            margin-top:-50px;
            width:300px;
            height:50px;
            background:#ffa500;
            opacity:0.3;
        }

Ustaw sobie dla paska odpowiednie tło.png, żeby przejść validacje i usuń opacity.
erix
  1. opacity wymusi półprzezroczystość dla wszystkich elementów w tej warstwie, czego nie będzie przy PNG
  2. zostaje kwestia IE
gcdreak
Dlatego napisalem żeby go zastosowal.
Jeśli chodzi o IE6 to przeciez skoro uzytkownik uzywa IE6 to nie zasluguje na lepsze efekty wizualne;P
nie ma sie co tym przejmowac. Oni będą mieć białe tło.
arzach
Zrobiłem tak i

  1. <style>
  2. *{margin:0; padding:0}
  3.        .foto {
  4.            
  5.            width:300px;
  6.            height:150px;
  7.            
  8.        }
  9.        .pasek {
  10.            margin-top:-100px;
  11.            height:100px;
  12.            background-image: url(tlo.PNG);
  13.            opacity:0.5;
  14.            filter: alpha(opacity=50);
  15.        }
  16. </style>
  17.  
  18. <?php
  19. $rozmiar = getimagesize('test.jpg');
  20. <div class=\"foto\">
  21. <img src=\"test.jpg\" alt=\"\">            
  22.        </div>
  23.        <p class=\"pasek\" style=\"width:".$rozmiar[0]."px\">
  24. test test test test test
  25.        </p>";
  26. ?>


Działa przykład

http://www.fusion.boo.pl/pasek.php

Ale gdy już próbuje to dodać w panelu cms rozwala się cała strona
przykład
http://www.fusion.boo.pl/obr.php
jak mogę temu zaradzić ?
gcdreak
Poprostu obrazek jest płynnie ustawiony(masz w stylach float) i to wyłącza go z normalnego biegu i sprawia, żę element <td class="main-body"> go nie obejmuje.
Możesz zastosować metodę Asletta dodając w stylach:
Kod
.main-body:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.