Javascript solution for image link issue

[jundo12]

and now all 4 are working. i had removed input buttons 2, 4 and 7. i just put 7 back in and now all four are clickable. lol

woot and sheesh. this thing is so sensitive.

[jscheuer1]

Well we don't have to have one to one equivalency between the inputs and the images, and there can be other images and other inputs on the page. But then we must access them in a more specific manner in javascript so as not to create unwanted associations, and/or not attempt to access elements that might not be there. But there's another potential issue once you get involved with anything else positioned. Even if you can see through it, a later (later in the DOM - usually the same as later in the HTML code) element will block the ability to click on an earlier element if it's over the earlier element or has a higher z-index, even an earlier element can "cover" a later one if it has a higher z-index or if it's the only one of the two which is positioned. Using zoom and other styles can sometimes have the same results as positioning, but I see you're also using position for everything, at least in the first code pen demo.

Here's what you could do. Setup a code pen that has what you want in it, the whole thing, including any images. Tell me which images in it you want linked. I should be able to take it from there.

[jundo12]

it's working now. i'm having fun with it, zooming back and forth. lol thank you again for the help!

i am stuck on a new problem. well i've been struggling with it for awhile now *like a couple years*
it's three.js webgl of the planet earth and a moon, in 3d. i've been trying to wrap my head around how to
click a 2d image link and make the camera move to a planet in 3d space. it's a canvas, unfortunately, and they
are just not link friendly so i can't even figure out how to get the 2d link to work much less how to get it to
move the camera. was also trying to figure out how to get it to load into a new html page when you reach a certain
coordinate above the planet's surface. here's the code
https://threejs.org/examples/misc_controls_fly.html

[jundo12]

and another question:
during the zoom, if i have an image in the series that depicts a curvature (like a camera going thru a curving tunnel), could the zoom curve as well? i mean is there a way to make it skew from the straight forward view? whats actually moving, the camera or the browser? err that's not the right question. what's moving, the camera or the scene? bleh i can't think of the right way to describe it. is the scene coming to and passing by the camera or is the camera going thru the scene?

[jundo12]

as regards the 3d planet questions, i did attempt to learn how to add a href image link but even the one that is embedded in the script already doesn't appear to be working. so something may have changed in three.js since that planet script was written that caused that feature to break - an issue i must say, that makes this type of coding even harder to learn.

i attempted to learn how to load a new html page when a coordinate range was reached in 3d space, but it just reads like goobedly gook to me, as i am just a newb and a bit old (cant teach an old dog new tricks?). first of all the answers are scant to not available, so finding the answer required searching scripts that have actually achieved a similar effect, such as a 3d maze that upon reaching a certain location, automatically loads a new html page, no clicking even required. that seemed coordinate based but perhaps not actual 3d coordinates. i suppose it's similar enough. i mean you have y, x and you just add z, for the 3d dimension, right?

[jundo12]

oh update on the 3d question.......appears three.js is using raycasting for trigger events like a 3d coordinate causing a new html page to load.
bleh. reading the info on raycasting is like listening to charlie brown's teacher https://www.youtube.com/watch?v=ss2hULhXf04

[jundo12]

Well we don't have to have one to one equivalency between the inputs and the images, and there can be other images and other inputs on the page. But then we must access them in a more specific manner in javascript so as not to create unwanted associations, and/or not attempt to access elements that might not be there. But there's another potential issue once you get involved with anything else positioned. Even if you can see through it, a later (later in the DOM - usually the same as later in the HTML code) element will block the ability to click on an earlier element if it's over the earlier element or has a higher z-index, even an earlier element can "cover" a later one if it has a higher z-index or if it's the only one of the two which is positioned. Using zoom and other styles can sometimes have the same results as positioning, but I see you're also using position for everything, at least in the first code pen demo.

Here's what you could do. Setup a code pen that has what you want in it, the whole thing, including any images. Tell me which images in it you want linked. I should be able to take it from there.

