Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Alternative to document.write to replace image on page?

    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


    Code:
    <!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>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    Okay, last time you posted you were using pure JavaScript.

    Now you are using a JS library--jQuery I would assume.

    The answer depends heavily on which you will use in the end. It seems to me like you are scattering questions without knowing what technology you will be using, no?

    Anyway, changing an image is the easiest of things to do. You simply change the src value of the image!

    Silly-assed example:
    Code:
    <html>
    <body>
    <img src="http://www.juncojunction.com/images/junco_hs.gif"
         onclick="this.src='http://www.juncojunction.com/images/junco_hsr.gif';" />
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <!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">     
             var changeImage = (function(){  
                this.args = arguments;    
                return function(el){
                    el.src = args[Math.floor(Math.random() * (+args.length))];
                    alert(el.src);
                }
             })('christmas-sweater-output-bacon.png' ,
    'christmas-sweater-output-martini.png' ,
    'christmas-sweater-output-kitty-litter.png' ,
    'christmas-sweater-output-spatula.png' ,
    'christmas-sweater-output-eiffel.png' ,
    'christmas-sweater-output-cotton-candy.png')
                       
            </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;
            }
            
            
            #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="apDiv3">
                <img onclick="showImage()" width="367" height="439" /></div>
        </div>
        <div id="heading">
            <h2>
                ChristmasSweaterFUN.</h2>
            <div id="com">
                <img src='christmas-sweater-output-bacon.png' alt="bacon"
                onclick="changeImage(this)" width="90" height="41" />
            </div>
        </div>
    </body>
    </html>
    hiyas , I messed up your layout a little,
    sorry, click the image .


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •