Dynamicly added image...

**pcbrainbuster** · 04-13-2007, 04:00 AM

Hello again guys

,

This time I've gotten interested at a script I yet do not understand (sort of)... -

http://www.walterzorn.com/dragdrop/dragdrop_e.htm

If you go right down the page and drag that rabbit picture another one is some how copied and then there are two and then three and so on...

How is that done ??? If I had to guess it would be DOM but am not sure as I'm not learned it yet and have starrted...

Thanks

**tech_support** · 04-13-2007, 04:04 AM

If you read the page...

Originally Posted by The page

Clone or multiply an image?

Drag Drop Image Or change the cursor? Or convert an image into a slider with stops? There are several commands available which change, if passed to SET_DHTML(), the behavior of JavaScript Drag n' Drop items.

**pcbrainbuster** · 04-13-2007, 04:06 AM

Thanks for your post but what I want to know is how the image is cloned...

**tech_support** · 04-13-2007, 04:45 AM

http://developer.mozilla.org/en/docs...ment.cloneNode

**pcbrainbuster** · 04-13-2007, 05:14 AM

I think I understand it -

<html>
<body onclick="createi()" ondblclick="alert(document.images.length)">
<img src="water.bmp" id="image" style="width: 2cm; height: 2cm; position: absolute;">
<script>
function createi() {
var call = document.getElementById('image')
var offxy = Math.round(Math.random()*500)
call.style.left=offxy
call.style.top=offxy
var ce = call.cloneNode(true)
document.appendChild(ce)
}
</script>
</body>
</html>

But how do I set the cloned images left and top style property?

**tech_support** · 04-13-2007, 05:22 AM

Then that wouldn't be "cloning".
Cloning means to provide duplicate of an element.

**pcbrainbuster** · 04-13-2007, 05:24 AM

I know what it means but then I don't see how it can be even used... If cloned element can't be seen or used then whats the point???...

Actually I've got an idea I'll post back when I'm done...

**pcbrainbuster** · 04-13-2007, 05:44 AM

<html>
<body ondblclick="alert(document.images.length)">
<img src="water.bmp" id="image" style="width: 2cm; height: 2cm; position: absolute;" onmousedown="startd()">
<script>
function startd() {
document.body.appendChild(document.getElementById('image').cloneNode(true))
var offx = (event.clientX-document.getElementById('image').offsetLeft)
var offy = (event.clientY-document.getElementById('image').offsetTop)
document.onmousemove=function() {
document.getElementById('image').style.left=event.clientX-offx
document.getElementById('image').style.top=event.clientY-offy}
document.onmouseup=function() {document.onmousemove=null}
}
</script>
</body>
</html>

If you copy-n-paste that you will see the problem... It clones the image from the last image due to because I can not set the ID... Any ideas?...

**tech_support** · 04-13-2007, 05:59 AM

Code:

<html>
<body ondblclick="alert(document.images.length)">
<img src="water.bmp" id="image" style="width: 2cm; height: 2cm; position: absolute;" onmousedown="startd()">
<script>
function startd() {
var e = document.getElementById('image').cloneNode(true)
e.onmousemove = null
document.body.appendChild(e)
var offx = (event.clientX-document.getElementById('image').offsetLeft)
var offy = (event.clientY-document.getElementById('image').offsetTop)
document.onmousemove=function() {
document.getElementById('image').style.left=event.clientX-offx
document.getElementById('image').style.top=event.clientY-offy}
document.onmouseup=function() {document.onmousemove=null}
}
</script>
</body>
</html>

**pcbrainbuster** · 04-13-2007, 06:12 AM

Well you just repeated the problem form before

, but it does not matter as I finished the script and made it perfect -

<html>
<body ondblclick="alert(document.images.length)">
<img src="water.bmp" id="image" style="width: 2cm; height: 2cm; position: absolute;" onmousedown="startd()">
<script>
function startd() {
var main = document.createElement("img")
main.src="water.bmp"
main.style.left=document.getElementById('image').offsetLeft
main.style.top=document.getElementById('image').offsetTop
main.style.position="absolute"
main.style.height=2+"cm"
main.style.width=2+"cm"
main.id=image+document.images.length
document.body.appendChild(main)

var offx = (event.clientX-document.getElementById(main.id).offsetLeft)
var offy = (event.clientY-document.getElementById(main.id).offsetTop)
document.onmousemove=function() {
document.getElementById(main.id).style.left=event.clientX-offx
document.getElementById(main.id).style.top=event.clientY-offy}
document.onmouseup=function() {document.onmousemove=null}
}
</script>
</body>
</html>

Except once you actually drag the new image, it can not be dragged again...

I'm not going to work on the script right now as I'm going to sleep for a little soo ummm GOODNIGHT

...

Thread: Dynamicly added image...

Thread Tools

Search Thread

Dynamicly added image...

Bookmarks

Bookmarks

Posting Permissions