Member Avatar for Auto

I'm trying to display the same image several times using javascript. It can range anywhere from 0 to about 50. I'll also have its' location determined by the user click and each image will timeout after a short period of time. I figure i'll have to create a new object for each image that is added and remove it after it times out, but my problem is I dont know how to tell the HTML code inside the <body> tag to display the same image for each click I make.

  • 2 Contributors
  • 4 Replies
  • 100 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Auto
Member Avatar for Pnorq

Something like this?

<html>
<body>

<form name="Show">
<input type="text" name="MouseX" value="0" size="4"> X<br>
<input type="text" name="MouseY" value="0" size="4"> Y<br>
</form>
<div id="content" style="width: 100%; height: 100%; position: absolute;"></div>

<script>
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;
document.onclick = mouseClick;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0
var timeout = new Array();
var elements = new Array();
var timeoutcounter = 0;
var elementcounter = 0;
// Main function to retrieve mouse x-y pos.s

function getMouseXY(e) {
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else {  // grab the x-y pos.s
    tempX = e.pageX
    tempY = e.pageY
  }  
  // catch possible negative values
  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}  
  // show the position values in the form named Show
  // in the text fields named MouseX and MouseY
  document.Show.MouseX.value = tempX
  document.Show.MouseY.value = tempY
  return true
}

function mouseClick(e) {
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else {  // grab the x-y pos.s
    tempX = e.pageX
    tempY = e.pageY
  }  
  // catch possible negative values
  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}  

  var div = document.getElementById("content");
  
  var el = document.createElement("img");
  el.setAttribute("src", "http://dummidumbwit.files.wordpress.com/2010/01/ufo.jpg");
  el.setAttribute("style", "height: 50px; width: 50px; top: "+tempY+"px; left: "+tempX+"px; position: fixed;");
  div.appendChild(el);
  
  elements[timeoutcounter] = el;
  timeout[timeoutcounter++] = setTimeout("removeElement()",1000*5);
  
  return true
}

function removeElement() {
  var div = document.getElementById("content");
  div.removeChild(elements[elementcounter++]);
}
</script>
</body>
</html>
Member Avatar for Auto

Okay, I used your add image to the div element and that works, my position is offset, but I think I can solve that quickly. What I was curious about is why you're adding to the event.clientX and Y.

if (IE) 
{
 // grab the x-y pos.s if browser is IE;
    tempX = event.clientX + document.body.scrollLeft;
    tempY = event.clientY + document.body.scrollTop;
}
Member Avatar for Pnorq

You know, that's some kruft left in the snippet I was using. I'm on a Mac so I can't test IE so I just left it in, in case it was actually covering some IE weirdness.

I do all my production coding in jQuery and Dojo, etc. so cross platform issues like that are generally taken care of. For the answers I provide on this forum, I write everything in straight up JavaScript so folks can easily see how to solve their problem. If they want to take the code I provide and refactor it or jQuery-ize it or whatever, that's fantastic.

Member Avatar for Auto

Thanks, for your help. I'm able to take my project further now.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.