+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Jak zakryć obrazek , pusty div (/thread-jak-zakryc-obrazek-pusty-div)
Jak zakryć obrazek , pusty div - dominator1 - 14-09-2013
Witam. Potrzebuję na blogu (blogger) zakryć player youtube czymś... I tu mam dwa pomysły, zakryć przeźroczystym png lub znalazłem gdzieś w internecie drugi sposób
"wystarczy zdjęcie umieścić w div jako tło, albo w img i na to na wyższą warstwę nałożyć pustego diva, nadać mu odpowiednie rozmiary i w ten sposób zakryć zdjęcie przeźroczystą tarczą ochronną przed ściąganiem"
Nie wiem jak to zrobić, proszę o jakiś przykładowy kod...
RE: Jak zakryć obrazek , pusty div - Kartofelek - 15-09-2013
Czekaj. Chcesz w taki sposób zablokować możliwość ściągania obrazków ze swojej strony?
Kod:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('.main-content img').each(function() {
$(this).wrap('<div class="img-overflow"></div>');
});
$('.img-overflow').append('<img class="over" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />');
});
</script>style:
Kod:
.img-overflow {position:relative; display:inline-block;}
.img-overflow img {position:relative; z-index:0; display:inline-block;}
.img-overflow img.over {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}main-content to twoj kontent. Pewnie nie chcesz WSZYSTKICH obrazków tak zablokować.
Ale ogólnie możesz od razu sobie dać spokój, bo jedyna pewna metoda to nie umieszczanie strony w necie
RE: Jak zakryć obrazek , pusty div - dominator1 - 15-09-2013
W sumie problem rozwiązałem czymś takim, ale mam kolejne pytanie
<div style="height: 500px; width: 700px;">
player youtube
</div>
<div style="height: 506px; margin-top: -500px; width: 700px;">
zdjęcie png przeźroczyste nad playerem
Teraz chciał bym aby to przeźroczyste zdjęcie całkowicie znikało lub przesuwało się w dół strony po np 5 minutach
Da się to zrobić w jakiś prosty sposób?
RE: Jak zakryć obrazek , pusty div - Kartofelek - 15-09-2013
Kod:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
setTimeout(function() {
$('.magiczne-zdjecie').remove();
}, 5000);
</script>Używaj klas
RE: Jak zakryć obrazek , pusty div - dominator1 - 15-09-2013
(15-09-2013, 16:18)Kartofelek napisał(a):Mógł byś wyjaśnić o co w tym chodzi? Tzn dzięki temu zdjęcie zniknie? Podaj jakiś przykładowy pełny kod na moim poprzednim przykładzie. Czyli player youtube a nad nim magiczne zdjęcie które znikaKod:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
setTimeout(function() {
$('.magiczne-zdjecie').remove();
}, 5000);
</script>
Używaj klas
RE: Jak zakryć obrazek , pusty div - Kartofelek - 15-09-2013
Nie za bardzo mogę. Właśnie włączył mi się leń.
RE: Jak zakryć obrazek , pusty div - dominator1 - 15-09-2013
(15-09-2013, 18:30)Kartofelek napisał(a): Nie za bardzo mogę. Właśnie włączył mi się leń.
No proszę
RE: Jak zakryć obrazek , pusty div - prawdziwypiotrek - 16-09-2013
Nie baw się tak. Wstaw zwykły obrazek z atrybutem typu data-youtube zawierającym ID filmu i skorzystaj z API:
https://developers.google.com/youtube/iframe_api_reference
https://developers.google.com/youtube/js_api_reference#Embedding
Masz tam działające przykłady - uruchom je sobie i zobacz
W momencie kliknięcia na obrazku będziesz musiał załadować playerek o podanych wymiarach i ID.