Javascript solution for image link issue

**jundo12** · 03-31-2017, 05:27 AM

oh wait. it's working! yehaaa!

thank you, mr. genius.

**jscheuer1** · 03-31-2017, 05:31 AM

I think perhaps you just copied the script and/or maybe just the style into your code pen without realizing there were several other changes. Maybe not. Anyways, it worked here, and I decided to make it more specific, and put up a demo:

http://john.dynamicdrive.com/demos/t...oom-h/demo.htm

Let me know if that works or not, if not, what browser and OS are you using?

**jundo12** · 03-31-2017, 05:44 AM

it's really odd but sometimes it works and sometimes it doesnt. google chrome. windows 7
also, i had a div at the bottom, outside the zoom code, that positioned an absolute div over top of the zoom at a z-index of 9999.. it was centered and not in the way of the image zooms i needed to be clickable. now, for whatever reason, i can't seem to get the div to show up at all. any idea why it wouldn't display?

**jundo12** · 03-31-2017, 05:49 AM

here's my version

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html {
		overflow: hidden;
		touch-action: none;
		content-zooming: none;
}

body {
		position: absolute;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		background: #000;
}

s-creen {
		position: absolute;
		width: 100vw;
		height: 100vh;
		max-width: 100%;
		max-height: 100%;
		margin: auto;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
}

z-oom {
		position: absolute;
		width: 100%;
		height: 100%;
		margin: auto;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		transition: transform 2s ease-in-out 0s;
		transform: scale3d(0.000729, 0.000729, 1);
}

s-creen img {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0%;
		left: 0%;
		margin-left: 0px;
		margin-top: 0px;
		cursor: pointer;
}

z-oom img:nth-child(7) {transform: scale3d(1, 1, 1);}
z-oom img:nth-child(6) {transform: scale3d(3.3333, 3.3333, 1);}
z-oom img:nth-child(5) {transform: scale3d(11.1111, 11.1111, 1);}
z-oom img:nth-child(4) {transform: scale3d(37.037, 37.037, 1);}
z-oom img:nth-child(3) {transform: scale3d(123.4567, 123.4567, 1);}
z-oom img:nth-child(2) {transform: scale3d(411.5226, 411.5226, 1);}
z-oom img:nth-child(1) {transform: scale3d(1371, 1371, 1);}

s-creen input[type="radio"] + label {
		position: absolute;
		bottom: 10px;
		width: 8%;
		height: 30px;
		cursor: pointer;
		background: black;
		margin: 0;
		z-index: 100;
		border-radius:5px;
		outline: none;
				border-radius:6px;
		border: 1px solid aqua;
}

#i1 + label {left: 16%;}
#i2 + label {left: 26%;}
#i3 + label {left: 36%;}
#i4 + label {left: 46%;}
#i5 + label {left: 56%;}
#i6 + label {left: 66%;}
#i7 + label {left: 76%;}

s-creen > input {
	position:absolute;
	top:-1000px;
}

