Forum Moderators: open
Anyways, here's the JS:
init();
function init() {
var oldOnLoad = window.onload;
window.onload = function() {
if (oldOnLoad) oldOnLoad();
addShadows();
}
}
function addShadows() {
var mybody = document.getElementsByTagName("body")[0];
var imgs = document.getElementsByTagName("img");
for (var m = 0; m < imgs.length; m++) {
var thisImg = imgs[m];
var isShadow = false;
if (thisImg.className) {
var classTokens = thisImg.className.split(' ');
for (var n = 0; n < classTokens.length; n++) {
var thisToken = classTokens[n];
if (thisToken == "shadow")
isShadow = true;
}
if (isShadow) {
mytable = document.createElement("table");
mytablebody = document.createElement("tbody");
for(var j = 0; j < 3; j++) {
mycurrent_row = document.createElement("tr");
for(var i = 0; i < 3; i++) {
mycurrent_cell = document.createElement("td");
if (i == 1 && j == 1) {
currenttext = thisImg;
} else {
currenttext = document.createTextNode(" ");
}
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
}
mytablebody.appendChild(mycurrent_row);
}
mytable.appendChild(mytablebody);
mybody.appendChild(mytable);
mytable.setAttribute("border", "1");
mytable.setAttribute("cellspacing", "1");
mytable.setAttribute("cellpadding", "1");
}
}
}
}
Everything is fine when only one image is involved:
www.kung-fu.co.il/TEST/SHADOW/example1.html
but once I put more then one here what happens:
www.kung-fu.co.il/TEST/SHADOW/example2.html
Any ideas?
Here is an experiment that worked well for me for creating rounded corners; it can be adapted to create other shadowing and embossing effects. The power of this little script is that it adds a bunch of wrappers to your existing element, each of which gets a little margin and styling.
It requires 4 small images:
bl.gif
br.gif
tl.gif
tr.gif
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script>
function roundedCorners() {
var divs = document.getElementsByTagName('div'); var rounded_divs = [];
for (var i = 0; i < divs.length; i++) {
if (/\brounded\b/.exec(divs[i].className)) { rounded_divs[rounded_divs.length] = divs[i]; }
}
for (var i = 0; i < rounded_divs.length; i++) {
var original = rounded_divs[i]; original.className = original.className.replace('rounded', '');
var tr = document.createElement('div'); tr.className = 'rounded2';
original.parentNode.replaceChild(tr, original); var tl = document.createElement('div'); var br = document.createElement('div');
tr.appendChild(tl); tl.appendChild(br); br.appendChild(original);
}
}
window.onload = roundedCorners;
</script>
<style>
body{font-family:verdana; font-size:9px;}
div.rounded { width: 170px; padding: 15px; background: #eee; color:white;}
div.rounded2 { width: 200px; background: #eee url(tr.gif) no-repeat top right;}
div.rounded2 div { background: transparent url(tl.gif) no-repeat top left; }
div.rounded2 div div { background: transparent url(br.gif) no-repeat bottom right; }
div.rounded2 div div div { background: transparent url(bl.gif) no-repeat bottom left; padding: 15px; }
</style>
</head>
<body>
<div class="rounded">
Content goes here.
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
</body>
</html>
Problem was when I used this:
[theshapeofdays.com...]
Some images had wierd glich.
Later I found only images with odd height size had it, and images with even height size work just fine.
So now all I need to do is to fix the height of all my images and I should be fine.
Thanks anyways :)
