rc-web@42: <svg width="100%" height="100%"   
rc-web@42:      xmlns="http://www.w3.org/2000/svg"
rc-web@42:      xmlns:xlink="http://www.w3.org/1999/xlink" 
rc-web@42:      onload="startUp(evt)" onmousemove="mouseMove(evt)"     
rc-web@42: >
rc-web@42: 
rc-web@42: <script>
rc-web@42: 
rc-web@42: <![CDATA[
rc-web@42: 
rc-web@42: var xmlns="http://www.w3.org/2000/svg";
rc-web@42: var xmlnsxlink="http://www.w3.org/1999/xlink" ;
rc-web@42: 
rc-web@42: var numpics = 17;
rc-web@42: var smallW = 50;
rc-web@42: var smallH = 50;
rc-web@42: var bigW = 100;
rc-web@42: var bigH = 100;
rc-web@42: var bigLength = 100;
rc-web@42: var centerX = 350;
rc-web@42: var centerY = 350;
rc-web@42: var centerW = 300;
rc-web@42: var centerH = 300;
rc-web@42: var centerID = numpics - 1;
rc-web@42: var centerPic ;
rc-web@42: var radiusC = 250;
rc-web@42: var img = new Array();
rc-web@42: var angle = 2*Math.PI/(numpics-1);
rc-web@42: 
rc-web@42: function startUp(evt)
rc-web@42: {
rc-web@42:  for (i=0; i<centerID; i++) {
rc-web@42:      img[i] = document.createElementNS(xmlns,"image");
rc-web@42:      img[i].setAttributeNS(null,"id",i);
rc-web@42:      img[i].setAttributeNS(null,"width",smallW);
rc-web@42:      img[i].setAttributeNS(null,"height",smallH);
rc-web@42:      x = getX(i);
rc-web@42:      y = getY(i);
rc-web@42:      img[i].setAttributeNS(null,"x",x);
rc-web@42:      img[i].setAttributeNS(null,"y",y);  
rc-web@42:      img[i].setAttributeNS(xmlnsxlink,"href","../images/goldengate/gg"+i+".jpg");
rc-web@42:      img[i].addEventListener("click", mouseClick,false);
rc-web@42:      document.getElementById("pictures").appendChild(img[i]);
rc-web@42:   } 
rc-web@42:   i = centerID; 
rc-web@42:   img[i] = document.createElementNS(xmlns,"image");
rc-web@42:   img[i].setAttributeNS(null,"id",i);
rc-web@42:   img[i].setAttributeNS(null,"width",centerW);
rc-web@42:   img[i].setAttributeNS(null,"height",centerH);
rc-web@42:   img[i].setAttributeNS(null,"x",centerX-centerW/2);
rc-web@42:   img[i].setAttributeNS(null,"y",centerY-centerH/2);  
rc-web@42:   img[i].setAttributeNS(xmlnsxlink,"href","../images/goldengate/gg"+i+".jpg");
rc-web@42:   img[i].addEventListener("click", mouseClick,false);
rc-web@42:   document.getElementById("pictures").appendChild(img[i]);
rc-web@42:   centerPic = "../images/goldengate/gg"+i+".jpg";
rc-web@42: }
rc-web@42: 
rc-web@42: // left x 
rc-web@42: function getX(i)
rc-web@42: {
rc-web@42:   var x = centerX + radiusC*Math.cos(angle*i)-getW(i)/2
rc-web@42:   return x;
rc-web@42: }
rc-web@42: 
rc-web@42: // top y 
rc-web@42: function getY(i)
rc-web@42: {
rc-web@42:   var y = centerY + radiusC*Math.sin(angle*i)-getH(i)/2;
rc-web@42:   return y;
rc-web@42: }
rc-web@42: 
rc-web@42: // center x 
rc-web@42: function getXc(i)
rc-web@42: {
rc-web@42:   var xc = centerX + radiusC*Math.cos(angle*i);
rc-web@42:   return xc;
rc-web@42: }
rc-web@42: 
rc-web@42: // center y
rc-web@42: function getYc(i)
rc-web@42: {
rc-web@42:   var yc = centerY + radiusC*Math.sin(angle*i);
rc-web@42:   return yc;
rc-web@42: }
rc-web@42: 
rc-web@42: // get width
rc-web@42: function getW(i)
rc-web@42: {
rc-web@42:    return img[i].getAttributeNS(null,"width");
rc-web@42: }
rc-web@42: 
rc-web@42: // get height
rc-web@42: function getH(i)
rc-web@42: {
rc-web@42:    return img[i].getAttributeNS(null,"height");
rc-web@42: }
rc-web@42: 
rc-web@42: 
rc-web@42: /* Swap the picked picture with the picture at the center */
rc-web@42: 
rc-web@42: function mouseClick(evt)
rc-web@42: {     
rc-web@42:    var idPicked = evt.target.getAttributeNS(null,"id");
rc-web@42:    var imgPicked = evt.target.getAttributeNS(xmlnsxlink,"href");
rc-web@42:        
rc-web@42:    // picked
rc-web@42:    img[idPicked].setAttributeNS(xmlnsxlink,"href", centerPic);
rc-web@42: 
rc-web@42:    // center
rc-web@42:    img[centerID].setAttributeNS(xmlnsxlink,"href",imgPicked);
rc-web@42:    centerPic = imgPicked;     
rc-web@42: }
rc-web@42: 
rc-web@42: 
rc-web@42: function mouseMove(evt)
rc-web@42: {  
rc-web@42:    var xm = evt.clientX;
rc-web@42:    var ym = evt.clientY;
rc-web@42: 
rc-web@42:    var id = parseInt(evt.target.getAttributeNS(null,"id"));
rc-web@42: 
rc-web@42:    /* If a mouse is far away from any picture, 
rc-web@42:       just return without modifying the picture. */
rc-web@42: 
rc-web@42:    var distance = Math.sqrt( 
rc-web@42:           (xm-centerX)*(xm-centerX) + (ym-centerY)*(ym-centerY) );  
rc-web@42:    if(distance < (radiusC - bigLength) || 
rc-web@42:            distance > (radiusC + bigLength ) ) {   
rc-web@42:         return;
rc-web@42:    }
rc-web@42:  
rc-web@42:    /* Calculate the distance of each picture from a mouse
rc-web@42:       and set the size of pictures depending on the distance.  */
rc-web@42: 
rc-web@42:    var distMin;
rc-web@42:    var distMax = radiusC * 2;
rc-web@42:    var x,y,xc,yc,h,w;
rc-web@42:    var wNew = new Array();
rc-web@42:    var hNew = new Array();
rc-web@42: 
rc-web@42:    for (i=0; i<numpics-1; i++)
rc-web@42:    {
rc-web@42:      xc = getXc(i);
rc-web@42:      yc = getYc(i);
rc-web@42:      distance= Math.sqrt(
rc-web@42:      (xm-xc)*(xm-xc)+(ym-yc)*(ym-yc) );
rc-web@42:      h = getH(i);
rc-web@42:      w = getW(i);
rc-web@42:      distMin = Math.sqrt(h*h+w*w)/2;
rc-web@42:      wNew[i] = (smallW-bigW)/(distMax - distMin)*distance + bigW;
rc-web@42:      hNew[i] = (smallH-bigH)/(distMax - distMin)*distance + bigH;
rc-web@42:    }
rc-web@42:  
rc-web@42:    for (i=0; i<numpics-1; i++)
rc-web@42:    {  
rc-web@42:      xc = getXc(i);
rc-web@42:      yc = getYc(i);
rc-web@42:      x = xc - wNew[i]/2;
rc-web@42:      y = yc - hNew[i]/2;
rc-web@42:      img[i].setAttributeNS(null,"width", wNew[i]);
rc-web@42:      img[i].setAttributeNS(null,"height", hNew[i]);
rc-web@42:      img[i].setAttributeNS(null,"x", x);
rc-web@42:      img[i].setAttributeNS(null,"y", y);
rc-web@42:    }
rc-web@42: }
rc-web@42: 
rc-web@42: 
rc-web@42: //]]>
rc-web@42: </script>
rc-web@42: 
rc-web@42: 
rc-web@42: <rect x="0" y="0" width="100%" height="100%" fill="white" />
rc-web@42: 
rc-web@42: <g id="pictures" />
rc-web@42: 
rc-web@42: <!-- text % -->
rc-web@42: <text id="ggText" x="270" y="490" font-size="20" fill="#ff4f00">
rc-web@42: Golden Gate Bridge</text>
rc-web@42: 
rc-web@42: </svg>