Javascript оразмеряващ background?

K

Kavhann

Registered
Здравейте имам следния въпро към вас.

Имам страничка в чиито CSS съм дефинирал следното:

Код: 
body {
	background:url(images/background.jpg) top center no-repeat #867a58;
}

Снимката background.jpg, която зареждам обаче е големичка -> 2000 x 1000 px. И тук идва следния проблем. Ако отворя страницата с резолюция например: 800 х 600, картинката ще бъде отрязана и ще се изобрази само част от нея, а именно площ 800 х 600 px, което е около 24% от цялото изображение. Ако отворя страницата с резолюция 1200 х 600 px ще се изобрази по голяма част от преди, но отново голяма част от background.jpg ще бъде изрязана.

Въпрос: Можете ли да ми дадете примерен javascript, който да проверява резолюцията на потребителския браузър и да оразмярява background.jpg спрямо него?

Благодаря предварително.
 
Kavhann каза:
Здравейте имам следния въпро към вас.

Имам страничка в чиито CSS съм дефинирал следното:

Код: 
body {
	background:url(images/background.jpg) top center no-repeat #867a58;
}

Снимката background.jpg, която зареждам обаче е големичка -> 2000 x 1000 px. И тук идва следния проблем. Ако отворя страницата с резолюция например: 800 х 600, картинката ще бъде отрязана и ще се изобрази само част от нея, а именно площ 800 х 600 px, което е около 24% от цялото изображение. Ако отворя страницата с резолюция 1200 х 600 px ще се изобрази по голяма част от преди, но отново голяма част от background.jpg ще бъде изрязана.

Въпрос: Можете ли да ми дадете примерен javascript, който да проверява резолюцията на потребителския браузър и да оразмярява background.jpg спрямо него?

Благодаря предварително.
Увеличете...
До колкото разбрах имаш нужда от нещо такова, само че мисля, че картинката ти за фона трябва да е в индекса, не в css-a.

Код: 
<script type="text/javascript">
var theimg=document.getElementById('ID-то_на_картинката');
if (screen.width>=1280)
{
theimg.width="1280";
theimg.height="1024";
}
else if (screen.width>=980)
{
theimg.width="980";
theimg.height="800";
}
else ... и т.н.
</script>
screen.width е цялата ширина на монитора
screen.height е цялата височина
screen.availWidth е видимата ширина на браузъра
screen.availHeight е видимата височина
Нещо ако не е ясно - питай.
 
С javascript не става да се оразмеряват картинките . Поне това е до колкото знам,но не съм чувал оразмеряване с javascript. Можеш да използваш друга хитринка, за резолюцията 600 не говорим , защото вече никой не пшрави за такава резолюция.Та можеш да си направиш ти там екартинакта на бекграунд да и зададеш да е центрирана и просто при по-малка резолюция ще се вижда среданта чазс, но урязано, при по-големи резолюции ще се вийда по голяма част.
 
Всъщност!!!

Ако сменя размера на картинката background рискувам да получа несъразмерно изображение на целия фон на сайта...грозно. Затова реших че ще е най добре да вложа скрипт, който в зависимост от резолюцията на потребителя да избира един измежду списък от background-и и той да се изобразява на монитора на потребителя. Background-a принадлежи на style-a на бодито.

Имате ли идея как би могло да стане това?

Благодаря.
 
Реших проблема, а ето го и кода.

В отделен файл bg.js имам следното:

Код: 
if (screen.width <= 640) {
	document.body.style.background='url(./images/background1.jpg)';
	document.body.style.backgroundPosition='top center';
	document.body.style.backgroundRepeat='no-repeat';	
	document.body.style.backgroundColor='#867a58';
}
else if (screen.width <= 800 & screen.width > 640) {
	document.body.style.background='url(./images/background2.jpg)';
	document.body.style.backgroundPosition='top center';
	document.body.style.backgroundRepeat='no-repeat';	
	document.body.style.backgroundColor='#867a58';
}
else if (screen.width <= 1280 & screen.width > 800) {
	document.body.style.background='url(./images/background.jpg)';
	document.body.style.backgroundPosition='top center';
	document.body.style.backgroundRepeat='no-repeat';	
	document.body.style.backgroundColor='#867a58';
}
else {
	document.body.style.background='url(./images/background.jpg)';
	document.body.style.backgroundPosition='top center';
	document.body.style.backgroundRepeat='no-repeat';	
	document.body.style.backgroundColor='#867a58';	
}


В index.php или където вие си решите СЛЕД тага <BODY> - се зарежда горния скрипт:

Код: 
<script type="text/javascript" src="./java/bg.js"></script>

Идеята е проста. След <body> зареждаме bg.js от папката java. В този файл имаме кода по горе. Какво прави той? Проверява резолюцият на потребителя и избира подходяща снимка за background. Така всички са щастливи...надявам се. Ако има пробойни в кода пишете.

Хубав ден ;), жалко че не мога да си дам точка за това.

До скоро пак.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе