Start Page, Страница На Js

MrRockchip · 08.04.2012

Добрый день ! Помогите пожалуйста сделать Start Page на JavaScript . Приложил картинку как это должно выглядеть, при нажатии на правую кнопку меняется фон , при нажатии левой переадресация на др страницу .
Также дело в том, что желательно сделать привязку к картинке ( если у человека маленький экран то картинки будут меньше и кнопки тоже должны уменьшиться .
Пробовал сделать, но нечего не вышло, поскольку не знаю, как сделать так чтобы кнопка с картинкой были привязаны и как сделать, чтобы кнопка была выставлена по пиксельной позиции а не по команде centr и т.д.

Размер изображения 1920х1080 размер каждой кнопки ~ 360х180 .
Координаты кнопок : Первая кнопка ( слева относительно страницы ) верхний левый угол кнопки - y: 400 x: 90 нижний правый угол - y: 630 x: 450 ,
Вторая кнопка ( справа относительно страницы ) верхний левый угол кнопки y: 400 x: 1220 нижний правый угол - y: 630 x: 1580

Bugnet · 08.04.2012

Непонятно чего хотите на самом деле. Если размер изображения фиксированный и больше чем разрешение экрана, то о каком фоне идёт речь?
У меня разрешение сейчас на компе 1280х1024 и картинка не влезет если задать и body такого же размера. Кнопки - аналогично.
Чтобы картинки менялись в размерах относительно экрана - размер необходимо задавать в процентах. Чтобы фон был виден, то размер большой картинки должен быть меньше 100%. На левую кнопку вешаете просто ссылку на нужную страницу, на правую - клик по которому меняется фон страницы. Положение и размер картинок также непонятны. А если разрешение 800х600 ?

Вы записали ряд противоречивых требований ...

MrRockchip · 09.04.2012

Я имел в виду что картинка будет привязана к размеру окна браузера . то есть для вашего экрана она уменьшится . я указал размеры кнопок они будут прозрачными и по верх моего фона , чтобы было понятнее указал координаты в пиксилях на размере 1920 на 1080.

Bugnet · 09.04.2012

Всё равно много неясного. Если так, то выложу исходники:

Ссылка скрыта от гостей

Код:

<html >
<head>
<title>фон с кнопками</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="shortcut icon" href="images/favicon.ico" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/window.js"></script>
</head>
<body >
<a href="http://targetcraft.ru/home"><img src="images/leftbutton.png" id="leftbutton" /></a>
<img src="images/rightbutton.png" id="rightbutton" />
</body>
</html>

Размеры и положение кнопок привязаны к разрешению экрана (jquery-скрипт - с именем "window.js"):

PHP:

$(document).ready(function(){

var wScr = screen.width;
var hScr = screen.height;
var w1 = wScr / 8;
$('#leftbutton').attr('width',w1);
$('#leftbutton').attr('height',w1);
$('#leftbutton').css('top',w1);
$('#leftbutton').css('left',w1);
$('#rightbutton').attr('width',w1);
$('#rightbutton').attr('height',w1);
$('#rightbutton').css('top',w1);
$('#rightbutton').css('right',w1);

$('#rightbutton').toggle // двойной клик
(
function(){$('body').css({'background-image':'url(images/start2.png)'}) }, /*функция №1*/
function(){$('body').css({'background-image':'url(images/start1.png)'}) }	/*функция №2*/
);

});//End ready

Лист стилей

Код:

body {
margin 0 auto;
border: none;
width:100%;
background-image:url(/images/start1.png);
background-position:center; 
background-repeat: no-repeat; 
background-attachment: fixed;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
#leftbutton{
position: absolute;
top:200;
left:200;
cursor: pointer;
}
#rightbutton{
position:absolute;
top:200;
right:200;
cursor: pointer;
}

MrRockchip · 09.04.2012

Огромное спасибо за оказанную помощь !!! Но если это возможно - сделать так чтобы при изменении размеров окна кнопки как и картинка на заднем плане сжимались одновременно и как одно целое и двигались только относительно сжатию картинки ( если к примеру взять данную демо страницу то при сжатии они двигаются по горизонтали и только по центру страницы - а я хотел чтобы кнопки были на месте и некуда не двигались с позиции по отношению к картинке пока окно браузера не станет изменятся ( то есть если окно браузера сжимается и вместе с этим картинка и кнопки )), ещё хочу добавить что если на жать на правую кнопку она может нажаться только один раз .
Буду очень благодарен если вы окажите ещё маленькую помощь !

Bugnet · 09.04.2012

