www.webdeveloper.com
Results 1 to 3 of 3

Thread: Modify Existing Image

  1. #1
    Join Date
    Jun 2010
    Posts
    1

    Modify Existing Image

    Hello,

    I am trying to change an image by having the user click different buttons. For example:

    I have an image of a plain wedding band. I want the user to be able to "add" items such as, diamond, ruby, emerald; shape; size;

    I am familiar with Onclick but I don't know how to make the images "stack" without having to have dozens of images

  2. #2
    Join Date
    Jan 2008
    Location
    Florida
    Posts
    1,227
    This could get tricky. You may have to create multiple layers of graphics with transparent backgrounds and use CSS positioning and z-indexing.. but by time you've done all that it would be easier to simply create an image for each possibility

  3. #3
    Join Date
    Mar 2010
    Posts
    2,803
    maybe use this as a guide and starting point.

    The code has a div for the wedding band image and then divs for your diamond, ruby and emerald images stacked on top of the wedding band and not displayed by default.

    There are show/hide display buttons for each of the diamond, ruby and emerald divs. Clicking the buttons toggles the respective image between being displayed and not displayed.

    You can then tweak the css positions, sizes etc and the html to get exactly what you want.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>
    <
    style type="text/css">
     
    #wedding_band {
    positionrelative;
    displayblock;
    width500px;
    height500px;
    background-colorgreen}
     
    #diamond {
    positionabsolute;
    top100px;
    left50px;
    background-colororange;
    width100px;
    height100px}
     
    #ruby {
    positionabsolute;
    top150px;
    left100px;
    background-colorbrown;
    width100px;
    height100px}
     
    #emerald {
    positionabsolute;
    top200px;
    left250px;
    background-colorwhite;
    width100px;
    height100px}
     
    </
    style>
     
    <
    script type="text/javascript">
     
    function 
    showHideElem(elemId) {
    elemO document.getElementById(elemId);
    if(
    elemO.style.display == 'none') {
        
    elemO.style.display 'block'
    } else {
        
    elemO.style.display 'none'
    }
    }
     
    window.onload=function() {
           
    document.getElementById('diamond').style.display 'none';
           
    document.getElementById('ruby').style.display 'none';
           
    document.getElementById('emerald').style.display 'none';
    }
    </script>
    </head>
    <body>
     
    <div id="wedding_band">
          Wedding band
          <div id="diamond">Diamond</div>
         <div id="ruby">Ruby</div>
         <div id="emerald">Emerald</div>     
    </div>
     
    <div>
           <button onclick="showHideElem('diamond')">Show Hide Diamond</button>
            <button onclick="showHideElem('ruby')">Show Hide Ruby</button>
            <button onclick="showHideElem('emerald')">Show Hide Emerald</button>
    </div>
     
    </body>
    </html> 

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles