Log in

View Full Version : Image Splitter Script


mburt
08-20-2006, 09:19 PM
There's no real problem, but I'm wondering if this script would be worthy to be put in the "Submit DHTML/CSS Script" section.

It splits an image, and tilts it.
Check this out:


<html>
<head>
<style type="text/css">
body {
}
</style>
<script>
var source="image.png"
var imagewidth=30
var i=0
onload=function() {
for (i=0;i<=imagewidth;i++) {
document.body.innerHTML+="<div style='position:absolute;top:"+i+"px;left:"+i+2+";width:"+i+"px;overflow:hidden'><img style='margin-left:-"+i+"' src='"+source+"'></div>"
}
}
</script>
</head>
<body>
</body>
</html>
Twey
08-20-2006, 09:33 PM
Walter Zorn had the same idea (http://www.walterzorn.com/rotate_img/rotate_img.htm), but deemed it unfeasible due to performance issues.
mburt
08-20-2006, 10:37 PM
Thanks Twey, but mine doesn't rotate it takes a segment of an image and multiplies it by the images width
Twey
08-20-2006, 11:12 PM
Well, yes, but it's the same concept.
mburt
08-21-2006, 12:08 AM
Okay. I made a different one. It warps the image, and works flawlessly in FF and IE:


<html>
<head>
<script>
var source="image.png"
var i=0
onload=function() {
for (i=0;i<=30;i++) {
document.body.innerHTML+="<div style='position:absolute;top:"+i+"px;left:"+i+";width:"+i+"px;overflow:hidden'><img style='margin-left:-"+i+"' src='"+source+"'></div>"
}
}
</script>
</head>
<body>
</body>
</html>

URL:

http://www40.brinkster.com/mburt/scripts/warp_image.htm
Twey
08-21-2006, 12:42 AM
You know, it would probably be a better idea to use document.write() here...
mburt
08-21-2006, 01:46 AM
The image won't appear using document.write() . I tried it :)