Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Need help getting switch image to be a link as well

    Hello,
    I'm new to this forum and well... I'm pretty new to JavaScript as well.
    Here's my problem: I'm trying to create a switch image code that will allow the new image to be a link as well. In the list item where you'll see ('blue.jpg') if I try to make this an anchor tag - it breaks the code. Any suggestions would be great.
    Thanks for taking a look!

    Code:
    <head>
    	
    	<script>
    	function switch1(div) {
    	if (document.getElementById('blue')) {
    	var option=['blue','green','purple'];
    	for(var i=0; i<option.length; i++)
    	{ obj=document.getElementById(option[i]);
    	obj.style.display=(option[i]==div)? "block" : "none"; }
    	}
    	}
    	//
    	function switchImg(i){
    	document.images["blue"].src = i;
    	}
    	</script>
    	
    	<style>
    	#image-switch ul {
    	margin:0 0 0 20px;
    	color:red;
    	list-style-type:none;
    	}
    	#image-switch li {
    	padding:10px;
    	}
    	#image-switch #green, #image-switch #purple {
    	display:none;
    	}
    	#radiobs {
    	width:150px;
    	position:relative;
    	margin:0;
    	}
    	#radiobs input {
    	margin:0;
    	padding:0;
    	position:absolute;
    	margin-left:6em;
    	width:15px;
    	}
    	
    	</style>
    	
    	
    	
    	
    </head>
    
    
    <div><img src="blue.jpg" id="blue" /></div>
    
    <ul id="radiobs">
    <li><a href="#n" onclick="switchImg('blue.jpg')"><img src="sample_box_1_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
    <li><a href="#n" onclick="switchImg('green.jpg')"><img src="sample_box_2_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
    <li><a href="#n" onclick="switchImg('purple.jpg')"><img src="sample_box_3_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
    </ul>
    
    </div>
    <div class="clear"></div>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Ok ... so "if you try to make this an anchor tag - it breaks the code". But how did you try to achieve that? Please show us that code as it is most relevant to your question.

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Maybe use this demo as a guide.

    Substitute your own image file names and urls in the picData array.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                var picData = [
                    ['num1.jpg','url_for_blue'],
                    ['num2.jpg','url_for_green'],
                    ['num3.jpg','url_for_purple']
                ];
                //preload the images
                var oPics = [];
                for(i=0; i < picData.length; i++){
                    oPics[i] = new Image();
                    oPics[i].src = picData[i][0];
                }
                function swapImage(obj){
                    oImgSwap.src = oPics[obj.indx].src;
                    oImgSwap.parentNode.href = picData[obj.indx][1];
                }
                window.onload=function(){
                    oImgSwap = document.getElementById('imgSwap');
                    oLinks = document.getElementById('radiobs').getElementsByTagName('a');
                    for(i=0; i < oLinks.length; i++){
                        oLinks[i].indx = i;
                        oLinks[i].onclick=function(){
                            swapImage(this);
                            return false;
                        }
                    }
                    swapImage(oLinks[0]);
                }
            </script>
        </head>
        <body>
            <div>
                <a href="">
                    <img src="" id="imgSwap" alt="" />
                </a>
            </div>
            <ul id="radiobs">
                <li><a href="">Blue</a></li>
                <li><a href="">Green</a></li>
                <li><a href="">Purple</a></li>
            </ul>
        </body>
    </html>
    Last edited by bullant; 04-13-2011 at 07:00 AM.

  • Users who have thanked bullant for this post:

    ecarollo (04-13-2011)

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi there, The top list item is how it's supposed to work. The bottom list item is what I tried to force into the code to make the image a link. It broke the code.
    Thanks for taking a look!

    Code:
    <li><a href="#n" onclick="switchImg('blue.jpg')"><img src="sample_box_1_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
    
    <li><a href="#n" onclick="switchImg('<a href="#">blue.jpg</a>')"><img src="sample_box_1_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks Bullant, I'll give it a try!

  • #6
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thanks Bullant!

    Bullant, you are amazing, that worked like a charm

  • #7
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    no problem


  •  

    Posting Permissions

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