www.webdeveloper.com
Results 1 to 10 of 10

Thread: Image and URL swap to external links

Hybrid View

  1. #1
    Join Date
    Oct 2012
    Posts
    6

    Exclamation Image and URL swap to external links

    I have this posted in another thread completely, but now I think I just need help with this section.

    I want the images linked to buttons to swap images and hyperlinks in the same div. The images swap, but the learner video link is the only one that works, no matter which image is in the div. Can someone please review this and let me know what I need to do to make this work?

    Code:
    <script type="text/javascript">
    
    $(document).ready(function(){ 
    	$('a').click(function () { 
    		var divname= this.name; $("#"+divname).show("fast").siblings().hide("fast"); 
    		var n = divname.replace("div",""); 
    		$("img").attr("src", "images/video"+n+".png"); 
    		$("img").attr('href',"video"+n.attr('href'));		
    	});
     
    
    		var popupWindow = null;
    			function centeredPopup(url,winName,w,h,scroll){
    				LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
    				TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
    				settings = 'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
    				popupWindow = window.open(url,winName,settings)
    		}
    });
     </script>
     
    <div id="content">
        	<div id="header"></div>
        		<div id="buttons">
        			<div class="learner"><a href="#" name="div1">Learner</a><br />
            		<div class="mgrsup"><a href="#" name="div2">Manager/Supervisor</a>
                		</div>
            		</div>
        		</div>
        	<div id="video">
    			<a class="video1" href="http://#.html" ><img onclick="centeredPopup(this.href,'myWindow','800','600','yes');return false"></a></div>
                           <a class="video2" href="http:#.html"><img onclick="centeredPopup(this.href,'myWindow','800','600','yes');return false"></a></div>
            </div>
    Thanks so much for taking the time to view this post.
    T.

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    On the following line n is a string, not a jQuery object, so n.attr is undefined:

    Code:
    $("img").attr('href',"video"+n.attr('href'));
    It's an error in other words. (Remember to check the console when debugging.) I guess you want the anchor href to be something like "video2":

    Code:
    $("img").attr('href',"video"+n);
    Edit: I just noticed you're setting the href on the image and not on an anchor. So you should change the $("img") to point to your anchor of course.
    Last edited by ReFreezed; 11-09-2012 at 03:38 PM.

  3. #3
    Join Date
    Oct 2012
    Posts
    6
    Thanks so much for pointing that out.

    I did change it when I found that in the console to this:
    Code:
    $("img").attr('href', $(this).attr('href'));
    Now I am not finding any errors and it looks like it's linking correctly in the console but the learner link still comes up.

    Anything else you might see or think might correct it, please let me know. I am on a deadline and getting desperate.

    T.

  4. #4
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    As I wrote in the edit of the last post, you're setting the href of an image rather than on an anchor. $("img") should be $("a") or $("img").parent("a") or something like that. (I don't know which anchor's href you want to change.)

  5. #5
    Join Date
    Oct 2012
    Posts
    6
    I am so sorry I didn't see that earlier and I am not exactly sure where I need to implement it. I have it now set up as:

    Code:
    <script type="text/javascript">
    
    $(document).ready(function(){ 
    	$("a").click(function () { 
    		var divname= this.name; $("#"+divname).show("fast").siblings().hide("fast"); 
    		var n = divname.replace("div",""); 
    		$("img").attr("src", "images/video"+n+".png"); 
    		$("a").attr($(this).attr("video.href"));
    			
    	});
    	
    		var popupWindow = null;
    			function centeredPopup(url,winName,w,h,scroll){
    				LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
    				TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
    				settings = 'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
    				popupWindow = window.open(url,winName,settings)
    		}
    });
     </script>
     
    <div id="content">
    	<div class="spacer"></div>
        	<div id="header"></div>
        		<div id="buttons">
        			<div class="learner"><a href="#" name="div1">Learner</a><br />
            			<div class="mgrsup"><a href="#" name="div2">Manager/Supervisor</a>
                		</div>
            		</div>
        		</div>
        	<div id="video">
    			<a class="video1" href="http://#.html" ><img src="images/video1.png" onclick="centeredPopup(this.href,'myWindow','800','600','yes');return false" /></a>
                <a class="video2" href="http://#.html" ><img src="images/video2.png" onclick="centeredPopup(this.href,'myWindow','800','600','yes');return false" /></a>
            </div>
    Based on the button clicked, I want the image in the video div to change and that image to hyperlink to an external link. I think I am doing this correctly (thanks to your assistance) but again, the external link still links to the learner video, not the manager.

    T.

  6. #6
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    Your code looks so strange to me so I'm having a hard time understanding it. But I changed several things here and now the image and link inside the "video" div changes when you click on a button. I'm not completely sure I've understood you right though.

    Code:
    <script type="text/javascript">
    
    $(document).ready(function(){
    	$("#buttons a").click(function(){
    		var divname = this.name;
    		$(this).parent().hide("fast").siblings().show("fast");
    		var n = divname.replace("div","");
    		$("#video img").attr("src", "images/video"+n+".png");
    		$("#video a").attr("href", "http://urlToVideo"+n+".html");
    	});
    });
    
    
    var popupWindow = null;
    function centeredPopup(url,winName,w,h,scroll){
    	LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
    	TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
    	settings = 'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable';
    	popupWindow = window.open(url,winName,settings);
    }
    
    
    </script>
    
    
    <div id="content">
    	<div class="spacer"></div>
    	<div id="header"></div>
    	<div id="buttons">
    		<div class="learner">
    			<a href="javascript:;" name="div1">Learner</a>
    		</div>
    		<div class="mgrsup">
    			<a href="javascript:;" name="div2">Manager/Supervisor</a>
    		</div>
    	</div>
    	<div id="video" style="display: hidden;">
    		<a href="javascript:;" ><img src="" onclick="centeredPopup(this.href,'myWindow','800','600','yes'); return false;" /></a>
    	</div>
    </div>
    If this is the functionality you wanted to achieve I can explain what changes i made to the script, if you want to. Though I may have completely misunderstood you...

  7. #7
    Join Date
    Oct 2012
    Posts
    6
    This did help and I appreciate the time you have spent helping me.

    I think these changes in the script helped, but what if the URL is not numbered as the images and divs? They have the same urls except for the words "learner" and "manager".

    Code:
    <a href="http://blah/blah/Tutorial/Learner/Tutorial/tut.html>
    <a href="http://blah/blah/Tutorial/Manager/Tutorial/tut.html>

  8. #8
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    One way would be to have the URLs stored in a separate array.

    Code:
    <script type="text/javascript">
    
    var urls = [
    	"http://blah/blah/Tutorial/Learner/Tutorial/tut.html", //div1
    	"http://blah/blah/Tutorial/Manager/Tutorial/tut.html" //div2
    ];
    
    
    $(document).ready(function(){
    	$("#buttons a").click(function(){
    		var divname = this.name;
    		$(this).parent().hide("fast").siblings().show("fast");
    		var n = divname.replace("div","");
    		$("#video img").attr("src", "images/video"+n+".png");
    		$("#video a").attr("href", urls[n-1]);
    		$("#video").show();
    	});
    });
    
    
    var popupWindow = null;
    function centeredPopup(url,winName,w,h,scroll){
    	var LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
    	var TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
    	var settings = 'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable';
    	popupWindow = window.open(url,winName,settings);
    }
    
    
    </script>
    
    
    <div id="content">
    	<div class="spacer"></div>
    	<div id="header"></div>
    	<div id="buttons">
    		<div class="learner">
    			<a href="javascript:;" name="div1">Learner</a>
    		</div>
    		<div class="mgrsup">
    			<a href="javascript:;" name="div2">Manager/Supervisor</a>
    		</div>
    	</div>
    	<div id="video" style="display: none;">
    		<a href="javascript:;" ><img src="" onclick="centeredPopup(this.parentNode.href,'myWindow','800','600','yes'); return false;" /></a>
    	</div>
    </div>

  9. #9
    Join Date
    Oct 2012
    Posts
    6
    It is working!

    WhooHoo—Your help has been awesome. I also appreciate the fact that you replied so quickly to my posts, it made all the difference to my work. Thank you!

    It will now be a good weekend.

    Cheers!

    T.

  10. #10
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    I'm just glad I could help. Have a great weekend! ^^

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