www.webdeveloper.com
Results 1 to 2 of 2

Thread: layered image user can customise javascript?

  1. #1
    Join Date
    Aug 2014
    Posts
    1

    layered image user can customise javascript?

    Hi,
    I have a script that preloads several images and displays an image that is selected by the user using a drop down box. The problem is that I need these images to be shown at the same time like its layered or masked?

    I start with an image of an iphone 5.
    The the user can select a colour home button from drop down box and that colour is an image of a home button that then gets placed in front of original image to give the appearance of an iPhone with a coloured home button.

    So i have lots of images of separate parts of the overall picture and i want the user to select which images can be seen...

    Any help or advice would be appreciated, I have understanding in various programming lang but not very good with javascript

    Thank You in advanvce

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #Images {
      position:relative;width:400px;height:400px;border:solid red 1px;
    }
    
    #Images IMG {
      width:150px;height:150px;float:left;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function ShowImages(id,v){
     var obj=document.getElementById(id),i,z0=0;
     if (obj&&v){
      i=obj.getElementsByTagName('IMG');
      v=','+v+',';
      for (;z0<i.length;z0++){
       i[z0].style.visibility=v.indexOf(','+z0+',')>=0?'visible':'hidden';
      }
    
     }
    }
    /*]]>*/
    </script>
    </head>
    
    <body>
    <select onchange="ShowImages('Images',this.value)" >
     <option value="0,1,2,3" >0,1,2,3</option>
     <option value="2,3" >2,3</option>
     <option value="1,3" >1,3</option>
     <option value="0" >0</option>
    </select>
    <div id="Images" >
     <img src="http://www.vicsjavascripts.org/StdImages/0.gif" />
     <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
     <img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
     <img src="http://www.vicsjavascripts.org/StdImages/3.gif" />
    
    
    </div>
    </body>
    
    </html>
    Last edited by vwphillips; 08-13-2014 at 09:38 AM.
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

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

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