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
--
Freedom is the right of all sentient beings...
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>
--
Freedom is the right of all sentient beings...
