[JavaScript] Jquery nałożenie przezroczystego paska na zdjęcie. Opcje

[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]

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

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

Ten post edytował arzach 17.07.2009, 18:04:05

[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]

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

[PHP] pobierz, plaintext 
<?php
$origfile = 'test.jpg';
$image = imagecreatefromjpeg($origfile);
$blue_x   = 387;
$blue_y   = 125;
$radius   = 150;
$blue = imagecolorallocatealpha($image, 0, 0, 0, 70);
imagefilledellipse($image, $blue_x, $blue_y, $radius, $radius, $blue);
header('Content-type: image/png');
imagepng($image);
imagedestroy($image);
?>
[PHP] pobierz, plaintext 

Ten post edytował arzach 17.07.2009, 20:12:21

[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

[PHP] pobierz, plaintext 
<style>
*{margin:0; padding:0}
        .foto {
            
            width:300px;
            height:150px;
            
        }
        .pasek {
            margin-top:-100px;
            height:100px;
            background-image: url(tlo.PNG);
            opacity:0.5;
            filter: alpha(opacity=50);
        }
</style>
 
<?php 
$rozmiar = getimagesize('test.jpg');
echo "
<div class=\"foto\">
<img src=\"test.jpg\" alt=\"\">            
        </div>
        <p class=\"pasek\" style=\"width:".$rozmiar[0]."px\">
test test test test test
        </p>";
?>
[PHP] pobierz, plaintext 

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;