Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Rollover + pngfic + IE
Forum PHP.pl > Forum > Przedszkole
dexter77
11.07.2008, 00:14:15
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
nexis
11.07.2008, 08:49:40
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.
dexter77
11.07.2008, 10:10:11
tutaj tez rozwiazanie : http://homepage.ntlworld.com/bobosola/png_mouseover.htm
m87
11.07.2008, 11:04:52
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ą.
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.