gyrobreaker/funtemp

## funtemp
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
html,body{
margin: 0px;
padding: 0px;
height:888px;
width:700px;
background-image:url('https://file.garden/ZRss0m_MomIqlrCB/bgangel6.gif');
font-family: 'Perfect';
color:#260000;
text-align:justify;
letter-spacing:1px;
}
  a:link {
        color:#fff6e6;
        cursor: pointer;
      }

      a:visited {
        color: #fff6e6;
        cursor: pointer;
} /* change as needed.*/
@font-face {
  font-family: Perfect;
  src: url(https://gyrobreaka.neocities.org/fonts/BlueScreenPersonalUseRegular-0W1M9.ttf);
}
@font-face {
  font-family: LED;
  src: url(https://gyrobreaka.neocities.org/fonts/LEDLIGHT.otf);
}
h1 {
font-family: 'LED';
color:#fff6e6;
}
div.scroll {
margin:4px, 4px;
padding:4px;
width: 500px;
height: 330px;
overflow-x: hidden;
overflow-y: auto; /*edit scrollbar-x to make the style different. */
scrollbar-color: #e80000 #ff9e00;
scrollbar-width: thick;
} /* the buttons */
#click {
top:50px;
left:850px;
}
#click2 {
top:200px;
left:850px;
}
#click3 {
top:350px;
left:880px;
}/*button animation*/
.boxes > div {
background-image: linear-gradient(#ff7900, #ffb43a);
font-family: 'LED';
position:fixed;
border-radius:12px;
height: 90px;
width:280px;
border: 5px #750000 groove;
-webkit-transition: 1s ease-in-out;/* change seconds to speed up or slow animation.*/
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
  }
  .boxes > div.slideright:hover {
    -webkit-transform: translate(1.5em, 0);/*change the numbers before em to change how far the buttons move.*/
    -moz-transform: translate(1.5em, 0);
    -o-transform: translate(1.5em, 0);
    -ms-transform: translate(1.5em, 0);
    transform: translate(1.5em, 0);
} /*divider on the left.*/
#box1 {
font-size:20px;
width: 800px;
height: 800px;
border-top: 0;
margin-top: 0;
border: 40px solid transparent;
background-image:url('https://file.garden/ZRss0m_MomIqlrCB/dom2to.PNG');
border-image:url('https://file.garden/ZRss0m_MomIqlrCB/parade.jpg') 80 round;
background-clip:padding-box;
position: fixed;
border-radius:82px;
}
#header {/*image that changes when clicked.*/
width:800px;
height:440px;
}/* orange stuff surrounding text. */
#surround {
  background-image: linear-gradient(#ff7900, #ffb43a);
  padding: 5px;
}/* The typing effect */
.typewriter h1 {
  overflow: hidden;
  border-right: .15em groove white;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation:
    typing 4.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}
/*collapseable items. edit this if you want the collapseable bar to be different.*/
.collapsible {
background-image: linear-gradient(#ff7900, #ffb43a);
font-family: 'LED';
color:#fff6e6;
left: 1300px;
top:0px;
position:absolute;
width:350px;
}
.active, .collapsible:hover {
  background-image: linear-gradient(#ff4700, #ff9924);
}/* right div. if you set the left and top to something different than the .collapsible, you can make the image show up a different place than the button. */
.info {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  background-image:url('https://file.garden/ZRss0m_MomIqlrCB/bgcatblocks.gif');
  left: 1300px;
  top:0px;
  position:absolute;
  border: 4px inset white;
}
#pic { /*images you can drag.*/
position:absolute;
left: 1100px;
cursor: move;
z-index: 9;
top:90px;
}
#pic1 {
position:absolute;
left: 1400px;
cursor: move;
z-index: 9;
top:350px;
}
#pic2 {
position:absolute;
left: 888px;
cursor: move;
z-index: 9;
top:538px;
border: groove orange 4px;
}
</style>
<center>

<!-- buttons -->
<div class="boxes" id="click">
<div class="slideright" id="click">
<h1> <a href="x"> BACK </a> </h1>
</div>
</div>

<div class="boxes" id="click">
<div class="slideright" id="click2">
<h1> <a href="https://gist.github.com/gyrobreaker/e98e02c34862e229a4e763fbc9d5c221"> CODE </a> </h1>
</div>
</div>

<div class="boxes" id="click">
<div class="slideright" id="click3">
<h1> <a href="https://gyrobreaka.neocities.org/"> CREATOR </a> </h1>
</div>
</div>

<!-- left divider -->
<div id="box1" class="scroll">
<!-- pic that changes. edit as needed. you can change the image it clicks to if you scroll down to the js section. -->
<img id="header" src="https://file.garden/ZRss0m_MomIqlrCB/papeyes" onclick="changeImage()">
<div class="typewriter" id="surround">
<h1> Inside a Dream..... </h1>
</div>

<!--Change as you please! You can change the buttons to different pictures or make them normal text buttons too. Just remove everything between play/pauseaudio() and class="button", then delete the images and type Play/Pause or whatever you want.-->
  <audio id="myAudio">
  <source src="https://file.garden/ZRss0m_MomIqlrCB/onlymp3.to%20-%20Susumu%20Hirasawa%20The%20Girl%20In%20Byakkoya-21JuYIPHMF8-192k-1703116836.mp3" type="audio/ogg">
  <source src="https://file.garden/ZRss0m_MomIqlrCB/onlymp3.to%20-%20Susumu%20Hirasawa%20The%20Girl%20In%20Byakkoya-21JuYIPHMF8-192k-1703116836.mp3" type="audio/mpeg">
</audio>
<img src="https://file.garden/ZRss0m_MomIqlrCB/petri.pnj" width="50"> <!-- pic on the left side of the button.-->
<button onclick="playAudio()" type = "submit" name = "learn" value = "myimage" class="button"><img src="https://file.garden/ZRss0m_MomIqlrCB/play.png" width="50"></button>
<img src="https://file.garden/ZRss0m_MomIqlrCB/questionreality.pnj" width="50"> <!-- pic in the middle of the buttons.. -->
<button onclick="pauseAudio()"  type = "submit" name = "learn" value = "myimage" class="button"><img src="https://file.garden/ZRss0m_MomIqlrCB/pause.png" width="50"></button>
<img src="https://file.garden/ZRss0m_MomIqlrCB/petri.pnj" width="50"> <!-- pic on the right side of the button. -->

<div id="surround">
<h1 align="left"> WELCOME ~ </h1>
<img align="right" src="https://file.garden/ZRss0m_MomIqlrCB/parade.jpg" width="300">
<p align="left"> Hi. I've made another template! You can use this template by clicking the button on the side labeled "Code" or just viewing the page source. (￣ω￣)/* Hope U Enjoy ... Do as much as you want or as little as you want with this layout! Everything is marked with notes to make it less confusing. Credit isn't needed at all, but appreciated. I'd be happy to see what you create! Bye bye!  </p>
</div>
<Img src="https://file.garden/ZRss0m_MomIqlrCB/the%20girl%20in%20byakkoya.jpg" width="800">
</div>

<!-- right div -->
<button class="collapsible"><marquee behavior="alternate"> <h1> OPEN </H1> </marquee> </button>
<div class="info">
  <h1 id="surround"> Chiba </h1>
<img src="https://file.garden/ZRss0m_MomIqlrCB/chiba.gif" width="200">
<h1 id="surround"> info </h1>
<p id="surround"> <i> All Chibas are powered by autism in their own unique way. </i> </p>
</div>
<!-- dragged pictures. -->
<img id="pic" src="https://file.garden/ZRss0m_MomIqlrCB/luckycat.png" width="200">
<img id="pic1" src="https://file.garden/ZRss0m_MomIqlrCB/jesting.pnj" width="300">
<img id="pic2" src="https://file.garden/ZRss0m_MomIqlrCB/paprika.jpg" width="500">
</center>