s-creen > input:checked + label {background: #f80;}

#i1:checked ~ z-oom {transform: scale3d(0.000729, 0.000729, 1);}
#i2:checked ~ z-oom {transform: scale3d(0.00243, 0.00243, 1);}
#i3:checked ~ z-oom {transform: scale3d(0.0081, 0.0081, 1);}
#i4:checked ~ z-oom {transform: scale3d(0.027, 0.027, 1);}
#i5:checked ~ z-oom {transform: scale3d(0.09, 0.09, 1);}
#i6:checked ~ z-oom {transform: scale3d(0.3, 0.3, 1);}
#i7:checked ~ z-oom {transform: scale3d(1, 1, 1);}
</style>
</head>
<body>


<s-creen><font face="arial" color="aqua">

	
		
	
		<input id="i1" data-link="http://www.google.com/" name="doot" type="radio" checked>
		<label for="i1">Food</label>
		<input id="i2" data-link="http://www.dynamicdrive.com/" name="doot" type="radio">
		<label for="i2"></label>
		<input id="i3" data-link="http://www.bing.com/" name="doot" type="radio">
		<label for="i3">Engine</label>
		<input id="i4" data-link="http://jscheuer1.com/" name="doot" type="radio">
		<label for="i4"></label>
		<input id="i5" data-link="http://www.oceanconservancy.org/site/PageServer?pagename=home" name="doot" type="radio">
		<label for="i5">Cabin</label>
		<input id="i6" data-link="http://www.theirc.org/" name="doot" type="radio">
		<label for="i6">Flight</label>
		<input id="i7" data-link="http://www.dynamicdrive.com/forums/showthread.php?81069-Javascript-solution-for-image-link-issue#post321398" name="doot" type="radio">
		<label for="i7"></label>
	
		<z-oom>
				 <img src="Images1c.png" alt="">
		        <img src="Images1.png" alt=""> 
				<img src="Images1b.png" alt="">
		        <img src="Images1.png" alt=""> 
		    	<img src="Images1t.png" alt=""> 
				
				
		</z-oom>
	
</s-creen>





<script>
/*

To meet my beloved. This I dreamed of a thousand times. Each time I got nearer, but never reached her. Still, it was a beautiful dream.

*/

(function(){
	var inp = document.getElementsByTagName('input'),
	img = document.images, ln = inp.length, currid = 'i1';
	while(--ln > -1){
		inp[ln].addEventListener('click', function(){
			currid = this.id;
		}, false);
		img[ln].addEventListener('click', function(){
			window.location.href = document.getElementById(currid).getAttribute('data-link');
		}, false);
	}
})();
</script>

<div id="foo" style="position: absolute; left: 45%; top:70%;  z-index: 9999; width: 20%;">
							<img src="earthfemalebackblondeidle.gif" width="71%" style="z-index: 9999;"><img src="stand.png" width="100%">
					
						</div><div id="foo" style="position: absolute; left: 30%; top:45%;  z-index: 9998; width: 40%;">
							<img src="stand.png" width="90%">
					
						</div></body>
</html>

**jscheuer1** · 03-31-2017, 05:55 AM

Perhaps my demo, which is more specific, would resolve the issue:

http://john.dynamicdrive.com/demos/t...oom-h/demo.htm

But I'm sure it's possible that if you're introducing another element or elements and overlaying it/them via z-index on top of the display of zoomed images, things could break down. To help further, I would need to see what you currently have. My demo appears to work consistently in Chrome, FF, Opera (all latest versions) and IE 11, all under Win 7. But if my demo fails in any of those occasionally (possible), please state what I must do to replicate the failure.

**jscheuer1** · 03-31-2017, 06:03 AM

MMMM, in your post:

http://www.dynamicdrive.com/forums/s...405#post321405

You've changed things quite a bit. My demo relied upon the fact that there were the same number of input buttons as images. I copied your code from that post, but without the images that go with it I'm having trouble visualizing what you're trying for. It's hard to hit a moving target.

**jundo12** · 03-31-2017, 06:04 AM

the first two links work but the second two don't.

on the first, third, fifth and sixth images i have the need for links. i really don't need to link all the images in my zoom.

in fact i have 1 or 2 images less in my zoom than the original, primarily because i am using them at 100 percent width/height and the code he wrote has limitations based on browser memory perhaps? my zoom covers the entire browser window

**jundo12** · 03-31-2017, 06:09 AM

hmm. i need to buy a website server i think. just everything is so expensive nowdays and last time i did that, they kept sneaking in new costs and auto charge them to my card. i can describe my images.

they are a series of images of a tunnel, like a tram or a subway. every input button that is labelled *only 4 of them are labelled* corresponds to an image with a door in the wall of the tunnel that goes to the left or to the right, and one door is at the end of the zoom. each of those 4 images that the labelled input buttons go to, needs to be linkable. so far, two of them are working links, and 2 are not. it's as if the final two images are being effected by my changes perhaps? do all your image links work in your zoom example? i mean full click thru, including the last two? if so i may have messed something up with my changes. i don't want all the input buttons. only 4. i only need the first, third, fifth and sixth images to be linkable. however, i don't know at this point, if my version of what is first , third, fifth and sixth, is actually the first, third, fifth and sixth images in the original lol been struggling with it for awhile and moving things around

**jundo12** · 03-31-2017, 06:33 AM

the zindexed divs, outside the code are showing now. i'm going to remove them to see if they are making the last two images unclickable. can't imagine why but ya never know.

nope didn't work

**jundo12** · 03-31-2017, 07:41 AM

i copied the last one you linked, changed the width and height, changed the color and location of the input buttons, changed the amount of input buttons, put my zindexed div over top, and now 3 of the 4 images are clickable. as far as i know, the only thing i did differently this time was keep the last two img srcs in the zoom, even though there's no image data in them, i erased the image html, so they are just blank img srcs. <img src="" alt="">

what the heck lol