1 vote, average: 5,00 out of 51 vote, average: 5,00 out of 51 vote, average: 5,00 out of 51 vote, average: 5,00 out of 51 vote, average: 5,00 out of 5
(1 votes, average: 5,00 out of 5)
Loading ... Loading ...

jQuery: napis na obrazku

Plugin do jQuery – który umożliwia nam napisanie dowolnego tekstu na obrazku – z doskonałym efektem.

Przykładowe użycie:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Type Over Image &mdash; Napis na obrazku</title>
 <link rel="stylesheet" type="text/css" href="css/css.css" />
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2" type="text/javascript"></script>
 <script src="js/titleblock.jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function() {
 $("img").titleBlock({
 removeTitle: false,
 thefontSize: "24px"
 });
 });
 </script>
</head>
<body>
 <div id="page-wrap">
 <img src="zdjecia/1.jpg" alt="" title="Webscripts.pl<br />Darmowe skrypty na Twoją stronę" />
 <img src="zdjecia/2.jpg" alt="" title="Webscripts.pl<br />Demo" />
 </div>
</body>
</html>

Uzyskamy następujący efekt:

Rozmiar czcionki możemy zmieniać podmieniając thefontSize: “24px” (domyślnie ustawiony na 24px).

W paczce do pobrania przygotowaliśmy dla Was skrypt – wraz z przykładowym użyciem.

http://css-tricks.com/examples/TypeOverImagePlugin/

Skomentuj

Twój adres email nie zostanie opublikowany i nie będzie rozpowszechniany. Wymagane pola są oznaczone *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>