I had previously described an app for painting with images. This app permits the creation of randomly tiled images for web page backgrounds.
This is an example:
If the tiled background is too distracting, it can be given some transparency:
To try the app click here
to download the app, including images with transparent backgrounds click here
Here is the code:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head profile=”http://gmpg.org/xfn/11″>
<title>Tile BK</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal 800 24px Arial; color: white}
a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
</style>
</head>
<body>
<di id=”canvas” style=”position: absolute; width:900px; height: 600px; left: 50%; margin-left: -450px; top: 50px; overflow: hidden; opacity:0.90;filter:alpha(opacity=90)”></di>
<di id=”div1″ style=”position: absolute; width:900px; height: 600px; left: 50%; margin-left: -450px; top: 50px; text-align: center”><br /><br /><br />
This is a test</di>
var lft = -40; var tp = 10; var ht = 150; var wd = 150; var bkc = “”;
var val = prompt(“Choose Image: leaf – 1 leaf2 – 2 daisy – 3 butterfly – 4 bow – 5 ring – 6 flower – 7 flower2 – 8 flower3 – 9 egg – 10 Opacity: 0 – 100”, “1, 90”);
if (val.indexOf(“,”) > 1) {
var im = val.substr(0,2);
} else {
im = val.substr(0,1);
}
var im1 =””;
if (im == “1”) {
im1 = “images/leaf.gif”; bkc = “#77aa77”;
}
if (im == “2”) {
im1 = “images/leaf2.gif”; bkc = “#668866”;
}
if (im == “3”) {
im1 = “images/daisy.gif”; bkc = “#ee8800”;
}
if (im == “4”) {
im1 = “images/butterfly.gif”; bkc = “#dd8800”;
}
if (im == “5”) {
im1 = “images/bow.gif”; bkc = “#cc0000”;
}
if (im == “6”) {
im1 = “images/ring.gif”; bkc = “#33bb33”;
}
if (im == “7”) {
im1 = “images/flower.gif”; bkc = “#ee7700”;
}
if (im == “8”) {
im1 = “images/flower2.gif”; bkc = “#ddddee”;
}
if (im == “9”) {
im1 = “images/flower3.gif”; bkc = “#9900bb”;
}
if (im == “10”) {
im1 = “images/egg.gif”; bkc = “#bb0000”;
}
if (val.indexOf(“,”) > 1) {
var opc = val.substr(3);
} else {
opc = val.substr(2);
}
for (var i=1; i ‘;
document.getElementById(“d” + i).style.left = lft + “px”;
document.getElementById(“d” + i).style.top = tp + “px”;
document.getElementById(“d” + i).style.width = wd + “px”;
document.getElementById(“d” + i).style.height = ht + “px”;
}
document.getElementById(“canvas”).style = “position: absolute; width:900px; height: 600px; left: 50%; margin-left: -450px; top: 50px; background:” + bkc + “; overflow:hidden; opacity:” + opc/100 + “;filter:alpha(opacity=” + opc + “) “;
</body></html>
The background is placed in a division called canvas:
<di id=”canvas” style=”position: absolute; width:900px; height: 600px; left: 50%; margin-left: -450px; top: 50px; overflow: hidden; opacity:0.90;filter:alpha(opacity=90)”></di>
Superimposed is a division in which the bulk of the page is created. In this case I just added some text, but anything can be placed there:
<di id=”div1″ style=”position: absolute; width:900px; height: 600px; left: 50%; margin-left: -450px; top: 50px; text-align: center”><br /><br /><br />
This is a test</di>
I could have placed a control panel that could be hidden, but for simplicity’s sake I just used a prompt for input of image and transparency:
var val = prompt(“Choose Image: leaf – 1 leaf2 – 2 daisy – 3 butterfly – 4 bow – 5 ring – 6 flower – 7 flower2 – 8 flower3 – 9 egg – 10 Opacity: 0 – 100”, “1, 90”);
The prompt is parsed to get the image and opacity:
if (val.indexOf(“,”) > 1) {
var im = val.substr(0,2);
} else {
im = val.substr(0,1);
}
if (val.indexOf(“,”) > 1) {
var opc = val.substr(3);
} else {
opc = val.substr(2);
}
The images are randomly tiled:
for (var i=1; i <= 500; i ++) {
lft = 900*Math.random() – 50;
tp = 600*Math.random() – 50;
document.getElementById(“canvas”).innerHTML += ‘<img id = “d’ + i + ‘” src=”‘ + im1 + ‘” style = “position:absolute;” />’;
document.getElementById(“d” + i).style.left = lft + “px”;
document.getElementById(“d” + i).style.top = tp + “px”;
document.getElementById(“d” + i).style.width = wd + “px”;
document.getElementById(“d” + i).style.height = ht + “px”;
}
Since there is no guarantee that every part of canvas will be covered by a tile, its background is changed to blend with the image being applied:
if (im == “1”) {
im1 = “images/leaf.gif”; bkc = “#77aa77”;
}
if (im == “2”) {
im1 = “images/leaf2.gif”; bkc = “#668866”;
}
if (im == “3”) {
im1 = “images/daisy.gif”; bkc = “#ee8800”;
}
if (im == “4”) {
im1 = “images/butterfly.gif”; bkc = “#dd8800”;
}
if (im == “5”) {
im1 = “images/bow.gif”; bkc = “#cc0000”;
}
if (im == “6”) {
im1 = “images/ring.gif”; bkc = “#33bb33”;
}
if (im == “7”) {
im1 = “images/flower.gif”; bkc = “#ee7700”;
}
if (im == “8”) {
im1 = “images/flower2.gif”; bkc = “#ddddee”;
}
if (im == “9”) {
im1 = “images/flower3.gif”; bkc = “#9900bb”;
}
if (im == “10”) {
im1 = “images/egg.gif”; bkc = “#bb0000”;
}
The choice that selects the image also selects the background color, which is applied to the canvas, and applies the opacity:
document.getElementById(“canvas”).style = “position: absolute; width:900px; height: 600px; left: 50%; margin-left: -450px; top: 50px; background:” + bkc + “; overflow:hidden; opacity:” + opc/100 + “;filter:alpha(opacity=” + opc + “) “;
‘;
‘;
Tips & Tricks 