Member Avatar for elanorejoseph

Hi i am trying to create an application, in which 3 images will be shown as thumbnails,if we click on one it will expandand other thumbnails will be hidden.if not selected there will be a timeout and one image will be expanded randomly.

  • 2 Contributors
  • 2 Replies
  • 133 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by elanorejoseph

Recommended Answers

All 2 Replies

Member Avatar for nauticalmac

How far have you got with your project? Have you written Javascript before? Post what you have done so far.

Member Avatar for elanorejoseph 
<html>
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <style>
    div{
        float:left;
    }
    .ad{
        float:left;
    }
  </style>
</head>

<body marginwidth="0px" marginheight="0px" onLoad="timer()">

<!--<button type="button" onClick="ad1()"><img src="F:\New folder\January\3_1\Ad Selector\Assets\1.png"/></button>
<button type="button" onClick="ad2()"><img src="F:\New folder\January\3_1\Ad Selector\Assets\2.png"/></button>
<button type="button" onClick="ad3()"><img src="F:\New folder\January\3_1\Ad Selector\Assets\3.png"/></button>
<button type="button" onClick="ad4()"><img src="F:\New folder\January\3_1\Ad Selector\Assets\4.png"/></button>-->
<div id="cont" style="float:left;" >

<div id="t1"><img src="F:\New folder\January\3_1\Ad Selector\Assets\1.png" onClick="ad1()"></div>

<div id="t2"><img src="F:\New folder\January\3_1\Ad Selector\Assets\2.png" onClick="ad2()"></div>

<div id="t3"><img src="F:\New folder\January\3_1\Ad Selector\Assets\3.png" onClick="ad3()"></div>

<div id="t4"><img src="F:\New folder\January\3_1\Ad Selector\Assets\4.png" onClick="ad4()"></div>

</div>

<div id="adv1" style="display:none;" class="ad">

<img src="#">
</div>


<div id="adv2" style="display:none;" class="ad">
<img src="#">
</div>

<div id="adv3" style="display:none;" class="ad">
<img src="#">
</div>


<div id="adv4" style="display:none;" class="ad">
<img src="#">
</div>

<script>

var a;
        function ad1()
        {
        $("#t1,#t2,#t3,#t4").hide();
        $("#adv1").show();
        clearTimeout(a);

        }


        function ad2()
        {
            for(var i=1;i<=4;i++)
            {
                $("#t"+i).hide();
            }

        $("#adv2").show();
        clearTimeout(a);
        }


        function ad3()
        {
        $("#t1,#t2,#t3,#t4").hide();
        $("#adv3").show();
        clearTimeout(a);
        }


        function ad4()
        {
        for(var i=1;i<=4;i++)
            {
                $("#t"+i).hide();
            }
        $("#adv4").show();
        clearTimeout(a);
        }


        function timer()
        {

        a=setTimeout(

        function myFunction()
        {

            var y=Math.floor((Math.random()*4)+1);


            switch(y)
             {
            case 1:
            ad1();
            break;

            case 2:
            ad2();
            break;

            case 3:
            ad3();
            break;

            case 4:
            ad4();
            break;
             } 


        },4000);
        }

</script>


</body>
</html>

I have done this far yet,can you help me

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.