www.webdeveloper.com
Results 1 to 9 of 9

Thread: Operating on multiple objects

  1. #1
    Join Date
    Jul 2014
    Posts
    4

    Operating on multiple objects

    Hello people, I'm having trouble figuring out how to solve the following problem, I'm still a novice at this stuff so have patience please. I'm trying to make a webpage that uses JS to translate clicking on an image (floorplan of a building) to popping up a slideshow of corresponding images. So for example if someone clicks on the "bedroom" part of the floorplan it will pop up a slideshow of bedroom pictures, and same with the bathroom, ect. The scripts I've found online only make enlarged windows of that picture or make a slideshow of a set of pictures.

    What's the best way to do this? I'll be grateful for any help on this.

  2. #2
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    The way I see it the only problem here is if you are trying to find someone to write you a code or you are asking for assistance in writing a code. It's a huge difference between those two.

  3. #3
    Join Date
    Jul 2014
    Posts
    4
    I'm trying to get help. If someone can point to an example, that would be great, if they can explain in which operators to use and how to link it, that would be fine as well.

  4. #4
    Join Date
    Mar 2009
    Posts
    512
    Try googling "HTML image map." Most of the functionality you need can be handled without javascript. That ought to help you get started.

  5. #5
    Join Date
    Jul 2014
    Posts
    4
    I did that and I made an image map, can I source parts of the map for JS?

  6. #6
    Join Date
    Nov 2010
    Posts
    1,090
    a simple example:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    </head>
    
    <body>
    
    <p>Click on the sun or on one of the planets to see its name:</p>
    
    <img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
    
    <map name="planetmap">
      <area shape="rect" coords="0,0,82,126" alt="Sun">
      <area shape="circle" coords="90,58,3" alt="Mercury">
      <area shape="circle" coords="124,58,8" alt="Venus">
    </map>
    <script>
    var ars = document.querySelectorAll("area");
    for (var i = 0; i < ars.length; i++) {
    ars[i].onclick=function () {
    alert(this.alt);
    }
    }
    </script>
    </body>
    </html>

  7. #7
    Join Date
    Jul 2014
    Posts
    4
    thank you that's very helpful

  8. #8
    Join Date
    Jul 2014
    Posts
    26
    Try to get the solution of your problem from online solution sites, from there you got exact solution of any problem. Well the above code is also very useful for the task you want to do.

  9. #9
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    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>
    <base href="http://www.vicsjavascripts.org/StdImages/"  />
    <style type="text/css">
    /*<![CDATA[*/
    #mapPop1 {
     z-Index:101;border:solid red 1px;padding:10px;background-Color:#FFFFCC;padding-Bottom:0px;
    }
    
    #mapPop2 {
     z-Index:101;border:solid red 1px;padding:10px;background-Color:#FFFFCC;padding-Bottom:0px;
    }
    
    #mapPop3 {
     z-Index:101;border:solid red 1px;padding:10px;background-Color:#FFFFCC;padding-Bottom:0px;
    }
    
    #mapPop4 {
     z-Index:101;border:solid red 1px;padding:10px;background-Color:#FFFFCC;padding-Bottom:0px;
    }
    
    .caption {
     z-Index:101;margin-Top:5px;margin-Bottom:5px;text-Align:center;background-Color:#FFFFCC;border:solid red 1px;
    }
    
    .next {
      position:absolute;left:5px;top:105px;width:20px;height:20px;background-Color:red;cursor:pointer;
    }
    
    .back {
      position:absolute;right:5px;top:105px;width:20px;height:20px;background-Color:red;cursor:pointer;
    }
    
    .mask {
      z-Index:100;left:0px;top:0px;width:100%;height:100%;background-Color:#99FFFF;
    /* Moz */
      opacity: .5;
    /* IE5-7 */
      filter: alpha(opacity=50);
    /* IE8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    
    /*]]>*/
    </style></head>
    
    <body>
    <img src="http://www.vicsjavascripts.org/StdImages/Egypt5678.jpg" usemap="#ImageMap4" ismap="ismap" border="0" />
     <map name="ImageMap4" id="map4" >
      <area shape="rect" alt="" coords="0,0,100,75"  onclick="zxcImagePopUp.Open('mapPop1');" />
      <area shape="rect" alt="" coords="100,0,200,75"  onclick="zxcImagePopUp.Open('mapPop2');" />
      <area shape="rect" alt="" coords="0,75,100,150"  onclick="zxcImagePopUp.Open('mapPop3');" />
      <area shape="rect" alt="" coords="100,75,200,150"  onclick="zxcImagePopUp.Open('mapPop4');" />
    </map>
    <script> vic=0; </script>
    <form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
    <input size=100 name=Show0 >
    <input size=10 name=Show1 >
    <input size=10 name=Show2 >
    <input size=10 name=Show3 >
    <input size=10 name=Show4 >
    <input size=10 name=Show5 >
    <input size=10 name=Show6 >
    <input size=10 name=Show7 >
    <input size=10 name=Show8 >
    <input size=10 name=Show9 ><br>
    <textarea name=TA rows=1 cols=100 ></textarea>
    </form>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Image PopUp (08-May-2014)
    // by Vic Phillips http://www.vicsjavascripts.org
    
    var zxcImagePopUp={
    
     Open:function(id){
      var oop=this,o=oop['zxc'+id],c;
      if (o){
       clearTimeout(o.to);
       if (!o.ud){
        c=o.ia[1][o.ia[0]];
        o.c.innerHTML=c[1]||'';
        o.ni=new Image();
        o.ni.src=c[0];
        o.to=setTimeout(function(){ oop.load(o,false); },100);
       }
       else {
        oop.open(o,false);
        if (src.slice(src.lastIndexOf('/')+1)!=o.ni.src.slice(o.ni.src.lastIndexOf('/')+1)){
         o.nxt=[src,c];
        }
       }
      }
     },
    
     Next:function(id,ud){
      var oop=this,o=oop['zxc'+id],c,l;
      if (o){
       l=o.ia[1].length-1;
       o.ia[0]+=ud;
       o.ia[0]=o.ia[0]<0?l:o.ia[0]>l?0:o.ia[0];
       c=o.ia[1][o.ia[0]];
       o.c.innerHTML=c[1]||'';
       o.ni=new Image();
       o.ni.src=c[0];
       o.to=setTimeout(function(){ oop.load(o,false); },100);
      }
     },
    
     init:function(o){
      var id=o.ID,m=o.ClipMode,ia=o.ImageArray,mc=o.MaskClass,ms=o.Animate;
      if (typeof(id)=='string'&&!this['zxc'+id]){
       var m=typeof(m)=='string'?m.charAt(0).toUpperCase():'C',p=document.createElement('DIV'),mk=p.cloneNode(false),c=p.cloneNode(true),i=document.createElement('IMG'),msk,z0=0;
       mk.style.position=p.style.position='fixed';
       msk=mk.cloneNode(true);
       mk.style.right=mk.style.bottom=mk.style.width=mk.style.height=msk.style.left=msk.style.width='0px';
       p.style.left=p.style.top=c.style.left=c.style.top=msk.style.top='-30000px';
       p.id=id;
       msk.className=mc;
       c.className='caption';
       document.body.appendChild(mk);
       typeof(mc)=='string'?document.body.appendChild(msk):null;
       p.appendChild(i);
       document.body.appendChild(p);
       p.appendChild(c);
       p.style.width='200px'
       o.id=id;
       o.m=Math.max(('CHVDRUL?').indexOf(m),0);
       o.n=0;
       o.p=p;
       o.i=i;
       o.a=[['clip',[]],['left',[]],['top',[0]]];
       o.c=c;
       o.mk=mk;
       o.msk=msk;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.ia=[0,[]];
       for (var z0=0;z0<ia.length;z0++){
        o.ia[1][z0]=ia[z0];
       }
       i=document.createElement('DIV')
       i.className='next';
       this.addevt(i,'click','Next',id,1);
       p.appendChild(i);
       i=document.createElement('DIV')
       i.className='back';
       this.addevt(i,'click','Next',id,-1);
       p.appendChild(i);
       this.addevt(document,'click','close',o);
       this.addevt(window,'resize','resize',o);
       this['zxc'+id]=o;
      }
     },
    
     load:function(o){
      var oop=this;
      clearTimeout(o.to);
      if (o.ni.width<40){
       return o.to=setTimeout(function(){ oop.load(o); },100);
      }
      o.i.src=o.ni.src;
      o.p.style.width=o.i.style.width=o.ni.width+'px';
      o.i.style.height=o.ni.height+'px';
      this.open(o,true);
     },
    
     open:function(o,ud){
      o.msk.style.left=o.msk.style.top='0px';
      o.msk.style.width='100%';
      o.msk.style.height=o.mk.offsetTop+'px';
      var w=o.p.offsetWidth,h=o.p.offsetHeight,l=(o.mk.offsetLeft-w)/2,t=(o.mk.offsetTop-h)/2,c=[[h/2,w/2,h/2,w/2],[0,w/2,h,w/2],[h/2,w,h/2,0],[0,w,0,0],[0,0,h,0],[h,w,h,0],[0,w,h,w]],n=o.m;
      if (ud&&o.m==7){
       n=Math.floor(Math.random()*7);
       while (n==o.n){
        n=Math.floor(Math.random()*7);
       }
      }
      ud?o.n=n:null;
      o.a[1][1]=[l];
      o.a[2][1]=[t];
      o.p.style.left=l+'px';
      o.p.style.top=t+'px';
      this.animate(o,o.a[0],ud?c[o.n]:o.a[0][1],ud?[0,w,h,0]:c[o.n],new Date(),o.ms,ud);
      o.ud=ud;
     },
    
     animate:function(o,a,f,t,srt,mS,nxt){
      clearTimeout(a[2]);
      var oop=this,ms=new Date()-srt,n,z0=0;
      for (;z0<t.length;z0++){
       n=(t[z0]-f[z0])/mS*ms+f[z0];
       a[1][z0]=isFinite(n)?Math.max(0,n):t[z0];
      }
      a[0]=='clip'?oop.clip(o,a[1]):o.p.style[a[0]]=a[1][0]+'px';
      if (ms<mS){
       a[2]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,nxt); },10);
      }
      else {
       a[1]=t.concat();
       a[0]=='clip'?oop.clip(o,t):o.p.style[a[0]]=t[0]+'px';
       if (nxt!==true){
        o.p.style.left=o.p.style.top=o.msk.style.left=o.msk.style.top='-30000px';
        o.msk.style.width=o.msk.style.height='0px';
        if (o.nxt){
         oop.Open(o.id,o.nxt[0],o.nxt[1]);
         o.nxt=false;
        }
       }
      }
     },
    
     clip:function(o,a){
      o.p.style.clip='rect('+a[0]+'px,'+a[1]+'px,'+a[2]+'px,'+a[3]+'px)';
     },
    
     close:function(o,p1,e){
      if (o.ud){
       if (e&&e.type){
        e=e.target?e.target:e.srcElement;
        while (e.parentNode){
         if (e==o.p){
          return false;
         }
         e=e.parentNode;
        }
       }
       this.open(o,false);
      }
     },
    
     resize:function(o){
      if (o.ud){
       o.msk.style.height=o.mk.offsetTop+'px';
       this.animate(o,o.a[1],o.a[1][1],[(o.mk.offsetLeft-o.p.offsetWidth)/2],new Date(),o.ms/4);
       this.animate(o,o.a[2],o.a[2][1],[(o.mk.offsetTop-o.p.offsetHeight)/2],new Date(),o.ms/4);
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,e);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); }):null;
     }
    
    
    
    }
    
    zxcImagePopUp.init({
     ID:'mapPop1',           // the unique ID name of the PopUp DIV.                     (string)
     ClipMode:'C',           // the clip mode, C, H, V, D, R, U,L or ?.                  (string)
     MaskClass:'mask',       //(optional) image mask class name.                         (string, default = no image mask)
     ImageArray:[
      ['0.gif','image 1'],
      ['1.gif','image 2'],
      ['2.gif','image 3']
     ],
     Animate:1000            //(optional) the animation duration in millisec.            (string, default = 1000)
    });
    
    zxcImagePopUp.init({
     ID:'mapPop2',           // the unique ID name of the PopUp DIV.                     (string)
     ClipMode:'C',           // the clip mode, C, H, V, D, R, U,L or ?.                  (string)
     MaskClass:'mask',       //(optional) image mask class name.                         (string, default = no image mask)
     ImageArray:[
      ['3.gif','image 1'],
      ['4.gif','image 2'],
      ['5.gif','image 3']
     ],
     Animate:1000            //(optional) the animation duration in millisec.            (string, default = 1000)
    });
    
    zxcImagePopUp.init({
     ID:'mapPop3',           // the unique ID name of the PopUp DIV.                     (string)
     ClipMode:'C',           // the clip mode, C, H, V, D, R, U,L or ?.                  (string)
     MaskClass:'mask',       //(optional) image mask class name.                         (string, default = no image mask)
     ImageArray:[
      ['6.gif','image 1'],
      ['7.gif','image 2'],
      ['8.gif','image 3']
     ],
     Animate:1000            //(optional) the animation duration in millisec.            (string, default = 1000)
    });
    
    zxcImagePopUp.init({
     ID:'mapPop4',           // the unique ID name of the PopUp DIV.                     (string)
     ClipMode:'C',           // the clip mode, C, H, V, D, R, U,L or ?.                  (string)
     MaskClass:'mask',       //(optional) image mask class name.                         (string, default = no image mask)
     ImageArray:[
      ['Egypt5.jpg','image 1'],
      ['Egypt6.jpg','image 2'],
      ['Egypt7.jpg','image 3']
     ],
     Animate:1000            //(optional) the animation duration in millisec.            (string, default = 1000)
    });
    /*]]>*/
    </script>
    </body>
    
    </html>
    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