Forum PHP.pl > Obrazek zakrywający tekst

Pomoc - Szukaj - Użytkownicy - Kalendarz

furman12

31.12.2009, 15:49:30

Witam jąk skonstruować coś takiego, mam obrazek, który ma zakrywać jakiś tekst, po kliknięciu w ten obrazek, ma on zniknąć ukazując tekst. Czy w ogóle da rade zrobić coś takiego w php?

black.old.cat

31.12.2009, 16:39:37

[PHP] pobierz, plaintext 
<?php
echo isset($_GET['text']) ? 'jakis text' : '<a href="?text"><img src=""></a>';
?>
[PHP] pobierz, plaintext

emtiej

31.12.2009, 17:38:26

jeżeli ma to się dziać automatycznie i bez przesyłania jakichkolwiek danych, to polecam CSS+XHTML, mianowicie poczytaj o warstwach i pozycjonowaniu w CSS + HOVER

http://www.kurshtml.boo.pl/css/nakladanie,...cjonowanie.html

vonski

31.12.2009, 17:56:26

Ewentualnie możesz użyć jQuery (albo "czystego" JS, ale w jQuery jest chyba prościej

).
Coś na wzór:

[PHP] pobierz, plaintext 
	<script type="text/javascript">
		$(document).ready(
		function()
		{
			$("#obrazek").click(
			function()
			{
				$("#obrazek").toggle();
			});
		});
	</script>
[PHP] pobierz, plaintext

a w CSS pozycjonujesz obrazek tak, żeby zakrywał dany tekst i nadajesz mu odpowiednie id (dla tego przykładu "obrazek").

[HTML] pobierz, plaintext 
<img style="position: absolute; top: 0px;" id="obrazek" src="obrazek.jpg" />
[HTML] pobierz, plaintext

No i oczywiście w <head></head> musisz podać ścieżkę do pliku .js z jQuery.

black.old.cat

31.12.2009, 20:53:31

Jezeli chodzi o css :

[HTML] pobierz, plaintext 
<html><head><style type="text/css">
div {
	width:200px;
	height:20px;
}
div {
	font-size : 0;
}
div img{
	width:200px;
	height:20px;
}
div:hover img{
	width: 0;
	height: 0;
}
div:hover{
	font-size : 20px;
}
</style></head><body>
 
<div><img src=''>text</div>
 
</body></html>
[HTML] pobierz, plaintext

emtiej

31.12.2009, 21:19:48

Cytat(black.old.cat @ 31.12.2009, 20:53:31 )

Jezeli chodzi o css :
[HTML] pobierz, plaintext

<html><head><style type="text/css">
div {
width:200px;
height:20px;
}
div {
font-size : 0;
}
div img{
width:200px;
height:20px;
}
div:hover img{
width: 0;
height: 0;
}
div:hover{
font-size : 20px;
}
</style></head><body>
<div><img src=''>text</div>
</body></html>

[HTML] pobierz, plaintext

O właśnie, bardzo dobre rozwiązanie, chodziło mi o nieco inną metodę, ale ta też jest bardzo dobra

furman12

31.12.2009, 22:49:06

Hover nie działa czasem przy najechaniu? Mi chodzi o kliknięcie.

Może zamiast hover dać active? Chodzi mi o odkrywanke, ale właściwie efekt zdrapki byłby lepszy, ale css czy php tego nie wykonają. A może się mylę? No ale cuż dzisiaj sobie już odpuszcze, bo trzeba świętować nowy rok.

PS: Życzę wszystkim szczęśliwego nowego roku!
Happy new year everybody!

emtiej

1.01.2010, 01:55:57

Tak ACTIVE zda egzamin, a jeżeli chciałbyś pobawić się w skrypt zdrapki, no to tylko w JAVASCRIPT

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.