Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z czcionką Cufon i zmianą koloru JS
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
komin
30.10.2013, 12:10:52
Witam
Mam problem robię sobie prostą stronkę i aby ładnie wyglądała chciałem zastosować czcionkę Century-Gorhic , mało kto ją ma zainstalowaną na kompie i znalazłem coś takiego jak Cufon , wszystko fajnie wgrałem i wkleiłem do kodu to co potrzeba i działa ,zmienia czcionkę z tabeli id="oferta" na Century Gothic jednak powstaje taki "bug" że nie moge zmienić koloru tej czcionki w tabeli id="oferta" po najechaniu właśnie na ten napis ( zrobione z pomocą <svg><polyline/></svf> ) , zmieniają kolor jedynie oryginalne czcionki w tabeli id="portfolio" i id="kontakt"
Mam nadzieje żę rozumiecie o co mi chodzi
Z góry dzięki
Pozdrawiam

linki do plikow czcionek js:
http://www6.zippyshare.com/v/46901868/file.html
http://www6.zippyshare.com/v/56052664/file.html


Kod:

[HTML] pobierz, plaintext 
  1. <head>
  2. 	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  3. <script src=&#8221;cufon-yui.js&#8221; type=&#8221;text/javascript&#8221;></script>
  4. <script src=&#8221;Century_Gothic_400.font.js&#8221; type=&#8221;text/javascript&#8221;></script>
  5.  
  6. <script type=&#8221;text/javascript&#8221;>
  7. Cufon.replace(‘#oferta′);
  8. </script>
  9.  
  10.  
  11.  
  12.  
  13. <style>
  14. p{
  15. font-size: 0px;
  16. background-color:#F2F2F2;
  17. height:15px ;
  18. margin-top:15px;
  19. }
  20. #paski1 {
  21. position:absolute;
  22. right:311px;
  23. top: 17px;
  24. }
  25.  
  26. #paski2 {
  27. position:absolute;
  28. left:65px;
  29. top: 230px;
  30. }
  31.  
  32. #oferta{
  33. font-weight: bold ;
  34. font-family:"Times New Roman" , sans-serif ;
  35. font-size: 23px;
  36. position:absolute;
  37. right:400px ;
  38. top:22px ;
  39.  
  40. }
  41.  
  42. td{ 
  43. display: block;
  44. position:relative ; }
  45.  
  46. #liniaoferty {
  47. position:absolute;
  48. right:300px ;
  49. top:33px;
  50. width:95px;
  51. height:166px;
  52. }
  53.  
  54.  
  55. </style>
  56. </head>
  57. <body >
  58.  
  59.  
  60.  
  61. <div id="paski1">
  62. <p style="width:8480px;"></p>
  63. <p style="width:8446px;"></p>
  64. <p style="width:8426px;"></p>
  65. <p style="width:8418px;"></p>
  66. <p style="width:8413px;"></p>
  67. <p style="width:8410px;"></p>
  68. </div>
  69.  
  70.  
  71.  
  72. <div id="tabele">
  73. <table id="oferta">
  74. <tr><td id="O" style="left:100px ;">O</td></tr>
  75. <tr><td id="F" style="left:70px ;">F</td></tr>
  76. <tr><td id="E" style="left:50px ;">E</td></tr>
  77. <tr><td id="R" style="left:40px ;">R</td></tr>
  78. <tr><td id="T" style="left:35px ;">T</td></tr>
  79. <tr><td id="A" style="left:32px ;">A</td></tr>
  80. </table>
  81. <table id="portfolio">
  82. <tr><td id="O">P</td></tr>
  83. <tr><td id="F">O</td></tr>
  84. <tr><td id="E">R</td></tr>
  85. <tr><td id="R">T</td></tr>
  86. <tr><td id="T">F</td></tr>
  87. <tr><td id="A">O</td></tr>
  88. <tr><td id="A">L</td></tr>
  89. <tr><td id="A">I</td></tr>
  90. <tr><td id="A">O</td></tr>
  91. </table>
  92.  
  93. <table id="kontakt">
  94. <tr><td id="O">K</td></tr>
  95. <tr><td id="F">O</td></tr>
  96. <tr><td id="E">N</td></tr>
  97. <tr><td id="R">T</td></tr>
  98. <tr><td id="T">A</td></tr>
  99. <tr><td id="A">K</td></tr>
  100. <tr><td id="A">T</td></tr>
  101. </table>
  102. </div>
  103.  
  104. <div id="liniaoferty" >
  105. <svg>
  106. <polyline 
  107. onmouseover="document.getElementById('tabele').style.color='red'; document.getElementById('oferta').style.textShadow='3px 2px 5px gray';"
  108.  
  109. onmouseout="document.getElementById('tabele').style.color='blue';document.getElementById('oferta').style.textShadow='none';"
  110.  
  111. style="opacity:0;filter:alpha(opacity=40);" fill="none" stroke="green" stroke-width="20" points="88,0 47,40 25,80 17,120 12,165  " />
  112. </svg>
  113. </div>
  114.  
  115. </body>
  116. </html>
[HTML] pobierz, plaintext
pedro84
30.10.2013, 15:08:30
Odpowiem Ci tak: obecnie, a mamy rok 2013, używanie tego ustrojstwa mija się z celem. Marsz do Google i zapytaj o @font-face. Nie ma żadnego racjonalnego zastosowania dla tego typu rozwiązań (i tak naprawdę nigdy nie było).
com
30.10.2013, 16:36:52
http://www.google.com/fonts/specimen/Nunito

http://joelcrawfordsmith.com/new/font/century-gothic

wink.gif
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.