www.webdeveloper.com
Results 1 to 3 of 3

Thread: help on placing links on images from a gallery

  1. #1
    Join Date
    Aug 2010
    Posts
    2

    help on placing links on images from a gallery

    Hello, below there's a piece of my code:
    Code:
    onload = function() {
    	onresize = tv.resize;
    
    	/* ==== build grid ==== */
    	var imagesDiv = document.getElementById('bankImages');
    	var images = imagesDiv.getElementsByTagName('img');
    	var structure = [];
    	for (var i = 0; i < 5; i++) {
    		for (var j = 0; j < 5; j++) {
    				// the number of grid points and the number of actual images, repeating if necessary
    			var imageIdx = (i + 5 * j) % images.length;
    			structure.push ( {img:images[imageIdx], x:-300 + 120 * i, y:-300 + 120 * j, z:0, sw:.5, sh:.5} );
    		}
    	}
    
    	/* ==== let's go ==== */
    	tv.init(structure, 350, -200, .005, .0025);
    }
    and
    Code:
    <div id="screen"></div>
    <div id="bankImages">
    	<img alt="" src="photo3D-2_data/1.png" />
    	<img alt="" src="photo3D-2_data/2.png" />
    	<img alt="" src="photo3D-2_data/3.png" />
    	<img alt="" src="photo3D-2_data/4.png" />
    	<img alt="" src="photo3D-2_data/5.png" />
    	<img alt="" src="photo3D-2_data/6.png" />
    	<img alt="" src="photo3D-2_data/7.png" />
    	<img alt="" src="photo3D-2_data/8.png" />
    </div>
    The complete code can be found here: http://www.dhteumeuleu.com/wanna-tell-her/2/

    I've managed to modify it to take more than one picture, but i need links in there. If i simply wrap the img tag in a link, nothing really happens since the pictures show inside #screen, and the links don't get taken with them from #bankImages. Maybe i sound confusing since i'm new to this.
    You can check it here http://pr_test.0fees.net/wanna/

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><title>Wanna tell her - interactive DHTML</title>
    
    
    
    <meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
    <meta http-equiv="imagetoolbar" content="no">
    <style type="text/css">
    	html {
    		overflow: hidden;
    	}
    	body {
    		position: absolute;
    		margin: 0px;
    		padding: 0px;
    		background: #fff;
    		width: 100%;
    		height: 100%;
    	}
    	#screen {
    		position: absolute;
    		left: 10%;
    		top: 10%;
    		width: 80%;
    		height: 80%;
    		background: #fff;
    	}
    	#screen img {
    		position: absolute;
    		cursor: pointer;
    		width: 0px;
    		height: 0px;
    		-ms-interpolation-mode:nearest-neighbor;
    	}
    	#bankImages {
    		visibility: hidden;
    	}
    	#FPS {
    		position: absolute;
    		right: 5px;
    		bottom: 5px;
    		font-size: 10px;
    		color: #666;
    		font-family: verdana;
    	}
    
    </style>
    
    <script type="text/javascript">
    // =============================================================
    //           ===== photo 3D experiment II =====
    // script written by Gerard Ferrandez - January 3, 2009
    // http://www.dhteumeuleu.com
    // =============================================================
    
    /* ==== Easing function ==== */
    var Library = {};
    Library.ease = function () {
    	this.target = 0;
    	this.position = 0;
    	this.move = function (target, speed) {
    		this.position += (target - this.position) * speed;
    	}
    }
    
    var tv = {
    	/* ==== variables ==== */
    	O : [],
    	fps : 0,
    	screen : {},
    	angle : {
    		x : new Library.ease(),
    		y : new Library.ease()
    	},
    	camera : {
    		x    : new Library.ease(),
    		y    : new Library.ease()
    	},
    	create3DHTML : function (i, x, y, z, sw, sh,href) {
    		/* ==== create HTML image element ==== */
    		var o = document.createElement('img');
    		o.src = i.src;
    		tv.screen.obj.appendChild(o);
            if (href){
             var a=document.createElement('A');
             a.href=href;
             a.appendChild(o);
             tv.screen.obj.appendChild(a);
            }
    		/* ==== 3D coordinates ==== */
    		o.point3D = {
    			x  : x,
    			y  : y,
    			z  : new Library.ease(),
    			sw : sw,
    			sh : sh,
    			w  : i.width,
    			h  : i.height
    		};
    		o.point3D.z.target = z;
    		/* ==== push object ==== */
    		o.point2D = {};
    		tv.O.push(o);
    
    		/* ==== on mouse over event ==== */
    		o.onmouseover = function () {
    			if (this != tv.o) {
    				this.point3D.z.target = tv.mouseZ;
    				tv.camera.x.target = this.point3D.x;
    				tv.camera.y.target = this.point3D.y;
    				if (tv.o) tv.o.point3D.z.target = 0;
    				tv.o = this;
    			}
    			return false;
    		}
    
    		/* ==== on mousedown event ==== */
    		o.onmousedown = function () {
    			if (this == tv.o) {
    				if (this.point3D.z.target == tv.mouseZ) this.point3D.z.target = 0;
    				else {
    					tv.o = false;
    					this.onmouseover();
    				}
    			}
    		}
    
    		/* ==== main 3D function ==== */
    		o.animate = function () {
    			/* ==== 3D coordinates ==== */
    			var x = this.point3D.x - tv.camera.x.position;
    			var y = this.point3D.y - tv.camera.y.position;
    			this.point3D.z.move(this.point3D.z.target, this.point3D.z.target ? .15 : .08);
    			/* ==== rotations ==== */
    			var xy = tv.angle.cx * y  - tv.angle.sx * this.point3D.z.position;
    			var xz = tv.angle.sx * y  + tv.angle.cx * this.point3D.z.position;
    			var yz = tv.angle.cy * xz - tv.angle.sy * x;
    			var yx = tv.angle.sy * xz + tv.angle.cy * x;
    			/* ==== 2D transform ==== */
    			var scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
    			x = yx * scale;
    			y = xy * scale;
    			var w = Math.round(Math.max(0, this.point3D.w * scale * this.point3D.sw));
    			var h = Math.round(Math.max(0, this.point3D.h * scale * this.point3D.sh));
    			/* ==== HTML rendering ==== */
    			var o    = this.style;
    			o.left   = Math.round(x + tv.screen.w - w * .5) + 'px';
    			o.top    = Math.round(y + tv.screen.h - h * .5) + 'px';
    			o.width  = w + 'px';
    			o.height = h + 'px';
    			o.zIndex = 10000 + Math.round(scale * 1000);
    		}
    	},
    
    	/* ==== init script ==== */
    	init : function (structure, FL, mouseZ, rx, ry) {
    		this.screen.obj = document.getElementById('screen');
    		this.screen.obj.onselectstart = function () { return false; }
    		this.screen.obj.ondrag        = function () { return false; }
    		this.mouseZ = mouseZ;
    		this.camera.focalLength = FL;
    		this.angle.rx = rx;
    		this.angle.ry = ry;
    		/* ==== create objects ==== */
    		var i = 0, o;
    		while( o = structure[i++] )
    			this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh,o.href);
    		/* ==== start script ==== */
    		this.resize();
    		mouse.y = this.screen.y + this.screen.h;
    		mouse.x = this.screen.x + this.screen.w;
    		/* ==== loop ==== */
    		setInterval(tv.run, 16);
    		setInterval(tv.dFPS, 1000);
    	},
    
    	/* ==== resize window ==== */
    	resize : function () {
    		var o = tv.screen.obj;
    		if (o) {
    			tv.screen.w = o.offsetWidth / 2;
    			tv.screen.h = o.offsetHeight / 2;
    			for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent) {
    				tv.screen.x += o.offsetLeft;
    				tv.screen.y += o.offsetTop;
    			}
    		}
    	},
    
    	/* ==== main loop ==== */
    	run : function () {
    		tv.fps++;
    		/* ==== motion ease ==== */
    		tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * tv.angle.rx, .1);
    		tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * tv.angle.ry, .1);
    		tv.camera.x.move(tv.camera.x.target, .025);
    		tv.camera.y.move(tv.camera.y.target, .025);
    		/* ==== angles sin and cos ==== */
    		tv.angle.cx = Math.cos(tv.angle.x.position);
    		tv.angle.sx = Math.sin(tv.angle.x.position);
    		tv.angle.cy = Math.cos(tv.angle.y.position);
    		tv.angle.sy = Math.sin(tv.angle.y.position);
    		/* ==== loop through images ==== */
    		var i = 0, o;
    		while( o = tv.O[i++] ) o.animate();
    	},
    
    	/* ==== trace frames per seconds ==== */
    	dFPS : function () {
    		document.getElementById('FPS').innerHTML = tv.fps + ' FPS';
    		tv.fps = 0;
    	}
    }
    
    /* ==== global mouse position ==== */
    var mouse = {
    	x : 0,
    	y : 0
    }
    document.onmousemove = function(e) {
    	if (window.event) e = window.event;
    	mouse.x = e.clientX;
    	mouse.y = e.clientY;
    	return false;
    }
    
    /* ==== starting script ==== */
    onload = function() {
    	onresize = tv.resize;
    
    	/* ==== build grid ==== */
    	var imagesDiv = document.getElementById('bankImages');
    	var images = imagesDiv.getElementsByTagName('img');
    	var structure = [];
    	for (var i = 0; i < 5; i++) {
    		for (var j = 0; j < 5; j++) {
    				// the number of grid points and the number of actual images, repeating if necessary
    			var imageIdx = (i + 5 * j) % images.length;
        		structure.push ( {img:images[imageIdx], x:-300 + 120 * i, y:-300 + 120 * j, z:0, sw:.5, sh:.5, href:(images[imageIdx].parentNode.nodeName.toUpperCase()=='A'&&images[imageIdx].parentNode.href)?images[imageIdx].parentNode.href:false} );
    		}
    	}
    
    	/* ==== let's go ==== */
    	tv.init(structure, 350, -200, .005, .0025);
    }
    
    </script></head><body>
    
    <div id="screen"></div>
    
    <div id="bankImages">
    
    	<a href="http://google.ro"><img alt="" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />link for the first picture</a>
    	<img alt="" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" />
    
    </div>
    <div id="FPS">37 FPS</div>
    
    
    </body>
    </noscript>
    <div style="text-align: center;"><div style="position:relative; top:0; margin-right:auto;margin-left:auto; z-index:99999">
    <!-- Website Analytics Code -->
     <script type="text/javascript" language="javascript" src="http://analytics.hosting24.com/do.php"></script>
     <noscript>
     <a href="http://www.hosting24.com/" target="_blank"><img src="http://analytics.hosting24.com/do.php" alt="web hosting" border="0"></a>
     </noscript>
     <!-- End of Website Analytics Code -->
    
    </div></div>
    
    </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/

  3. #3
    Join Date
    Aug 2010
    Posts
    2

    well

    I could have done that too! In 6 months or so.
    Thanks, you're a God

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