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

  • Автор темы Автор темы MrRockchip
  • Дата начала Дата начала
M

MrRockchip

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

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

Вложения

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

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


Код: 
<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;
}
 
Огромное спасибо за оказанную помощь !!! Но если это возможно - сделать так чтобы при изменении размеров окна кнопки как и картинка на заднем плане сжимались одновременно и как одно целое и двигались только относительно сжатию картинки ( если к примеру взять данную демо страницу то при сжатии они двигаются по горизонтали и только по центру страницы - а я хотел чтобы кнопки были на месте и некуда не двигались с позиции по отношению к картинке пока окно браузера не станет изменятся ( то есть если окно браузера сжимается и вместе с этим картинка и кнопки )), ещё хочу добавить что если на жать на правую кнопку она может нажаться только один раз .
Буду очень благодарен если вы окажите ещё маленькую помощь !
 
Очень плавно и пропорционально не получится, скорее всего. Я в примере использую метод изменения размера окна $(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
Если помог плюсуйте репутацию.
 
Да да именно так при изменении размера окна вот только кнопки немного выше становятся =( . Добавь меня к себе в скайп я тебе скину картинку которая будет может так легче будет помочь мне .
 
:( Нет уж - это без меня. Скайпом не пользуюсь. Я дал "удочку" ловите "рыбку" сами. Я уже сказал, что поделил на 7, а вы подберите (посчитайте) отдельно переменную позиционирования по высоте для

Код: 
$('#leftbutton').css('top',izmH);
$('#rightbutton').css('top',izmH);

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

Код: 
$('#leftbutton').css('top',topizmH);
$('#rightbutton').css('top',topizmH);
 
Может хотябы чуток поможешь и буду очень очень очень благодарен =))) приложил картинку точно идентичную фону - кнопки на самом деле будут прозрачными =)))))
43534534534675.jpg

Добавлено: Если я тебя всё ещё не сильно напрягаю ты бы не мог объединить то что ты добавил и то что было до этого в одно целое ? :(
 
Прежде чем читать пост - кликай за каждый полезный совет "+" в репутацию пользователя
Ну
Ссылка скрыта от гостей
. Идеально не выходит, но приблизительно. Оставил нарисованные кнопки - чтобы отследить перемещение "реальных" кнопок. Есть и проблемное место- если окно уменьшить, а потом перегрузить, то сработает участок кода, который отвечает за первоначальное местоположение кнопок. Думаю, это не проблема - немногие будут так "насиловать" страничку.
Код скрипта такой:

Код: 
$(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
 
Да вот дело тоже в этом , кликаю тебе на плюс а он не плюсуется ;) < после этого текста у меня сразу получилось плюсануть возможно тут стоит запрет на плюсы от юзеров у которых сообщений менее ... кол-ва . Я очень тебе благодарен , если есть какие ещё способы поблагодарить тебя может плюсануть где нибудь ещё и т.д. ты скажи я сделаю =)
 
Слушай, а ты случайно не знаешь как поместить этот код на главную страницу Joomla 2.5 ? А то не получается найти, как там код страницы редактировать. :o
(и, на будущее: сложно ли этот код перевести на PHP)
 
С Joomla я не в курсе, установил как-то с ознакомительной целью. На PHP это перевести невозможно. PHP не для этого создан, это серверный язык и ему "по-барабану", что пользователь делает со своим браузером. Даже если отвлечься и пофантазировать - то не рационально подобное, "каждое движение мышки" отправлять на обработку на сервер, при этом страница перегружается заново.
 
Для ответа нужно войти/зарегистрироваться
Мы в соцсетях:

Обучение наступательной кибербезопасности в игровой форме. Начать игру!

Верх Низ