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
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.