Очень плавно и пропорционально не получится, скорее всего. Я в примере использую метод изменения размера окна $(window).resize(function(){...., а размер может быть любой и + нужно время на отработку скрипта. В скрипте я ширину и высоту окна поделил на 7 (это чтобы по быстрому), а вообще-то нужно посчитать и посмотреть. Но даже так виден результат :

Ссылка скрыта от гостей

. Учите jQuery, это легко смотрите

Ссылка скрыта от гостей

.

В код скрипта window.js добавил ещё несколько строк:

Код:

$(window).resize(function(){
var izmW = $(document).width();
var izmH = $(document).height();

var izmW = izmW/7;
$('#leftbutton').attr('width',izmW);
$('#leftbutton').css('left',izmW);
$('#rightbutton').attr('width',izmW);
$('#rightbutton').css('right',izmW);

var izmH = izmH/7;
$('#leftbutton').attr('height',izmH);
$('#leftbutton').css('top',izmH);
$('#rightbutton').attr('height',izmH);
$('#rightbutton').css('top',izmH);

});//END resize

Если помог плюсуйте репутацию.

MrRockchip · 09.04.2012

Да да именно так при изменении размера окна вот только кнопки немного выше становятся =( . Добавь меня к себе в скайп я тебе скину картинку которая будет может так легче будет помочь мне .

Bugnet · 09.04.2012

Нет уж - это без меня. Скайпом не пользуюсь. Я дал "удочку" ловите "рыбку" сами. Я уже сказал, что поделил на 7, а вы подберите (посчитайте) отдельно переменную позиционирования по высоте для

Код:

$('#leftbutton').css('top',izmH);
$('#rightbutton').css('top',izmH);

Например так
var topizmH = izmH *1,1; // отступ сверху увеличил в 1,1 раза

Код:

$('#leftbutton').css('top',topizmH);
$('#rightbutton').css('top',topizmH);

MrRockchip · 09.04.2012

Может хотябы чуток поможешь и буду очень очень очень благодарен =))) приложил картинку точно идентичную фону - кнопки на самом деле будут прозрачными =)))))

Добавлено: Если я тебя всё ещё не сильно напрягаю ты бы не мог объединить то что ты добавил и то что было до этого в одно целое ?

Bugnet · 10.04.2012

Прежде чем читать пост - кликай за каждый полезный совет "+" в репутацию пользователя
Ну

Ссылка скрыта от гостей

. Идеально не выходит, но приблизительно. Оставил нарисованные кнопки - чтобы отследить перемещение "реальных" кнопок. Есть и проблемное место- если окно уменьшить, а потом перегрузить, то сработает участок кода, который отвечает за первоначальное местоположение кнопок. Думаю, это не проблема - немногие будут так "насиловать" страничку.
Код скрипта такой:

Код:

$(document).ready(function(){

var wScr = screen.width;
var hScr = screen.height;
var w1 = wScr/5.8;
var h1 = hScr/9;
var hTOP = hScr/2.71;
var wLR = wScr/10.8;

$('#leftbutton').attr('width',w1);
$('#leftbutton').attr('height',h1);
$('#leftbutton').css('top',hTOP);
$('#leftbutton').css('left',wLR);
$('#rightbutton').attr('width',w1);
$('#rightbutton').attr('height',h1);
$('#rightbutton').css('top',hTOP);
$('#rightbutton').css('right',wLR);

$('#rightbutton').toggle // двойной клик
(
function(){$('body').css({'background-image':'url(images/fon2.jpg)'}) }, /*функция №1*/
function(){$('body').css({'background-image':'url(images/fon1.jpg)'}) }  /*функция №2*/
);//END toogle

$(window).resize(function(){
var wScr = $(document).width();
var hScr = $(document).height();
var w1 = wScr/5.8;
var h1 = hScr/9;
var hTOP = hScr/2.2;
var wLR = wScr/10.8;

$('#leftbutton').attr('width',w1);
$('#leftbutton').attr('height',h1);
$('#leftbutton').css('top',hTOP);
$('#leftbutton').css('left',wLR);
$('#rightbutton').attr('width',w1);
$('#rightbutton').attr('height',h1);
$('#rightbutton').css('top',hTOP);
$('#rightbutton').css('right',wLR);

});//END resize


});//End ready

MrRockchip · 10.04.2012

~~Да вот дело тоже в этом , кликаю тебе на плюс а он не плюсуется~~ < после этого текста у меня сразу получилось плюсануть возможно тут стоит запрет на плюсы от юзеров у которых сообщений менее ... кол-ва . Я очень тебе благодарен , если есть какие ещё способы поблагодарить тебя может плюсануть где нибудь ещё и т.д. ты скажи я сделаю =)

MrRockchip · 10.04.2012

Слушай, а ты случайно не знаешь как поместить этот код на главную страницу Joomla 2.5 ? А то не получается найти, как там код страницы редактировать.

(и, на будущее: сложно ли этот код перевести на PHP)

Bugnet · 10.04.2012

С Joomla я не в курсе, установил как-то с ознакомительной целью. На PHP это перевести невозможно. PHP не для этого создан, это серверный язык и ему "по-барабану", что пользователь делает со своим браузером. Даже если отвлечься и пофантазировать - то не рационально подобное, "каждое движение мышки" отправлять на обработку на сервер, при этом страница перегружается заново.

MrRockchip · 10.04.2012

А может на html будет проще ?

Все сервисы Codeby

Поиск

Поиск

Start Page, Страница На Js

MrRockchip

Вложения

Bugnet

MrRockchip

Bugnet

MrRockchip

Bugnet

MrRockchip

Bugnet

MrRockchip

Bugnet

MrRockchip

MrRockchip

Bugnet

MrRockchip