Page 3 of 6 FirstFirst 12345 ... LastLast
Results 21 to 30 of 51

Thread: Javascript solution for image link issue

  1. #21
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    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.

  2. #22
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,256
    Thanks
    75
    Thanked 3,395 Times in 3,356 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #23
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    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

  4. #24
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    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?
    Last edited by jundo12; 04-01-2017 at 11:26 PM.

  5. #25
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    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?

  6. #26
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    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

  7. #27
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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.

  8. #28
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,086
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    Hi there jundo12,

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

    Code:
    
    <!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
    ~ the original bald headed old fart ~

  9. The Following User Says Thank You to coothead For This Useful Post:

    jundo12 (05-05-2017)

  10. #29
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    ty coothead!

  11. #30
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,086
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default


    No problem, you're very welcome.

    coothead
    ~ the original bald headed old fart ~

Similar Threads

  1. JavaScript and/or CSS solution
    By Sebah in forum JavaScript
    Replies: 2
    Last Post: 07-18-2010, 09:03 PM
  2. Javascript Issue (swapping image)
    By TMM1BX in forum JavaScript
    Replies: 0
    Last Post: 03-15-2009, 07:31 PM
  3. Javascript image swap with link
    By sakocreative in forum JavaScript
    Replies: 0
    Last Post: 06-13-2007, 05:30 PM
  4. Image copyright solution
    By The Roman in forum Other
    Replies: 20
    Last Post: 05-26-2006, 05:34 PM
  5. Javascript Dilemma, Simple Solution.?
    By f0ssil0o in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-22-2006, 11:43 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •