0

I need help I am new to jQuery and i want to implement jQuery in one of my webpage. I also have one form having four text boxes. I have two div tags one in another i.e. my code structure is in following way

<div>
    <div>
        <img>
        <img>
        <img>
        <img>
    </div>
<div>

I just want to do with the help of jquery that

  1. On document ready the first img should be visible out of the four <img> and rest of the three <img> should be hidden between the inner div tag and the cursor focused on first textbox.
  2. Now when focus gose to second textbox the current visible <img> should get hidden and only second <img> should be visible.
  3. When focus gose to third textbox the current visible <img> should get hidden and only third should be visible.
  4. In this way the fourth <img> should be visible when control goes to fourth text box.

Overall when focus goes to any of the textbox the <img> related to it should be visible and the remaining three <img> should be hidden.

So please help in doing above jQuery code which do the following functionality with out affecting other images on the same page except the imaged mentioned above.

Waiting for your reply, guys!

3
  • 2
    It would help if you put the HTML of your input boxes too. Feb 5, 2010 at 11:46
  • 2
    Why not give it a try yourself first, and then come back with specific problems. You'll learn jQuery far better that way. Feb 5, 2010 at 11:47
  • I do not see any text boxes in your layout Feb 5, 2010 at 11:47

2 Answers 2

2

Try something like I did here.


The first image (twitter) does not change, as per your requirements. The only images that are affected are the ones in the div that has the class sample

HTML

<img src="https://s3.amazonaws.com/twitter_production/a/1265328866/images/twitter_logo_header.png"/>

<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>

<div class="sample">
  <img src="http://sstatic.net/so/img/logo.png">
  <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif">
  <img src="http://cacm.acm.org/images/logo.ACM.gif">
  <img src="http://static03.linkedin.com/img/logos/logo_linkedin_88x22.png">
</div>

JavaScript

$(function () {
    var textboxes = $("input:text"), //gets all the textboxes         
        images = $(".sample img");   //gets all the images

    images.not(":first").hide(); //hide all of them except the first one
    textboxes.each(function (i) {
        var j = i;
        $(this).focus(function () {
            images.hide().eq(j).show();
        });
    });
});
1
  • Thank you friends for your replies. Your solutions are very userfull for me. Thanks again! Feb 5, 2010 at 12:44
0

The html could be something like this:

<div>
    <textarea class="first"></textarea>
    <textarea class="second"></textarea>
    <textarea class="third"></textarea>
    <textarea class="forth"></textarea>
</div>
<div class="images">
    <div>
        <img class="first" src=".." />
        <img class="second" src=".." />
        <img class="third" src=".." />
        <img class="forth" src=".." />
    </div>
</div>

and the jquery:

$(document).ready(function() {
    $(".images img").hide();
    $("img.first").show();
    $("textarea").focus(function() {
        $(".image img").hide();
        $("img."+$(this).attr("class")).show();
    });
})

the problem with that would be, that you cannot other classes to the textareas and images. If you are in the need to do so, you would have to check for a certain class like

if ($(this).hasClass("first")) {
    $("img.first").show();
} else if ...
1
  • Thank you friends for your replies. Your solutions are very userfull for me. Thanks again! Feb 5, 2010 at 12:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.