2010-05-01 3 views
3

В хромированном, сафари и опере настройка фонового изображения на абсолютную ссылку, например: «/images/image.png», изменяет ее на «http://sitepath/images/image.png».Настройка фонового изображения с помощью javascript

Это не делает это в firefox.

Есть ли способ избежать такого поведения, или он написан в JavaScript-браузере? Использование jquery для установки фонового изображения также делает эту проблему.

Проблема в том, что я отправляю HTML в PHP-скрипт, который нуждается в URL-адресах в этом конкретном формате. Я знаю, что установка пути к пути изображения исправляет это, но я не могу этого сделать.

Единственной альтернативой может быть использование регулярного выражения. для преобразования URL-адресов.

Спасибо.

Test это светлячок, и хром/WebKit браузер:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 
<body> 
<div style="height:400px;width:400px;background-image:url(/images/images/logo.gif);"> 
</div> 
<br /> 
<br /> 
<div id="test" style="height:400px;width:400px;"> 
</div> 
<script type="text/javascript" src="/javascripts/jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#test").css('background-image',"url(/images/images/logo.gif)"); 
     alert(document.getElementById('test').style.backgroundImage); 
    }); 
</script> 
</body> 
</html> 
+1

Лично я не стал бы полагаться на то, как это в первую очередь. Я попробовал 4 браузера, и все они дали немного другой результат. – goat

ответ

2

Не уверен exacly, как вы кладете это место в документе, но вы можете использовать window.location.hostname, чтобы получить домен и предварять это.

var bgImg = window.location.hostname + '/images/images/logo.gif'; 
$("#test").css('background-image', 'url('+bgImg+')'); 

Вы бы заменить /images/images/logo.gif с однако вы создаете образ (на стороне сервера, я думаю?)

2

Лучше было бы изменить классы по этому вопросу, так что новый класс изменил имидж на что бы вы ни хотели. Что-то вроде:

$("#test").addClass("newClass"); 

Это намного более чистый подход, который ухудшит качество и позволит правильно разделить проблемы.

Если вам нужно придерживаться изменяющегося встроенного CSS, вам нужно будет использовать абсолютную ссылку, чтобы сохранить ее во всех браузерах.

$("#test").css("background", "url(" + window.location.hostname + "/logo.gif)"); 
+0

needs '') в url – CoR

+0

Спасибо, я исправил его. – sohtimsso1970

+0

Это действительно лучшее решение, поскольку оно не только устраняет проблемы с относительными и абсолютными путями, но также дает лучшее разделение проблем. – lanoxx

-1
$('#divID').css("background-image", "url(/myimage.jpg)"); 
Смежные вопросы