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 9 of 9
  1. #1
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    923
    Thanks
    76
    Thanked 29 Times in 29 Posts

    Changing images when links are clicked.

    Hello, I am trying to connect images to some anchor tags, but each anchor matches a specific image. The aim is that when someone clicks on a certain link it will display an image (which is some text information). I have some code from a previous thread which I gained a really good script from the help. I'm not sure how to connect these anchors to the specific image. I'm sure this code only needs tweaking slightly to give me what I need.

    Here is the code relevant to my issue:

    HTML:
    Code:
    <div id="faqBox">
    	 <h1 id="faqHeader"><u>F.A.Q's</u></h1>
    	 <ul>
    		 <li><a href="#" onclick="">What is the purpose of this website?</a></li>
    		 <li><a href="#">What type of achievements would someone of had to do to be eligable?</a></li>
    		 <li><a href="#">Why was this award created?</a></li>
    		 <li><a href="#">How do we nominate somebody?</a></li>
    		 <li><a href="#">How are people presented with this award?</a></li>
    	 </ul>
    </div>
    <div id="faqInfoBox">
    	 <img src="images/content1.png" name="allimage" id="allimage" alt="content1" border="0" />
    </div>
    CSS:
    Code:
    #faqInfoBox {width: 40%;
                 border: 5px ridge;
    			 height: 310px;
    			 background: #606626;
    			 float: right;
    			 margin-right: 3%;}
    			 
    #faqBox ul li{font-family: trebuchet ms;
                  line-height: 30px;
    			  list-style-type: square;}
    JS:
    Code:
    var imgArray = new Array(4);
    
         imgArray[0] = 'images/content1.png';
         imgArray[1] = 'images/content2.png';
         imgArray[2] = 'images/content3.png';
         imgArray[3] = 'images/content4.png';
         imgArray[4] = 'images/content5.png';
    	 
    	 var currIndex = 0;
     
         function imgChange(that)
         {
    	 if(currIndex < myImages.length - 1) {
             that.src = myImages[++currIndex];
             }else {
             currIndex = 0;
             that.src = myImages[currIndex];
             }
         }
    The JavaScript is what needs tweaking. I also have it uploaded to my free domain which you can find the site here: http://abjava.host22.com/Site1/ if you would care to take a look.

    I don't want to be fed the answer but just some pointers/tips on what I could do.

    I was thinking of connecting the function to the anchor tags onclick event. But because I need the specific images to display when their relative link is clicked I know it could be harder to do this. I want to stack the images on top of each other and hide their display then when a link is clicked show it, when another is clicked, hide the first and show that one. (Please note,the last 4 images have not yet been created).

    I can figure out to do the CSS for this so just any help on the JS side will be very helpful to me.

    Thank you very much in advance if anyone can help.

    Regards,

    LC.
    Last edited by LearningCoder; 12-30-2011 at 09:16 PM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    pointers, eh?

    I guess each link would have an onclick which would call a function and pass a variable to that function telling it which image to display.

    or something like that

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    923
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Could I give every image an id and use the getElementById() method to get that certain image then store it in that.src or something?

    Thanks for your reply

    Regards,

    LC.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    something like that but not really. here is a related post, maybe it will help, although it is more complicated than what you are trying to do - you don't really need to put your images into an array

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Surely you don't mean you need something as simple as this, do you?
    Code:
    <script type="text/javascript">
    function show(which)
    {
        var image = document.getElementById("infoImage");
        image.src = "images/content" + which + ".png";
        image.alt = "content" + which;
        return false;
    }
    </script>
    ....
    <div id="faqBox">
    	 <h1 id="faqHeader"><u>F.A.Q's</u></h1>
    	 <ul>
    		 <li><a href="#" onclick="return show(1);">What is the purpose of this website?</a></li>
    		 <li><a href="#" onclick="return show(2);">What type of achievements would someone of had to do to be eligible?</a></li>
    		 <li><a href="#" onclick="return show(3);">Why was this award created?</a></li>
    		 <li><a href="#" onclick="return show(4);">How do we nominate somebody?</a></li>
    		 <li><a href="#" onclick="return show(5);">How are people presented with this award?</a></li>
    	 </ul>
    </div>
    <div id="faqInfoBox">
    	 <img id="infoImage" src="images/content1.png" name="allimage" id="allimage" alt="content1" border="0" />
    </div>
    
    ...
    You spelled "eligible" wrong, by the by.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    If for some reason you can't add the ID to the <img> tag, as I showed, you could do without it thus:
    Code:
    function show(which)
    {
        var image = document.getElementById("faqInfoBox").getElementsByTagName("img")[0];
        image.src = "images/content" + which + ".png";
        image.alt = "content" + which;
        return false;
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    And to live up to my moniker...

    This phrase seems clumsy:
    What type of achievements would someone of had to do to be eligible?

    At a minimum, change "of" to "have".

    But maybe something like this would be better?
    What type of achievements would make an individual eligible for the award?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    923
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Ah thank you very much Old Pedant. I used the first code which does exactly what I needed. Looking at it, it is quite what you say, easy. It's just trying to figure out how to do it which is my problem. I was sure I only would have had to tweak the old script gained here but have gained a very simple, but useful script which I can now save in my library so thank you very much indeed.

    Also that question was worded very badly shame on me. I woke up at around 2:30am and started working on the site so I was half asleep heh. What you re-wrote is much better.

    Thank you all for your contributions.

    Kind regards,

    LC.

  • #9
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    923
    Thanks
    76
    Thanked 29 Times in 29 Posts
    I was wondering whether someone could explain why this function returns false?

    Regards,

    LC.


  •  

    Posting Permissions

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