Hello, I’m trying to have a “click†event that replaces an image on the page with a new image that has been selected randomly from an array. I have solved PART of this already (can get the random image to appear). However, instead of appearing on the page where the old image was, the new image appears in a blank page. My research indicates that this “blank page locationâ€-problem is a result of using “document.write†in the Function. Therefore, I know I need to find a different way to accomplish this, but am failing miserably. I have been trying for hours and hours and HOURS to figure out proper syntax for accomplishing this via elements, functions, variables and mootools. I am literally going INSANE and am DESPERATELY hoping someone out there will help me!!!! Thank you in advance for your support :>) A bit of my research: * I found this---but haven’t figured out how to implement it in my scenario: document.addEvent( 'domready' , function() { $('my_element').addEvent( 'click' , function() { alert('test'); } ); }); Source: http://cssgallery.info/a-beginners-mootools-add-events/ * I found this---but haven’t figured out how to implement it in my scenario: $('myNewElement').replaces($('myOldElement')); Source: http://mootools.net/docs/core/Element/Element <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ChristmasSweaterFUN.com | Home of the Christmas Sweaterizer App & Christmas Sweater Generator</title> <script type="text/JavaScript"> // Set up the image files to be used. var theImages = new Array() // do not change this // To add more image files, continue with the // pattern below, adding to the array. Rememeber // to increment the theImages[x] index! theImages[0] = 'christmas-sweater-output-bacon.png' theImages[1] = 'christmas-sweater-output-martini.png' theImages[2] = 'christmas-sweater-output-kitty-litter.png' theImages[3] = 'christmas-sweater-output-spatula.png' theImages[4] = 'christmas-sweater-output-eiffel.png' theImages[5] = 'christmas-sweater-output-cotton-candy.png' // ====================================== // do not change anything below this line // ====================================== /////////////// var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ document.write('<img src="'+theImages[whichImage]+'">'); } </script> <style type="text/css"> <!-- body,td,th { font-size: 14px; color: #000; } body { background-color: #FFF; } a:link { color: #090; text-decoration: none; } a:visited { text-decoration: none; color: #0F0; } a:hover { text-decoration: underline; } a:active { text-decoration: none; } #container { height: 800px; width: 770px; margin-right: auto; margin-left: auto; position: relative; } </style> <link href="fontstyle.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- #navbar { position:absolute; left:1px; top:51px; width:770px; height:52px; z-index:1; background-image: url(images/nav-background.jpg); } #heading { position:absolute; left:112px; top:15px; width:770px; height:68px; z-index:1; font-family: 3dumb, Georgia, sans-serif; font-size: 36px; } #bottombar { position:absolute; left:0px; top:757px; width:770px; height:44px; z-index:2; background-image: url(images/green-bottom.jpg); } #com { position:absolute; left:552px; top:10px; width:90px; height:41px; z-index:1; } #page-headline { position:absolute; left:2px; top:102px; width:770px; height:40px; z-index:3; } #test { position:absolute; left:0px; top:210px; width:769px; height:182px; z-index:4; } #apDiv2 { position:absolute; left:0px; top:179px; width:403px; height:579px; z-index:4; } #funnypicplace { position:absolute; left:403px; top:178px; width:367px; height:439px; z-index:5; } #apDiv3 { position:absolute; left:403px; top:178px; width:367px; height:439px; z-index:5; } --> </style> </head> <body> <div id="container"> <div id="bottombar"></div> <div id="page-headline"> <h3>Page Headline Goes Here</h3> </div> <div id="apDiv2"><img src="ChristmasSweaterFUN_iWeb/ChristmasSweaterFUN_iWeb/christmas_sweater_GENERATOR_files/christmas-sweater-generator-animation.gif" width="403" height="579" /></div> <div id="apDiv3"><img onClick="showImage()" width="367" height="439"/></div> </div> <div id="heading"> <h2>ChristmasSweaterFUN.</h2> <div id="com"> <img src="images/com.jpg" width="90" height="41" /> </div> </div> </body> </html> Code (markup):
Something like this maybe: <html> <head> <script type='text/javascript'> var totalImages = 4; var imageNum = 0; function changeImage() { do randomNum = Math.floor(Math.random()*totalImages); while (randomNum == imageNum); imageNum = randomNum; document.getElementById('image').src = 'image'+imageNum+'.jpg'; } </script> </head> <body> <img id='image' src='image0.jpg' onclick='changeImage()'> </body> </html> Code (markup): All images must have file name 'imageX.jpg', where X is the image number.