Page 2 of 6 FirstFirst 1234 ... LastLast
Results 11 to 20 of 51

Thread: Javascript solution for image link issue

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

    Default

    oh wait. it's working! yehaaa!

    thank you, mr. genius.

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

    Default

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

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

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

    Default

    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?

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

    Default

    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>
    Last edited by jscheuer1; 03-31-2017 at 05:56 AM. Reason: format code

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

    Default

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

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

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

    Default

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

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

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

    Default

    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

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

    Default

    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
    Last edited by jundo12; 03-31-2017 at 06:38 AM.

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

    Default

    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
    Last edited by jundo12; 03-31-2017 at 06:47 AM.

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

    Default

    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

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
  •