<!-- JS -->

<!--scrolling title text -->
<script>
 (function titleScroller(text) {
    document.title = text;
    console.log(text);
    setTimeout(function () {
        titleScroller(text.substr(1) + text.substr(0, 1));
    }, 500);
}("The Dream World ")); // EDIT TO CHANGE THE TITLE
</script>

<!-- collapsible items -->
<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
</script>

<!-- The image changing aspect of the header. "Papeyes" is the image that first shows up, "Chiba" is the one that appears when clicked. Edit as wished. -->
<script>
function changeImage() {
    if (document.getElementById("header").src == "https://file.garden/ZRss0m_MomIqlrCB/papeyes"){
        document.getElementById("header").src = "https://file.garden/ZRss0m_MomIqlrCB/chiba2.gif";
    } else {
        document.getElementById("header").src = "https://file.garden/ZRss0m_MomIqlrCB/papeyes";
    }
}
</script>
<!--audio-->
<script>
var x = document.getElementById("myAudio");

function playAudio() {
  x.play();
}

function pauseAudio() {
  x.pause();
}
</script>

<!-- drag function -->
<script>
//pic
dragElement(document.getElementById("pic"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "image")) {
    /* if present, the img is where you move the DIV from:*/
    document.getElementById(elmnt.id + "image").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

<script>
//pic1
dragElement(document.getElementById("pic1"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "image")) {
    /* if present, the img is where you move the DIV from:*/
    document.getElementById(elmnt.id + "image").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

<script>
//pic2
dragElement(document.getElementById("pic2"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "image")) {
    /* if present, the img is where you move the DIV from:*/
    document.getElementById(elmnt.id + "image").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	html,body{
	margin: 0px;
	padding: 0px;
	height:888px;
	width:700px;
	background-image:url('https://file.garden/ZRss0m_MomIqlrCB/bgangel6.gif');
	font-family: 'Perfect';
	color:#260000;
	text-align:justify;
	letter-spacing:1px;
	}
	a:link {
	color:#fff6e6;
	cursor: pointer;
	}

	a:visited {
	color: #fff6e6;
	cursor: pointer;
	} /* change as needed.*/
	@font-face {
	font-family: Perfect;
	src: url(https://gyrobreaka.neocities.org/fonts/BlueScreenPersonalUseRegular-0W1M9.ttf);
	}
	@font-face {
	font-family: LED;
	src: url(https://gyrobreaka.neocities.org/fonts/LEDLIGHT.otf);
	}
	h1 {
	font-family: 'LED';
	color:#fff6e6;
	}
	div.scroll {
	margin:4px, 4px;
	padding:4px;
	width: 500px;
	height: 330px;
	overflow-x: hidden;
	overflow-y: auto; /edit scrollbar-x to make the style different. /
	scrollbar-color: #e80000 #ff9e00;
	scrollbar-width: thick;
	} /* the buttons */
	#click {
	top:50px;
	left:850px;
	}
	#click2 {
	top:200px;
	left:850px;
	}
	#click3 {
	top:350px;
	left:880px;
	}/button animation/
	.boxes > div {
	background-image: linear-gradient(#ff7900, #ffb43a);
	font-family: 'LED';
	position:fixed;
	border-radius:12px;
	height: 90px;
	width:280px;
	border: 5px #750000 groove;
	-webkit-transition: 1s ease-in-out;/* change seconds to speed up or slow animation.*/
	-moz-transition: 1s ease-in-out;
	-o-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
	}
	.boxes > div.slideright:hover {
	-webkit-transform: translate(1.5em, 0);/change the numbers before em to change how far the buttons move./
	-moz-transform: translate(1.5em, 0);
	-o-transform: translate(1.5em, 0);
	-ms-transform: translate(1.5em, 0);
	transform: translate(1.5em, 0);
	} /divider on the left./
	#box1 {
	font-size:20px;
	width: 800px;
	height: 800px;
	border-top: 0;
	margin-top: 0;
	border: 40px solid transparent;
	background-image:url('https://file.garden/ZRss0m_MomIqlrCB/dom2to.PNG');
	border-image:url('https://file.garden/ZRss0m_MomIqlrCB/parade.jpg') 80 round;
	background-clip:padding-box;
	position: fixed;
	border-radius:82px;
	}
	#header {/image that changes when clicked./
	width:800px;
	height:440px;
	}/* orange stuff surrounding text. */
	#surround {
	background-image: linear-gradient(#ff7900, #ffb43a);
	padding: 5px;
	}/* The typing effect */
	.typewriter h1 {
	overflow: hidden;
	border-right: .15em groove white;
	white-space: nowrap;
	margin: 0 auto;
	letter-spacing: .15em;
	animation:
	typing 4.5s steps(40, end),
	blink-caret .75s step-end infinite;
	}

	@keyframes typing {
	from { width: 0 }
	to { width: 100% }
	}
	/* The typewriter cursor effect */
	@keyframes blink-caret {
	from, to { border-color: transparent }
	50% { border-color: orange; }
	}
	/collapseable items. edit this if you want the collapseable bar to be different./
	.collapsible {
	background-image: linear-gradient(#ff7900, #ffb43a);
	font-family: 'LED';
	color:#fff6e6;
	left: 1300px;
	top:0px;
	position:absolute;
	width:350px;
	}
	.active, .collapsible:hover {
	background-image: linear-gradient(#ff4700, #ff9924);
	}/* right div. if you set the left and top to something different than the .collapsible, you can make the image show up a different place than the button. */
	.info {
	padding: 0 18px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	background-color: #f1f1f1;
	background-image:url('https://file.garden/ZRss0m_MomIqlrCB/bgcatblocks.gif');
	left: 1300px;
	top:0px;
	position:absolute;
	border: 4px inset white;
	}
	#pic { /images you can drag./
	position:absolute;
	left: 1100px;
	cursor: move;
	z-index: 9;
	top:90px;
	}
	#pic1 {
	position:absolute;
	left: 1400px;
	cursor: move;
	z-index: 9;
	top:350px;
	}
	#pic2 {
	position:absolute;
	left: 888px;
	cursor: move;
	z-index: 9;
	top:538px;
	border: groove orange 4px;
	}
	</style>
	<center>

	<!-- buttons -->
	<div class="boxes" id="click">
	<div class="slideright" id="click">
	<h1> <a href="x"> BACK </a> </h1>
	</div>
	</div>

	<div class="boxes" id="click">
	<div class="slideright" id="click2">
	<h1> <a href="https://gist.github.com/gyrobreaker/e98e02c34862e229a4e763fbc9d5c221"> CODE </a> </h1>
	</div>
	</div>

	<div class="boxes" id="click">
	<div class="slideright" id="click3">
	<h1> <a href="https://gyrobreaka.neocities.org/"> CREATOR </a> </h1>
	</div>
	</div>

	<!-- left divider -->
	<div id="box1" class="scroll">
	<!-- pic that changes. edit as needed. you can change the image it clicks to if you scroll down to the js section. -->
	<img id="header" src="https://file.garden/ZRss0m_MomIqlrCB/papeyes" onclick="changeImage()">
	<div class="typewriter" id="surround">
	<h1> Inside a Dream..... </h1>
	</div>

	<!--Change as you please! You can change the buttons to different pictures or make them normal text buttons too. Just remove everything between play/pauseaudio() and class="button", then delete the images and type Play/Pause or whatever you want.-->
	<audio id="myAudio">
	<source src="https://file.garden/ZRss0m_MomIqlrCB/onlymp3.to%20-%20Susumu%20Hirasawa%20The%20Girl%20In%20Byakkoya-21JuYIPHMF8-192k-1703116836.mp3" type="audio/ogg">
	<source src="https://file.garden/ZRss0m_MomIqlrCB/onlymp3.to%20-%20Susumu%20Hirasawa%20The%20Girl%20In%20Byakkoya-21JuYIPHMF8-192k-1703116836.mp3" type="audio/mpeg">
	</audio>
	<img src="https://file.garden/ZRss0m_MomIqlrCB/petri.pnj" width="50"> <!-- pic on the left side of the button.-->
	<button onclick="playAudio()" type = "submit" name = "learn" value = "myimage" class="button"><img src="https://file.garden/ZRss0m_MomIqlrCB/play.png" width="50"></button>
	<img src="https://file.garden/ZRss0m_MomIqlrCB/questionreality.pnj" width="50"> <!-- pic in the middle of the buttons.. -->
	<button onclick="pauseAudio()" type = "submit" name = "learn" value = "myimage" class="button"><img src="https://file.garden/ZRss0m_MomIqlrCB/pause.png" width="50"></button>
	<img src="https://file.garden/ZRss0m_MomIqlrCB/petri.pnj" width="50"> <!-- pic on the right side of the button. -->

	<div id="surround">
	<h1 align="left"> WELCOME ~ </h1>
	<img align="right" src="https://file.garden/ZRss0m_MomIqlrCB/parade.jpg" width="300">
	<p align="left"> Hi. I've made another template! You can use this template by clicking the button on the side labeled "Code" or just viewing the page source. (￣ω￣)/* Hope U Enjoy ... Do as much as you want or as little as you want with this layout! Everything is marked with notes to make it less confusing. Credit isn't needed at all, but appreciated. I'd be happy to see what you create! Bye bye! </p>
	</div>
	<Img src="https://file.garden/ZRss0m_MomIqlrCB/the%20girl%20in%20byakkoya.jpg" width="800">
	</div>

	<!-- right div -->
	<button class="collapsible"><marquee behavior="alternate"> <h1> OPEN </H1> </marquee> </button>
	<div class="info">
	<h1 id="surround"> Chiba </h1>
	<img src="https://file.garden/ZRss0m_MomIqlrCB/chiba.gif" width="200">
	<h1 id="surround"> info </h1>
	<p id="surround"> <i> All Chibas are powered by autism in their own unique way. </i> </p>
	</div>
	<!-- dragged pictures. -->
	<img id="pic" src="https://file.garden/ZRss0m_MomIqlrCB/luckycat.png" width="200">
	<img id="pic1" src="https://file.garden/ZRss0m_MomIqlrCB/jesting.pnj" width="300">
	<img id="pic2" src="https://file.garden/ZRss0m_MomIqlrCB/paprika.jpg" width="500">
	</center>

	<!-- JS -->

	<!--scrolling title text -->
	<script>
	(function titleScroller(text) {
	document.title = text;
	console.log(text);
	setTimeout(function () {
	titleScroller(text.substr(1) + text.substr(0, 1));
	}, 500);
	}("The Dream World ")); // EDIT TO CHANGE THE TITLE
	</script>

	<!-- collapsible items -->
	<script>
	var coll = document.getElementsByClassName("collapsible");
	var i;

	for (i = 0; i < coll.length; i++) {
	coll[i].addEventListener("click", function() {
	this.classList.toggle("active");
	var content = this.nextElementSibling;
	if (content.style.maxHeight){
	content.style.maxHeight = null;
	} else {
	content.style.maxHeight = content.scrollHeight + "px";
	}
	});
	}
	</script>

	<!-- The image changing aspect of the header. "Papeyes" is the image that first shows up, "Chiba" is the one that appears when clicked. Edit as wished. -->
	<script>
	function changeImage() {
	if (document.getElementById("header").src == "https://file.garden/ZRss0m_MomIqlrCB/papeyes"){
	document.getElementById("header").src = "https://file.garden/ZRss0m_MomIqlrCB/chiba2.gif";
	} else {
	document.getElementById("header").src = "https://file.garden/ZRss0m_MomIqlrCB/papeyes";
	}
	}
	</script>
	<!--audio-->
	<script>
	var x = document.getElementById("myAudio");

	function playAudio() {
	x.play();
	}

	function pauseAudio() {
	x.pause();
	}
	</script>

	<!-- drag function -->
	<script>
	//pic
	dragElement(document.getElementById("pic"));

	function dragElement(elmnt) {
	var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
	if (document.getElementById(elmnt.id + "image")) {
	/* if present, the img is where you move the DIV from:*/
	document.getElementById(elmnt.id + "image").onmousedown = dragMouseDown;
	} else {
	/* otherwise, move the DIV from anywhere inside the DIV:*/
	elmnt.onmousedown = dragMouseDown;
	}

	function dragMouseDown(e) {
	e = e \|\| window.event;
	e.preventDefault();
	// get the mouse cursor position at startup:
	pos3 = e.clientX;
	pos4 = e.clientY;
	document.onmouseup = closeDragElement;
	// call a function whenever the cursor moves:
	document.onmousemove = elementDrag;
	}

	function elementDrag(e) {
	e = e \|\| window.event;
	e.preventDefault();
	// calculate the new cursor position:
	pos1 = pos3 - e.clientX;
	pos2 = pos4 - e.clientY;
	pos3 = e.clientX;
	pos4 = e.clientY;
	// set the element's new position:
	elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
	elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
	}

	function closeDragElement() {
	/* stop moving when mouse button is released:*/
	document.onmouseup = null;
	document.onmousemove = null;
	}
	}
	</script>

	<script>
	//pic1
	dragElement(document.getElementById("pic1"));

	function dragElement(elmnt) {
	var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
	if (document.getElementById(elmnt.id + "image")) {
	/* if present, the img is where you move the DIV from:*/
	document.getElementById(elmnt.id + "image").onmousedown = dragMouseDown;
	} else {
	/* otherwise, move the DIV from anywhere inside the DIV:*/
	elmnt.onmousedown = dragMouseDown;
	}

	function dragMouseDown(e) {
	e = e \|\| window.event;
	e.preventDefault();
	// get the mouse cursor position at startup:
	pos3 = e.clientX;
	pos4 = e.clientY;
	document.onmouseup = closeDragElement;
	// call a function whenever the cursor moves:
	document.onmousemove = elementDrag;
	}

	function elementDrag(e) {
	e = e \|\| window.event;
	e.preventDefault();
	// calculate the new cursor position:
	pos1 = pos3 - e.clientX;
	pos2 = pos4 - e.clientY;
	pos3 = e.clientX;
	pos4 = e.clientY;
	// set the element's new position:
	elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
	elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
	}

	function closeDragElement() {
	/* stop moving when mouse button is released:*/
	document.onmouseup = null;
	document.onmousemove = null;
	}
	}
	</script>

	<script>
	//pic2
	dragElement(document.getElementById("pic2"));

	function dragElement(elmnt) {
	var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
	if (document.getElementById(elmnt.id + "image")) {
	/* if present, the img is where you move the DIV from:*/
	document.getElementById(elmnt.id + "image").onmousedown = dragMouseDown;
	} else {
	/* otherwise, move the DIV from anywhere inside the DIV:*/
	elmnt.onmousedown = dragMouseDown;
	}

	function dragMouseDown(e) {
	e = e \|\| window.event;
	e.preventDefault();
	// get the mouse cursor position at startup:
	pos3 = e.clientX;
	pos4 = e.clientY;
	document.onmouseup = closeDragElement;
	// call a function whenever the cursor moves:
	document.onmousemove = elementDrag;
	}

	function elementDrag(e) {
	e = e \|\| window.event;
	e.preventDefault();
	// calculate the new cursor position:
	pos1 = pos3 - e.clientX;
	pos2 = pos4 - e.clientY;
	pos3 = e.clientX;
	pos4 = e.clientY;
	// set the element's new position:
	elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
	elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
	}

	function closeDragElement() {
	/* stop moving when mouse button is released:*/
	document.onmouseup = null;
	document.onmousemove = null;
	}
	}
	</script>
No results found