PDA

View Full Version : 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...


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/DOM:element.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
<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 :)...

pcbrainbuster
04-13-2007, 05:41 PM
Helllllllooooooooooooooooooooo? :)...

pcbrainbuster
04-14-2007, 05:27 AM
Heya guys :), the following code does exactly what it is supposed to except that when creating the divs its to slow and when drawing ends up leaving a gap between the last div and the current... -

<html>
<body onselectstart="return false" bgcolor="red" style="border: 3px groove;">
Colour/Color : <input type="text" id="colorb"><br>
Outline : <input type="text" id="ocb"><br><br>
<span style="border: 3px inset;">Colour/Color : <input type="text" id="spanc"></span>
<span onfocus="bgset()" onmousedown="startd()" style="border: 3px inset; width: 100&#37;; height: 100%; background-color: green;" id="db"></span>
<script>
var count=0
var callc = document.getElementById('colorb')
var callo = document.getElementById('ocb')
var callb = document.getElementById('db')
function startd() {
count++
var ic = document.createElement('div')
ic.id="div"+count
ic.style.position="absolute"
ic.style.width=5+"px"
ic.style.height=5+"px"
ic.style.backgroundColor=callc.value
ic.style.border=1+"px"+" solid "+callo.value
if (event.clientY>callb.offsetTop && event.clientX>callb.offsetLeft) {
ic.style.left=event.clientX
ic.style.top=event.clientY}
document.body.appendChild(ic)
document.onmousemove=function() { startd() }
document.onmouseup=function() { document.onmousemove=null }
}

function bgset() {
var answer = document.getElementById('spanc').value
callb.style.backgroundColor=answer
}
</script>
</body>
</html>

Any way to speed up the dic creation... (I know its faulty but I could easily fix all the faults if wanted but not interested so thats why just focus on the task and thank you :))...

tech_support
04-14-2007, 06:44 AM
Helllllllooooooooooooooooooooo? :)...
Man, it's been less than one night. Some of us need our beauty sleep.

pcbrainbuster
04-14-2007, 06:46 AM
Less than what night?!?

tech_support
04-14-2007, 06:47 AM
One night. You know, 8-10 hours sleep. And it's the school holidays too.... And I'm sick...

pcbrainbuster
04-14-2007, 07:01 AM
Yeah well today I skipped sleeping and decided to go without sleep for two days... (

jscheuer1
04-14-2007, 12:18 PM
ZZZZZZZZZZZzzzzzzzzzzz . . .