Полностью настраиваемый макет? - PullRequest
Новая
       9

Полностью настраиваемый макет?

0 голосов
/ 05 июля 2011

Можно ли сделать полностью настраиваемый макет сайта?Предпочтительно в javascript / dhtml, если это возможно.Я играю в крота и хочу, чтобы пользователи могли размещать дыры, в которых родинки выходят из любой точки веб-страницы.Мой текущий код неаккуратен, так как я просто экспериментирую, как это сделать, но мой текущий код 

<html>

<body>

<!--CURSOR-->
<style type="text/css">
body, a, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-5/oth438.cur),
progress;}
</style>

<!--BACKGROUND-->
<body background = "http://i52.tinypic.com/34e9ekj.jpg">

<!--COUNTER(needs to be implemnted)-->
<b><center><font size="5"><div id='counter'>0</div></font></center><b>

<!--TITLE-->
<b><center><i>Whack-A-Mole</i> - by Steven</center></b>

<!--HOLE IMAGES START HERE-->

<!--Hole 1 Row 1-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:33px;margin-top:3px;position:absolute"/>

<!--Hole 2 Row 1-->
<img src="http://i51.tinypic.com/sxheeo.gif" style="margin-left:350px;margin-top:3px;position:absolute"/>

<!--Hole 3 Row 1-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:700px;margin-top:3px;position:absolute"/>

<!--Hole 4 Row 2-->
<img src="http://i51.tinypic.com/sxheeo.gif" style="margin-left:33px;margin-top:160px;position:absolute"/>

<!--Hole 5 Row 2-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:350px;margin-top:160px;position:absolute"/>

<!--Hole 6 Row 2-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:700px;margin-top:160px;position:absolute"/>

<!--Hole 7 Row 3-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:33px;margin-top:310px;position:absolute"/>

<!--Hole 8 Row 3-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:350px;margin-top:310px;position:absolute"/>

<!--Hole 9 Row 3-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:700px;margin-top:310px;position:absolute"/>
<!--HOLE IMAGES END HERE-->

<!--MOLE DIVS START HERE-->

<!--Mole 1 Row 1-->
<div id="randomdiv1" 
class="mole">
<img src="http://i56.tinypic.com/2i3tyw.gif" style="margin-left:33px;margin-top:3px;position:absolute"/>
</div>

<!--Mole 2 Row 1-->
<div id="randomdiv2" 
class="mole">
<img id="Mole1" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:350px;margin-top:3px;position:absolute"/>
</div>

<!--Mole 3 Row 1-->
<div id="randomdiv3" 
class="mole">
<img id="Mole2" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:700px;margin-top:3px;position:absolute"/>
</div>

<!--Mole 4 Row 2-->
<div id="randomdiv4" 
class="mole">
<img id="Mole3" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:33px;margin-top:160px;position:absolute"/>
</div>

<!--Mole 5 Row 2-->
<div id="randomdiv5" 
class="mole">
<img id="Mole4" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:350px;margin-top:160px;position:absolute"/>
</div>

<!--Mole 6 Row 2-->
<div id="randomdiv6" 
class="mole">
<img id="Mole5" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:700px;margin-top:160px;position:absolute"/>
</div>

<!--Mole 7 Row 3-->
<div id="randomdiv7" 
class="mole">
<img id="Mole6" src="http://i56.tinypic.com/2i3tyw.gif" style="margin-left:33px;margin-top:310px;position:absolute"/>
</div>

<!--Mole 8 Row 3-->
<div id="randomdiv8" 
class="mole">
<img id="Mole8" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:350px;margin-top:310px;position:absolute"/>
</div>

<!--Mole 9 Row 3-->
<div id="randomdiv9" 
class="mole">
<img id="Mole9" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:700px;margin-top:310px;position:absolute"/>
</div>
</body>

<!--MOLE DIVS END HERE-->

<head>

<script type="text/javascript" language="JavaScript">

<!--
// Type the number of div containers to randomly display below.

NumberOfDivsToRandomDisplay = 9;

var CookieName = 'DivRamdomValueCookie';
function DisplayRandomDiv() {
var r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay);
if(NumberOfDivsToRandomDisplay > 1) {
   var ck = 0;
   var cookiebegin = document.cookie.indexOf(CookieName + "=");
   if(cookiebegin > -1) {
      cookiebegin += 1 + CookieName.length;
      cookieend = document.cookie.indexOf(";",cookiebegin);
      if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
      ck = parseInt(document.cookie.substring(cookiebegin,cookieend));
      }
   while(r == ck) { r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay); }
   document.cookie = CookieName + "=" + r;
   }
for( var i=1; i<=NumberOfDivsToRandomDisplay; i++) {
   document.getElementById("randomdiv"+i).style.display="none";
   }

<!--Make counter +1 on mole click-->

document.getElementById("randomdiv"+r).onclick = function() {
            counter.innerHTML = parseInt(counter.innerHTML) + 1;
        }
document.getElementById("randomdiv"+r).style.display="block";
}

<!--Make moles pop up randomly on a timer-->
DisplayRandomDiv()
setInterval("DisplayRandomDiv()",(Math.random()*500) + 1000);
//-->
</script>

</head>

</html>

Я не уверен, возможно ли это вообще или нет, но, может, и такпросить.:) Спасибо!

1 Ответ

1 голос
/ 05 июля 2011

Да, это возможно.Вы можете добавить несколько элементов на страницу, а затем разместить их в любом месте.Вам нужно обратить внимание на проблемы с z-индексом, чтобы убедиться, что ваши родинки находятся на вершине и могут быть выбиты.

Вы хотите присвоить каждой дырке (уникальный) атрибут id, чтобы сделать их легкимидля ссылки.Затем вам нужно просто установить для них значение position:absolute и добавить свойства CSS top и left, чтобы разместить их там, где вы хотите.Кстати, поля на абсолютно позиционированных элементах не делают ничего полезного, потому что :

Полностью удаляется из обычного потока (это не влияет на более поздних братьев и сестер).Абсолютно позиционированный блок устанавливает новый содержащий блок для дочерних элементов нормального потока и абсолютно (но не фиксированных) потомков.Однако содержимое абсолютно позиционированного элемента не обтекает никакие другие поля.

Поэтому избавьтесь от полей и используйте top и left, чтобы расположить элементы <img> там, где выхотите их.

Возможно, вы захотите использовать JavaScript для позиционирования своих отверстий, что упростит учет переменных размеров страниц.

...