PNG transparency με png rollover σε Internet Explorer 6

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
dimitris_s
Δημοσιεύσεις: 10
Εγγραφή: 10 Ιουν 2007 19:41

PNG transparency με png rollover σε Internet Explorer 6

Δημοσίευση από dimitris_s » 10 Ιουν 2007 19:48

Γεια σας και καλώς σας βρήκα. :-) Έψαξα για παρόμοια θέματα και αν και βρήκα παρόμοιο θέμα για png fix, παρ' όλα αυτά δεν βρήκα κάτι για rollover με png, οπότε και έκανα νέο θέμα.

Ας μπω κατευθείαν στο θέμα γιατί δεν τη παλεύω άλλο με τον IE.

Ο Ιnternet explorer 6 δεν υποστηρίζει native PNG transparencies. Έχουν βέβαια βγει διάφορα fix γι' αυτό το σκοπό και μέχρι πρότινος είχα κάνει τη σελίδα μου "png ready" και στον IE, και όλες οι διαφάνειες διαβαζόντουσαν κανονικά από τον IE, χρησιμοποιώντας τον παρακάτω κώδικα:

Κώδικας: Επιλογή όλων

<!--&#91;if lt IE 7&#93;>
<script language="JavaScript">
function correctPNG&#40;&#41; // correctly handle PNG transparency in Win IE 5.5 & 6.
&#123;
   var arVersion = navigator.appVersion.split&#40;"MSIE"&#41;
   var version = parseFloat&#40;arVersion&#91;1&#93;&#41;
   if &#40;&#40;version >= 5.5&#41; && &#40;document.body.filters&#41;&#41; 
   &#123;
	  for&#40;var i=0; i<document.images.length; i++&#41;
	  &#123;
		 var img = document.images&#91;i&#93;
		 var imgName = img.src.toUpperCase&#40;&#41;
		 if &#40;imgName.substring&#40;imgName.length-3, imgName.length&#41; == "PNG"&#41;
		 &#123;
			var imgID = &#40;img.id&#41; ? "id='" + img.id + "' " &#58; ""
			var imgClass = &#40;img.className&#41; ? "class='" + img.className + "' " &#58; ""
			var imgTitle = &#40;img.title&#41; ? "title='" + img.title + "' " &#58; "title='" + img.alt + "' "
			var imgStyle = "display&#58;inline-block;" + img.style.cssText 
			if &#40;img.align == "left"&#41; imgStyle = "float&#58;left;" + imgStyle
			if &#40;img.align == "right"&#41; imgStyle = "float&#58;right;" + imgStyle
			if &#40;img.parentElement.href&#41; imgStyle = "cursor&#58;hand;" + imgStyle
			var strNewHTML = "<span " + imgID + imgClass + imgTitle
			+ " style=\"" + "width&#58;" + img.width + "px; height&#58;" + img.height + "px;" + imgStyle + ";"
			+ "filter&#58;progid&#58;DXImageTransform.Microsoft.AlphaImageLoader"
			+ "&#40;src=\'" + img.src + "\', sizingMethod='scale'&#41;;\"></span>" 
			img.outerHTML = strNewHTML
			i = i-1
		 &#125;
	  &#125;
   &#125;	