here's what you were helping me with http://theangelsquest.com/test/earth...testings4.html
its fine in chrome, in firefox and in IE. it blurs till it loads in firefox, however. not sure about safari. firefox has some weird large image interpolation.

[coothead]

Hi there jundo12,

the following example has individual links for each image state...

<!DOCTYPE html>
<html lang="en">
<head>
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222599/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
html {
    touch-action: none;
    content-zooming: none;
 }

body {
    margin: 0;
    padding: 0;
    background: #000;
 }

#screen {
    position: absolute;
    width: 100vw;
    height: 100vh;
    max-width: 640px;
    max-height: 480px;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
 }

#zoom {
    width: 100%;
    height: 100%;
    transition: transform 2s ease-in-out 0s;
    transform: scale3d(0.000729, 0.000729, 1);
 }

#zoom img {
    position: absolute;
    width: 640px;
    height: 480px;
    top: 50%;
    left: 50%;
    margin-left: -320px;
    margin-top: -240px;
 }
#screen a {
    position: absolute;
    width: 100%;
    height: 100%;
 }

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

#screen input[type="radio"] + label {
    position: absolute;
    bottom: 10px;
    width: 8%;
    height: 30px;
    cursor: pointer;
    background: #fff;
    margin: 0;
    z-index: 100;
    border-radius: 5px;
    outline: none;
 }

#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%;}

#screen > input {
    position: absolute;
	top: -1000px;
 }

#screen > input:checked + label {background: #f80;}

#i1:checked ~ #zoom {transform: scale3d(0.000729, 0.000729, 1);}
#i2:checked ~ #zoom {transform: scale3d(0.00243, 0.00243, 1);}
#i3:checked ~ #zoom {transform: scale3d(0.0081, 0.0081, 1);}
#i4:checked ~ #zoom {transform: scale3d(0.027, 0.027, 1);}
#i5:checked ~ #zoom {transform: scale3d(0.09, 0.09, 1);}
#i6:checked ~ #zoom {transform: scale3d(0.3, 0.3, 1);}
#i7:checked ~ #zoom {transform: scale3d(1, 1, 1);}

#i1:checked ~ #a1,
#i2:checked ~ #a2,
#i3:checked ~ #a3,
#i4:checked ~ #a4,
#i5:checked ~ #a5,
#i6:checked ~ #a6,
#i7:checked ~ #a7 {
    z-index: 2;
 }
</style>

</head>
<body> 

<div id="screen">
 <input id="i1" name="doot" type="radio" checked>
 <label for="i1"></label>
 <input id="i2" name="doot" type="radio">
 <label for="i2"></label>
 <input id="i3" name="doot" type="radio">
 <label for="i3"></label>
 <input id="i4" name="doot" type="radio">
 <label for="i4"></label>
 <input id="i5" name="doot" type="radio">
 <label for="i5"></label>
 <input id="i6" name="doot" type="radio">
 <label for="i6"></label>
 <input id="i7" name="doot" type="radio">
 <label for="i7"></label>

 <a id="a1" href="https://aws.amazon.com/"></a>
 <a id="a2" href="https://google.com"></a>
 <a id="a3" href="https://yahoo.com"></a>
 <a id="a4" href="https://www.ecosia.org/"></a>
 <a id="a5" href="https://www.startpage.com/"></a>
 <a id="a6" href="https://bing.com/"></a>
 <a id="a7" href="https://duckduckgo.com/"></a>	

<div id="zoom">
 <img src="bd1b.jpg" alt="">
 <img src="bd2b.jpg" alt="">
 <img src="bd3b.jpg" alt="">
 <img src="bd4b.jpg" alt="">
 <img src="bd5b.jpg" alt="">
 <img src="bd6b.jpg" alt="">
 <img src="bd7b.jpg" alt="">

<!-- #zoom --></div>
	
<!-- #screen --></div>

</body>
</html>

coothead

[jundo12]

ty coothead!

[coothead]

No problem, you're very welcome.

coothead