2013-07-10 2 views
-1

Я пытаюсь добавить на свой сайт возможность, где фон будет меняться в зависимости от части URL-адреса, используя таблицы стилей.Изменить фоновое изображение на основе URL-адресов

Пример:

address/shop/index.php    = background image 1 
address/shop/index.php?cPath=22 = background image 2 
address/shop/index.php?cPath=23 = background image 3 
address/shop/index.php?cPath=24 = background image 4 

Любые идеи? Я посмотрел Javascript и jQuery, но не уверен, на каком выбрать или как это сделать.

+2

изменить класс '' (или любой другой элемент вы хотите изменить фон) для сгенерированного html. И имеют разные фоны для разных классов. – zerkms

ответ

-1

на вашей HTML странице внутри типа тела тега:

<body background="your file"> 

</body> 

Вы можете сделать это на каждой странице, которую вы хотите другой фон, и он будет переопределить любой стиль CSS, что стили тела

+6

Это ужасный совет. – zerkms

+0

@zerkms это работало для меня на каждом веб-сайте, который я когда-либо разрабатывал, и устраняет необходимость в php или jquery, которая тяжела на DOM ... не вижу ничего ужасного в что – samrap

+0

вы можете съесть свой суп с вилкой и руками - это сработает, но использовать ложку удобнее. PS: и прояснить - это не я, который вас ниспровергает (хотя я согласен, что этот ответ заслуживает этого :-) – zerkms

3

It похоже, что вы используете PHP, поэтому вы должны иметь возможность сделать это без javascript. Вам просто нужно использовать переменные сервера PHP.

Что-то вроде

$cPath = $_GET['cPath']; //This allows access to the query part of the url 
if($cPath == 24){ 
    //set background url 
} 
+0

$ cPath = $ _GET ['cPath']; // Это позволяет получить доступ к части запроса в URL если ($ cPath == 23) { } установить фон: URL (WoodenPlank.jpg) } – user2570459

+0

$ cPath = $ _GET [ 'cPath']; // Это позволяет получить доступ к части запроса url if ($ cPath == 23) { $ bg = 'фон: # 000 url (WoodenPlank.jpg);'; } – user2570459

0

Вы всегда можете позволить часть URL в окружении тега, например, <font> Так что код будет как:

<a>your url link 
    <font class='background1'>part with background1</font> 
    <font class='background2'>part with background2</font> 
</a> 

Тогда в CSS вы можете иметь

.background1{background: url('...')} 
.background2{background: url('...')} 

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

0

Если вы действительно хотите сделать это на стороне клиента, я предлагаю:

var pageBackground = { 
    'default' : 'classOne', 
    '22' : 'classTwo', 
    '23' : 'classThree' 
}; 

document.body.className = pageBackground[window.location.split('cPath=')[1] || 'default']; 

В сочетании с таблицей стилей:

body.classOne { 
    background-image: url(path/to/defaultImage.png); 
} 
body.classTwo { 
    background-image: url(path/to/imageTwo.png); 
} 
body.classThree { 
    background-image: url(path/to/imageThree.png); 
} 
+0

Будет ли это работать с файлом php? первый раздел .. – user2570459

+0

Пока JavaScript добирается до браузера клиента, он должен работать, да. –

Смежные вопросы