Member Avatar for Stagnant

I made three image hotspots on an image called Tab1. I want to click on each of them so it shows an UI next to Tab1. I used the jQuery example off their website since it's close to what I want, but what do I do when I want another button to show it's directed UI? Only #button and #effect are working.

 <script>

  $(function() {
    // run the currently selected effect
    function runEffect() {

      // run the effect (selectedEffect
      $( "#effect" ).show( "explode", options, 500);
    };

    function runEffect2() {
        $("#effect2").show ("explode", options, 500);
    };

    function runEffect3() {
        $("#effect3").show ("explode", options, 500);
    };

    $( '#button' ).click(function() {
      runEffect();
    });

        $( '#button2' ).click(function() {
      runEffect2();
    });

    $( '#button3' ).click(function() {
      runEffect3();
    });

    //need this to hide the class (your images)
    $( "#effect, #effect2, #effect3" ).hide(); 
 });
  </script>

    <body>
      <table width="200" border="0">
      <tr>
        <td>
        <img src="Upgrade/tab1.png" width="88" height="283" usemap="tab" 
        id="test1"> 
    <map name="tab">

            <area shape="circle" coords="51,106,33" href="#" 
            onmouseout="MM_swapImgRestore()" 
            onmouseover="MM_swapImage('test1','','Upgrade/tab2.png',1)" 
            id="button" class="ui-widget-content ui-corner-all">

            <area shape="circle" coords="49,172,30" href="#"
            onmouseout="MM_swapImgRestore()" 
            onmouseover="MM_swapImage('test1','','Upgrade/tab3.png',1)"
            id="button2" class="ui-widget-content ui-corner-all">

            <area shape="circle" coords="52,240,28" href="#"
            id="button3" class="ui-widget-content ui-corner-all">
    </map></td>

        <td>
    <div class="toggler">
      <div id="effect" class="ui-widget-content ui-corner-all">
        <h3 class="ui-widget-header ui-corner-all">Show1</h3>
        <p>
          test1
        </p>
          </div>

        <div id="effect2" class="ui-widget-content ui-corner-all">     
            <h3 class="ui-widget-header ui-corner-all">Show2</h3>
        <p>
          test2
        </p>
      </div>

          <div id="effect3" class="ui-widget-content ui-corner-all">     
            <h3 class="ui-widget-header ui-corner-all">Show3</h3>
        <p>
          test3
        </p>
      </div>
    </div>

    </td>
      </tr>
    </table>
    </body>
  • 2 Contributors
  • 1 Reply
  • 301 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by LastMitch
Member Avatar for LastMitch

@Stagnant

I made three image hotspots on an image called Tab1. I want to click on each of them so it shows an UI next to Tab1. I used the jQuery example off their website since it's close to what I want, but what do I do when I want another button to show it's directed UI? Only #button and #effect are working.

Where did you get the code?

Did you get that code from here:

http://jqueryui.com/effect/

I mean the code you provided doesn't seem right because when I look at the function sfrom Jquery and run it, it goes smoothly but your code is a bit messy.

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.