I wnat to use the script given belo

navosavo · Dec 22, 2002

I wnat to use the script given below, but instead of using letters I want to use images. But when I replace letters with images the function
function TestLetter(l) {
if (elDragged.innerText==l+" &quot

alert('Good Move')
else
alert('Try again!')
doesn't respond correctly.

I'm a novice at this and would appreciate someone guiding me.

THE SCRIPT AS IT IS
<SCRIPT LANGUAGE="JavaScript">
/* The drag-drop framework is copyright 1997-98 insideDHTML.com, LLC.
This code can be reused as long as this entire comment is not removed.
For more information, see

http://www.insideDHTML.com

*/

// Event handlers for demonstration

function doOverTarget() {
elDragged.overTarget.style.background="lightgreen"
}

function doOutTarget() {
elDragged.overTarget.style.background="yellow"
}

function TestLetter(l) {
if (elDragged.innerText==l+" &quot

alert('Good Move')
else
alert('Try again!')
}
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript" ID=code>
var elDragged = null // Track drag-source in global variable.

function testOver(iLeft, iTop) {
// Test if the element is over a valid drop-target
var hit = false
if (elDragged.getAttribute("dropTarget&quot

!=null) {
for (var intLoop=0; intLoop<elDragged._targets.length; intLoop++) {
// Check all drop-targets
var el = elDragged._elTargets[intLoop]
if (null!=el) {
if ((iTop > el._top) && (iLeft > el._left) && (iLeft+elDragged.offsetWidth < el.offsetWidth+el._left) && (elDragged.offsetHeight+iTop < el.offsetHeight+el._top)) {
elDragged.overTarget= el
var hit=true
elDragged._over[intLoop] = true
// Fire events when over
if (event.type=="mouseup&quot

{
if (el.getAttribute("onDropTarget&quot

!=null)
eval(el.getAttribute("onDropTarget&quot

);
} else
{
if (el.getAttribute("onOverTarget&quot

!=null)
eval(el.getAttribute("onOverTarget&quot

)
}
}
else {
// Fire event when leaving
if ((el.getAttribute("onOutTarget&quot

!=null) && (elDragged._over[intLoop])) {
elDragged.overTarget= el
eval(el.getAttribute("onOutTarget&quot

)
}
elDragged._over[intLoop] = false
}
}
}
}
return hit;
}

function doMouseUp() {
if (elDragged!=null)
if (testOver(elDragged._left, elDragged._top)) {
// Fire event on drag-source if dropped on target
if (elDragged.getAttribute("onTarget&quot

)
eval(elDragged.getAttribute("onTarget&quot

)
}
else
if (elDragged.getAttribute("onNoTarget&quot

)
eval(elDragged.getAttribute("onNoTarget&quot

)
// Reset global variable
elDragged=null
}

function doMouseMove() {
// Check if mouse button is down and if an element is being dragged
if ((1 == event.button) && (elDragged != null)) {
// Set new position
var intTop = event.clientY+document.body.scrollTop;
var intLeft = event.clientX + document.body.scrollLeft;
elDragged.style.pixelTop = intTop - elDragged._lessTop - elDragged.y;
elDragged.style.pixelLeft = intLeft - elDragged._lessLeft - elDragged.x;
// Cache updated info
elDragged._left = elDragged._lessLeft + elDragged.offsetLeft + document.body.scrollLeft
elDragged._top = elDragged.offsetTop+ elDragged._lessTop +document.body.scrollTop
// Test if over target
testOver(elDragged._left, elDragged._top)
event.returnValue = false;
};
};

function checkDrag(elCheck) {
// Check if the clicked inside an element that supports dragging
// This allows rich HTML in drag-source
while (elCheck!=null) {
if (null!=elCheck.getAttribute("dragEnabled&quot

)
return elCheck
elCheck = elCheck.parentElement
}
return null
}

function doMouseDown() {
// On the mouse down, test if element can be dragged

var elCurrent = checkDrag(event.srcElement)
// For draggable elements, cache all calculations up front. This is for performance.
if (null!=elCurrent) {
elDragged = elCurrent;
// Determine where the mouse is in the element
elDragged.x = event.offsetX
elDragged.y = event.offsetY
// Make sure we are using pixel units everywhere
elDragged.style.top = elDragged.offsetTop + "px"
elDragged.style.left = elDragged.offsetLeft + "px"
var op = event.srcElement
// Find real location in respect to element being dragged.
if ((elDragged!=op.offsetParent) && (elDragged!=event.srcElement)) {
while (op!=elDragged) {
elDragged.x+=op.offsetLeft
elDragged.y+=op.offsetTop
op=op.offsetParent
}
}

// Move the element
// Where the mouse is in the document
// Calculate what element the mouse is really in
var intLessTop = 0; var intLessLeft = 0;
var elCurrent = elDragged.offsetParent;
while (elCurrent.offsetParent!=null) {
intLessTop+=elCurrent.offsetTop;
intLessLeft+=elCurrent.offsetLeft;
elCurrent = elCurrent.offsetParent;
}
elDragged._lessTop = intLessTop
elDragged._lessLeft = intLessLeft
// Calculate and cache target information
if (null!=elDragged.getAttribute("dropTarget&quot

) {
elDragged._targets = elDragged.getAttribute("dropTarget&quot

.split(",&quot

elDragged._over = new Array
elDragged._elTargets = new Array
for (var intLoop=0; intLoop < elDragged._targets.length; intLoop++) {
var el = document.all[elDragged._targets[intLoop]]
if (null!=el) {
elDragged._elTargets[intLoop]= el;
var intLessTop = el.offsetTop; var intLessLeft = el.offsetLeft;
var elCurrent = el.offsetParent;
var intTop = document.body.scrollTop;
var intLeft = document.body.scrollLeft;
while (elCurrent.offsetParent!=null) {
intLessTop+=elCurrent.offsetTop;
intLessLeft+=elCurrent.offsetLeft;
elCurrent = elCurrent.offsetParent;
}
el._top = intLessTop + intTop
el._left = intLessLeft + intLeft
}
}
}
}
}

function doDragTest() {
// Don't start text selections in dragged elements.
return (null==checkDrag(event.srcElement) && (elDragged==null))
}

// Process all mouse events.
document.onmousedown = doMouseDown;
document.onmousemove = doMouseMove;
document.onmouseup = doMouseUp;
document.ondragstart = doDragTest
document.onselectstart = doDragTest;
</SCRIPT>

<CENTER>

Unscramble the URL of your favorite DHTML Web-Site
<Span STYLE="top: 2em; cursor: hand; left: 8.5em; width: .8em; height: .8em; background: lightgreen; color: navy; text-align: center; position: absolute" dragEnabled dropTarget="dropHere,dropHere2,dropHere3,dropHere4,dropHere5,dropHere6">
I

<Span STYLE="top: 2em; cursor: hand; left: 7.0em; width: .8em; height: .8em; background: lightgreen; color: navy; text-align: center; position: absolute" dragEnabled dropTarget="dropHere,dropHere2,dropHere3,dropHere4,dropHere5,dropHere6">
E

<Span STYLE="top: 2em; cursor: hand; left: 10em; width: .8em; height: .8em; background: lightgreen; color: navy; text-align: center; position: absolute" dragEnabled dropTarget="dropHere,dropHere2,dropHere3,dropHere4,dropHere5,dropHere6">
S

<Span STYLE="top: 2em; cursor: hand; left: 11.5em; width: .8em; height: .8em; background: lightgreen; color: navy; text-align: center; position: absolute" dragEnabled dropTarget="dropHere,dropHere2,dropHere3,dropHere4,dropHere5,dropHere6">
I

<Span STYLE="top: 2em; cursor: hand; left: 13em; width: .8em; height: .8em; background: lightgreen; color: navy; text-align: center; position: absolute" dragEnabled dropTarget="dropHere,dropHere2,dropHere3,dropHere4,dropHere5,dropHere6">
D

<Span STYLE="top: 2em; cursor: hand; left: 14.5em; width: .8em; height: .8em; background: lightgreen; color: navy; text-align: center; position: absolute" dragEnabled dropTarget="dropHere,dropHere2,dropHere3,dropHere4,dropHere5,dropHere6">
N


W


W


W


.

<SPAN ID=dropHere STYLE="position: absolute; top: 5em; left:9em; width: 1.5em; height: 1.5em; border: 1pt black solid; z-index: -1; background: yellow" onOverTarget="doOverTarget()" onOutTarget="doOutTarget()" onDropTarget="TestLetter('I')">

<SPAN ID=dropHere2 STYLE="position: absolute; top: 5em; left:10.5em; width: 1.5em; height: 1.5em; border: 1pt black solid; z-index: -1; background: yellow" onOverTarget="doOverTarget()" onOutTarget="doOutTarget()" onDropTarget="TestLetter('N')">

<SPAN ID=dropHere3 STYLE="position: absolute; top: 5em; left:12.0em; width: 1.5em; height: 1.5em; border: 1pt black solid; z-index: -1; background: yellow" onOverTarget="doOverTarget()" onOutTarget="doOutTarget()" onDropTarget="TestLetter('S')">

<SPAN ID=dropHere4 STYLE="position: absolute; top: 5em; left:13.5em; width: 1.5em; height: 1.5em; border: 1pt black solid; z-index: -1; background: yellow" onOverTarget="doOverTarget()" onOutTarget="doOutTarget()" onDropTarget="TestLetter('I')">

<SPAN ID=dropHere5 STYLE="position: absolute; top: 5em; left:15.0em; width: 1.5em; height: 1.5em; border: 1pt black solid; z-index: -1; background: yellow" onOverTarget="doOverTarget()" onOutTarget="doOutTarget()" onDropTarget="TestLetter('D')">

<SPAN ID=dropHere6 STYLE="position: absolute; top: 5em; left:16.5em; width: 1.5em; height: 1.5em; z-index: -1; background: yellow; border: 1pt black solid" onOverTarget="doOverTarget()" onOutTarget="doOutTarget()" onDropTarget="TestLetter('E')">


D


H


T


M


L


.


C


O


M

</CENTER>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

I wnat to use the script given belo

navosavo

Technical User

Similar threads

Part and Inventory Search

Sponsor