Ever wanted to make your very own signature? This tool will help you place all of those images together into one aesthetically-pleasing product.
Here's an example of a sig created using the maker:
To use, simply paste the following code into a document with a .html extension and open it in any browser or html viewer!
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Arcane Legends Forum Signature Maker</title>
<meta charset="utf-8">
</head>
<style>
#spacing:after {
content: " ";
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border: 1px solid white;
}
</style>
<body style="background-color:lightgrey;">
<br/>
<div id="title" style="text-align:center; font-size:25px;">Aquascaper's Arcane Legends Forum Signature Maker</div>
<div id="javascriptalert" style="text-align:center; font-size:20px; display:block;">(please enable Javascript to start)</div>
<br/>
<div id="sig" style="display:none;">
<img src="." alt="background image" style="display:none; width:500px; height:100px; position:fixed; left:100px; top:100px;" id="background">
<img src="." alt="opaque background image" style="display:none; width:500px; height:100px; position:fixed; left:100px; top:100px; opacity:0.2;" id="opaque">
<img src="." alt="border image" style="display:none; width:500px; height:100px; position:fixed; left:100px; top:100px;" id="border">
<img src="." alt="name image" style="display:none; width:300px; position:fixed; left:200px; top:100px;" id="name">
<img src="." alt="character image" id="character" style="display:none; width:100px; position:fixed; left:80px; top:100px; -ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg);">
<img src="." alt="logo image" id="logo" style="display:none; height:75px; position:fixed; left:500px; top:113px;">
<div id="spacing" style="width:500px; height:100px; position:fixed; left:70px; top:70px; border-style:solid; border-color:lightgrey; border-width:30px;"></div>
</div>
<div id="options" style="position:fixed; top:250px; left:100px; display:none;">
<div id="background-options">
Background (500x100 px):
<input type="file" id="background-file"/>
</div>
<br/>
<div id="opaque-background-options">
Opaque background (500x100 px):
<input type="file" id="opaque-background-file"/>
</div>
<br/>
<div id="border-options">
Border (500x100 px - image with opacity):
<input type="file" id="border-file"/>
</div>
<br/>
<div id="name-options">
Name:
<input type="file" id="name-file"/>
</div>
<br/>
<div id="character-options">
Character:
<input type="file" id="character-file"/>
</div>
<br/>
<div id="logo-options">
Logo:
<input type="file" id="logo-file"/>
</div>
</div>
<script>
document.getElementById("javascriptalert").style.display = "none";
document.getElementById("sig").style.display = "block";
document.getElementById("options").style.display = "block";
document.getElementById('background-file').onchange = function (evt) {
var tgt = evt.target || window.event.srcElement,
files = tgt.files;
if (FileReader && files && files.length) {
var fr = new FileReader();
fr.onload = function () {
document.getElementById("background").src = fr.result;
document.getElementById("background").style.display = "block";
}
fr.readAsDataURL(files[0]);
} else {
alert("Upload failed.");
}
}
document.getElementById('opaque-background-file').onchange = function (evt) {
var tgt = evt.target || window.event.srcElement,
files = tgt.files;
if (FileReader && files && files.length) {
var fr = new FileReader();
fr.onload = function () {
document.getElementById("opaque").src = fr.result;
document.getElementById("opaque").style.display = "block";
}
fr.readAsDataURL(files[0]);
} else {
alert("Upload failed.");
}
}
document.getElementById('border-file').onchange = function (evt) {
var tgt = evt.target || window.event.srcElement,
files = tgt.files;
if (FileReader && files && files.length) {
var fr = new FileReader();
fr.onload = function () {
document.getElementById("border").src = fr.result;
document.getElementById("border").style.display = "block";
}
fr.readAsDataURL(files[0]);
} else {
alert("Upload failed.");
}
}
document.getElementById('name-file').onchange = function (evt) {
var tgt = evt.target || window.event.srcElement,
files = tgt.files;
if (FileReader && files && files.length) {
var fr = new FileReader();
fr.onload = function () {
document.getElementById("name").src = fr.result;
document.getElementById("name").style.display = "block";
}
fr.readAsDataURL(files[0]);
} else {
alert("Upload failed.");
}
}
document.getElementById('character-file').onchange = function (evt) {
var tgt = evt.target || window.event.srcElement,
files = tgt.files;
if (FileReader && files && files.length) {
var fr = new FileReader();
fr.onload = function () {
document.getElementById("character").src = fr.result;
document.getElementById("character").style.display = "block";
}
fr.readAsDataURL(files[0]);
} else {
alert("Upload failed.");
}
}
document.getElementById('logo-file').onchange = function (evt) {
var tgt = evt.target || window.event.srcElement,
files = tgt.files;
if (FileReader && files && files.length) {
var fr = new FileReader();
fr.onload = function () {
document.getElementById("logo").src = fr.result;
document.getElementById("logo").style.display = "block";
}
fr.readAsDataURL(files[0]);
} else {
alert("Upload failed.");
}
}
</script>
</body>
</html>
Have fun! - aquascaper
coming soon: more customizations
Bookmarks