Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript]Rollover + pngfic + IE
dexter77
post 11.07.2008, 00:14:15
Post #1





Grupa: Zarejestrowani
Postów: 27
Pomógł: 0
Dołączył: 6.05.2008

Ostrzeżenie: (0%)
-----

Witam, mam pewien problem, zastosowalem image rollover java script ...podmieniajace sie obrazki to PNG, a wiec IE ich nie wyswietla poprawnie... aby to rozwiazac uzylem pngfix.js ....i tutaj pojawia sie problem, poniewaz pod FF i Opera wszystko ok, a pod IE skrypty chyba sie gryzą bo obrazki nie sa podmieniane, zostaje tylko glowny...

podaje kod strony:

Kod
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta name="Title" content="xx" />
   <meta name="Description" content="xx">
   <meta name="author" content="xx" />
   <meta http-equiv="reply-to" content="xx" />
   <meta name="description" content="xx" />
   <meta name="keywords" content="xx" />
   <meta http-equiv="content-language" content="pl" />
   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" />
   <title>xx</title>
   <link rel="stylesheet" href="style.css" type="text/css">
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<script language="Javascript">
<!--

if (document.images) {
      button1 = new Image
      button2 = new Image

      button1.src = 'images/start.png'
      button2.src = 'images/start-over.png'
  }
//-->
</script>
</head>
<body>
<div id="start"><img src="images/start01.png" width="601" height="128"><br>
<a href="" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src"><img src="images/start.png" width="601" height="286" border=0 name="rollover"></a>

</div>
</body>
</html>


a oto pngfix.js:

Kod
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
    for(var i=0; i<document.images.length; i++)
    {
       var img = document.images[i]
       var imgName = img.src.toUpperCase()
       if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
       {
          var imgID = (img.id) ? "id='" + img.id + "' " : ""
          var imgClass = (img.className) ? "class='" + img.className + "' " : ""
          var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
          var imgStyle = "display:inline-block;" + img.style.cssText
          if (img.align == "left") imgStyle = "float:left;" + imgStyle
          if (img.align == "right") imgStyle = "float:right;" + imgStyle
          if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
          var strNewHTML = "<span " + imgID + imgClass + imgTitle
          + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
          + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
          + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
          img.outerHTML = strNewHTML
          i = i-1
       }
    }
}


jak rozwiazac ten problem, aby rollover z PNG działał nie tylko pod FF ale tez w IE ? sad.gif

Ten post edytował dexter77 11.07.2008, 10:09:30
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 3)
nexis
post 11.07.2008, 08:49:40
Post #2





Grupa: Zarejestrowani
Postów: 1 012
Pomógł: 109
Dołączył: 26.09.2003
Skąd: nexis.pl

Ostrzeżenie: (0%)
-----

W pierwszej kolejności zmień proszę temat na JavaScript, bo skrócenie do JAVA zmienia zupełnie znaczenie i nie ma najmniejszego związku z tym co później piszesz.

Następnie polecam użycie biblioteki jQuery oraz wspomnianego PNG Fix.

Poniżej przykład bezinwazyjnego rozwiązania:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  4. <head>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. 	<title>Przycisk</title>
  7. 	<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
  8. 	<!--[if lt IE 7]><script defer type="text/javascript" src="pngfix.js"></script><![endif]-->
  9. 	<script type="text/javascript">
  10. 		$(document).ready(function(){
  11. 			$("#button").mouseover(function(){
  12. 				$(this).attr("src", "images/button-highlight.png");
  13. 			});
  14. 			$("#button").mouseout(function(){
  15. 				$(this).attr("src", "images/button.png");
  16. 			});
  17. 		});
  18. 	</script>
  19. </head>
  20. <body>
  21. 	<img id="button" src="images/button.png" alt="" />
  22. </body>
  23. </html>
[HTML] pobierz, plaintext


lub bardziej uniwersalna metoda:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  4. <head>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. 	<title>Przycisk</title>
  7. 	<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
  8. 	<!--[if lt IE 7]><script defer type="text/javascript" src="pngfix.js"></script><![endif]-->
  9. 	<script type="text/javascript">
  10. 		$(document).ready(function(){
  11. 			$(".highlight").mouseover(function(){
  12. 				$(this).attr("src", $(this).attr("src").replace(".png", "-highlight.png"));
  13. 			});
  14. 			$(".highlight").mouseout(function(){
  15. 				$(this).attr("src", $(this).attr("src").replace("-highlight.png", ".png"));
  16. 			});
  17. 		});
  18. 	</script>
  19. </head>
  20. <body>
  21. 	<img class="highlight" src="images/button.png" alt="" />
  22. </body>
  23. </html>
[HTML] pobierz, plaintext


Przy której należy jednak pamiętać o konsekwentnym nazywaniu plików według schematu obrazek1.png => obrazek1-highlight.png, obrazek2.png => obrazek2-highlight.png, itd.

Ten post edytował nexis 11.07.2008, 09:00:16


--------------------
Zend Certified Engineer

Kliknij POMÓGŁ jeśli moja odpowiedź okazała się użyteczna!
Go to the top of the page
+Quote Post
dexter77
post 11.07.2008, 10:10:11
Post #3





Grupa: Zarejestrowani
Postów: 27
Pomógł: 0
Dołączył: 6.05.2008

Ostrzeżenie: (0%)
-----

tutaj tez rozwiazanie : http://homepage.ntlworld.com/bobosola/png_mouseover.htm
Go to the top of the page
+Quote Post
m87
post 11.07.2008, 11:04:52
Post #4





Grupa: Zarejestrowani
Postów: 21
Pomógł: 4
Dołączył: 5.07.2008

Ostrzeżenie: (0%)
-----

Tak jak napisał nexis, ja również polecam jQuery i dedykowany do niego plugin jquery.pngFix.

Ogólnie do tworzenia prostych rolloverów w zupełności wystarczy sam CSS:
http://www.webcredible.co.uk/user-friendly...r-buttons.shtml

No i do tego jedynie pngFix dla IE, ale wtedy nie masz problemu, że skrypty się kłócą.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.07.2025 - 14:28
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn