更換圖像擴展，從png格式爲.gif在飛行

所以，我爲了在我的網站設計，創造側邊欄框正在使用CSS3去，這個工程很好，很正常。使用http://css3pie.com爲了在IE中創建效果。更換圖像擴展，從png格式爲.gif在飛行

再一次，很好，花花公子。現在，說到我的問題 -

對於每一個相對定位模塊，可能是在它絕對定位的圖標，它被設置爲被頂：爲了給它一個彈出效果-20px。顯然，這在IE6中不起作用，並且它對任何PNG修復代碼都不起作用。

然而，對於IE6用戶，我可以切換到低品質的GIF相反，他們可以對付它。

現在，我的問題是，我怎麼能管理到現場開關image.png如果用戶使用的是IE6到Image.gif的？

我還沒有找到這個想法的合理解決方案。我可以使用IE6樣式表來替換圖像 - 但是有幾種情況下圖像不應該是基於CSS的。他們應該是適當的圖像。

有什麼建議嗎？我想要一些jQuery替換，但我還沒有找到合適的解決方案。

來源

2010-07-20 Paul

有幾種解決方案可能最簡單的方法是創建一個jQuery函數，當用戶切換到低網站時（通過鏈接），或者您代表他們（通過標題或條件註釋）來確定這個函數。

jQuery的功能，可以利用屬性選擇，使生活更輕鬆。

function switch_to_low_fi() { 
     $('img[src$=".png"]').each(function(index,element) { 
      element.src = element.src.replace('.png','.gif'); 
     }); 
}

要切換CSS背景，我會建議他們分級與degrade或類似的東西來創建jQuery的鉤子，然後做與上述類似的東西。

 $('.degrade').each(function(index,element) { 
      element = $(element); 
      var background = element.css('background-image'); 
      background = background.replace('.png','.gif'); 
      element.css('background-image', background); 
     });

當然，您將需要修改上面的代碼基於您的標記，但這應該讓你開始。

來源

2010-07-20 21:20:13

'element'是一個裸露的DOM對象，因此您需要執行'$（element）.css（'background-image'）;'儘管可以很好地使用屬性選擇器。 – jasongetsdown 2010-07-20 21:32:39

@jasongetsdown，謝謝。我已經更新了第二部分。 – 2010-07-20 23:02:41

你錯過了第2行:) – jasongetsdown 2010-07-20 23:57:28

這應該在網頁上的所有非CSS圖像的工作：

// when DOM is loaded 
jQuery(document).ready(function(){ 
    // and browser is MSIE 6 or lower 
    if (jQuery.browser.msie && jQuery.browser.version <= 6) { 
     // go through every IMG 
     jQuery('img').each(function(index,element){ 
      // if there's a .png in the source, I'll assume it's at the end 
      // (of course, more complex test could be made) ... 
      if (element.src.indexOf('.png') != -1) { 
       // ...and replace it with a GIF version 
       element.src = element.src.replace('.png','.gif'); 
      } 
     }); 
    } 
});

來源

2010-07-20 21:14:24 Piskvor

這是可行的，但是有條件的註釋比'如果（jQuery.browser.msie && jQuery.browser.version <= 6）' – 2010-07-20 21:19:16

@Josh更好Stodola：好點。JScript條件註釋是否有測試瀏覽器版本的功能，或者您是否需要手動檢查版本？ – Piskvor 2010-07-20 21:25:39

是的，你可以，那是他們的主要目的。只有IE認可;不是一個標準。更多信息在這裏：http：//www.quirksmode.org/css/condcom.html – 2010-07-21 00:40:29

您可以在CSS中使用PHP代碼知道正在使用的瀏覽器：

<?php 
$useragent = $_SERVER[‘HTTP_USER_AGENT’]); 
if (preg_match(‘|MSIE ([0-9].[0-9]{1,2})|’,$useragent,$matched)) { 
    $browser_version=$matched[1]; 
    $browser = ‘IE’; 
    echo ... ;//css selector for Internet Explorer and so on... 
} elseif (preg_match(‘|Opera ([0-9].[0-9]{1,2})|’,$useragent,$matched)) { 
    $browser_version=$matched[1]; 
    $browser = ‘Opera’; 
} elseif(preg_match(‘|Firefox/([0-9\.]+)|’,$useragent,$matched)) { 
    $browser_version=$matched[1]; 
    $browser = ‘Firefox’; 
} elseif(preg_match(‘|Safari/([0-9\.]+)|’,$useragent,$matched)) { 
    $browser_version=$matched[1]; 
    $browser = ‘Safari’; 
} else { 
// browser not recognized! 
$browser_version = 0; 
$browser= ‘other’; 
} 
?>

來源

2010-07-20 21:19:01 siannone

你想知道如何替換元素或如何獲取瀏覽器/版本？

jQuery有兩個設施。

獲取瀏覽器非常簡單。只需使用jQuery.browser。

要更改圖像將需要CSS與<img>不同的方法。設置一切使用PNG的，然後做一些事情，如：

if (useGIF()) { 
    var src; 
    $('img').each(function() { 
     src = $(this).attr('src'); 
     $(this).attr('src', src.substr(0, src.length-3) + 'gif'); 
    }; 
    $('.has_bg_png').each(function() { 
     src = $(this).css('background-image'); 
     $(this).css('background-image', src.substr(0, src.length-3) + 'gif'); 
    }; 
}

來源

2010-07-20 21:26:37 jasongetsdown

更換圖像擴展，從png格式爲.gif在飛行

回答

相關問題