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:

Code:

<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, 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:

Code:

<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

Thread: Image Splitter Script

Thread Tools

Search Thread

Image Splitter Script

Bookmarks

Bookmarks

Posting Permissions