&#125;
window.attachEvent&#40;"onload", correctPNG&#41;;
</script>
<!&#91;endif&#93;-->
Όλα ωραία και καλά [εκτός από ενα περίεργο stretch που προκαλεί ο παραπάνω κώδικας στα png's στον IE], αλλά τώρα χρειάστηκε να φτιάξω ένα rollover image με 2 png που χρησιμοποιούν διαφάνεια. Έλα όμως που στον IE ο παραπάνω κώδικας για το png transparency fix δεν δουλεύει αν συνδυαστεί με rollover images. Μάλλον δεν δουλεύει το rollover image, και απλά πετάει σφάλμα σελίδας στον IE. Δοκίμασα πολλούς τρόπους για το png fix, μέχρι και

Κώδικας: Επιλογή όλων

<script defer type="text/javascript" src="pngfix.js"></script>
, αλλά πάλι τα ίδια.

Όταν το παίδεψα λίγο με css κάτι φάνηκε να διορθώνεται αλλά και πάλι δεν κατάφερα κάτι. Στο net υπάρχουν πάρα πολλοί τρόποι για ie png fix + rollover png's αλλά κανείς τους δεν φάνηκε να δουλεύει όπως πρέπει σε εμένα.

Όποιος ξέρει και μπορεί να βοηθήσει, θα του ήμουν πραγματικά ευγνώμων.

Ο παρακάτω τρόπος φαίνεται να διορθώνει ΚΑΙ τα png αλλά ΚΑΙ να λειτουργούν τα rollovers. Δεν μπορώ να κάνω όμως το rollover image μου να δουλέψει, αν και έχω πειράξει τον κώδικα σε 1000 σημεία. Κάποιος που ξέρει καλύτερα ας δώσει τα φώτα του παρακαλώ.

Κώδικας: Επιλογή όλων

<!--&#91;if lt IE 7&#93;>
<script type="text/javascript">

var arVersion = navigator.appVersion.split&#40;"MSIE"&#41;
var version = parseFloat&#40;arVersion&#91;1&#93;&#41;

function correctPNG&#40;&#41; // correctly handle PNG transparency in Win IE 5.5 and 6.
&#123;
   if &#40;&#40;version >= 5.5&#41; && &#40;document.body.filters&#41;&#41; 
   &#123;
	   for&#40;var i=0; i<document.images.length; i++&#41;
	   &#123;
		  var img = document.images&#91;i&#93;
		  var imgName = img.src.toUpperCase&#40;&#41;
		  if &#40;imgName.substring&#40;imgName.length-3, imgName.length&#41; == "PNG"&#41;
		  &#123;
			 var imgID = &#40;img.id&#41; ? "id='" + img.id + "' " &#58; ""
			 var imgClass = &#40;img.className&#41; ? "class='" + img.className + "' " &#58; ""
			 var imgTitle = &#40;img.title&#41; ? "title='" + img.title + "' " &#58; "title='" + img.alt + "' "
			 var imgStyle = "display&#58;inline-block;" + img.style.cssText 
			 var imgAttribs = img.attributes;
			 for &#40;var j=0; j<imgAttribs.length; j++&#41;
			 &#123;
				var imgAttrib = imgAttribs&#91;j&#93;;
				if &#40;imgAttrib.nodeName == "align"&#41;
				&#123;		  
				   if &#40;imgAttrib.nodeValue == "left"&#41; imgStyle = "float&#58;left;" + imgStyle
				   if &#40;imgAttrib.nodeValue == "right"&#41; imgStyle = "float&#58;right;" + imgStyle
				   break
				&#125;
			 &#125;
			 var strNewHTML = "<span " + imgID + imgClass + imgTitle
			 strNewHTML += " style=\"" + "width&#58;" + img.width + "px; height&#58;" + img.height + "px;" + imgStyle + ";"
			 strNewHTML += "filter&#58;progid&#58;DXImageTransform.Microsoft.AlphaImageLoader"
			 strNewHTML += "&#40;src='" + img.src + "', sizingMethod='scale'&#41;;\""
			 strNewHTML += " onmouseover=\"PNGswap&#40;'" + img.id + "'&#41;;\" onmouseout=\"PNGswap&#40;'" + img.id +"'&#41;;\""
			 strNewHTML += "></span>" 
			 img.outerHTML = strNewHTML
			 i = i-1
		  &#125;
	   &#125;
   &#125;
&#125;
window.attachEvent&#40;"onload", correctPNG&#41;;

function PNGswap&#40;myID&#41;
&#123;
   var strOver  = "_on"
   var strOff = "_off"
   var oSpan = document.getElementById&#40;myID&#41;
   var currentAlphaImg = oSpan.filters&#40;0&#41;.src
   if &#40;currentAlphaImg.indexOf&#40;strOver&#41; != -1&#41;
	  oSpan.filters&#40;0&#41;.src = currentAlphaImg.replace&#40;strOver,strOff&#41;
   else
	  oSpan.filters&#40;0&#41;.src = currentAlphaImg.replace&#40;strOff,strOver&#41;
&#125;

</script>
<!&#91;endif&#93;-->
Έπειτα το javascript για το rollover :

Κώδικας: Επιλογή όλων

<script language="JavaScript" type="text/javascript">
<!--
function imgSwap&#40;oImg&#41;
&#123;
   var strOver  = "_on"	// image to be used with mouse over
   var strOff = "_off"	 // normal image
   var strImg = oImg.src
   if &#40;strImg.indexOf&#40;strOver&#41; != -1&#41; 
	  oImg.src = strImg.replace&#40;strOver,strOff&#41;
   else
	  oImg.src = strImg.replace&#40;strOff,strOver&#41;
&#125;
//-->
</script>
Και τελικά, ο κώδικας για την εισαγωγή των images :

Κώδικας: Επιλογή όλων

	<div class="plainbackground">
	<img id="img100" src="logo_off.png" width="100" height="100" alt="a PNG logo"
	onmouseover="imgSwap&#40;this&#41;" onmouseout="imgSwap&#40;this&#41;"/>
	</div>

	<div class="plainbackground">
	<img id="img200" src="logo2_off.png" width="100" height="100" alt="another PNG logo"
	onmouseover="imgSwap&#40;this&#41;" onmouseout="imgSwap&#40;this&#41;"/>

	</div>
Kαι όλα αυτά στον IE... Ο firefox υποστηρίζει png transparency και για να φτιάξεις ένα rollover image είναι υπόθεση 2 σειρών κώδικα...

Boήθεια παιδιά...

:roll:

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

PNG transparency με png rollover σε Internet Explorer 6

Δημοσίευση από fafos » 10 Ιουν 2007 23:17

Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

PNG transparency με png rollover σε Internet Explorer 6

Δημοσίευση από skeftomilos » 11 Ιουν 2007 02:34

Αν δε βρεις άκρη με την αντικατάσταση εικόνων, ένας άλλος τρόπος να πετύχεις το rollover είναι να υπάρχουν και τα δύο states στο markup, το ένα πάνω από το άλλο, και στο mouseover να αλλάζει η visibility του πρώτου. Αυτό δημιουργεί ένα νέο πρόβλημα, σε ποιο από τα δύο elements να μπει το mouseover. Η σίγουρη λύση είναι ένα τρίτο element πάνω από τα άλλα δύο, που να περιέχει μόνο ένα εντελώς διαφανές gif.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης