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
  • 315 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

— the behavior seen here usually comes from a small JavaScript/HTML mismatch rather than a mysterious jQuery bug. was right to point at the jQuery UI sample: the sample expects an options object and a correct image map setup, and the thread code is missing both fixes.

Quick checklist and fixes that resolve the “only one hotspot works” symptom:

  • Set the map reference correctly: usemap="#tab" (leading #) so the browser actually links the <img> to the <map>.
  • Avoid referencing an undefined options variable. Either define var options = {}; or pass an empty object when calling the effect (e.g. .show('explode', {}, 500)). An undefined variable will throw a ReferenceError when the handler runs and stop further handlers.
  • Prevent the anchor default so clicks don’t trigger navigation: call event.preventDefault() in the click handler (or return false).
  • Hide other panels before showing the chosen one so panels don’t overlap.

A concise pattern that avoids repeated functions is to give each area a data-target that names the panel, then handle clicks in one place:

<!-- give the image the correct usemap -->
<img src="..." usemap="#tab" id="test1">

<!-- each area names the panel it should show -->
<area ... href="#" data-target="effect2">
// single delegated handler; pass {} instead of an undefined options var
$(document).on('click', 'area[data-target]', function(e){
  e.preventDefault();
  var tgt = $(this).data('target');
  $('.toggler > div').hide();        // hide all panels
  $('#' + tgt).show('explode', {}, 500);
});

Debugging notes: open the browser console and look for “ReferenceError: options is not defined” or other JS errors; confirm jQuery UI effects (or the full jquery-ui) are loaded if using explode. For better cross‑browser and mobile behavior, consider using absolutely positioned buttons or accessible controls over the image instead of relying solely on <area> elements.

Member Avatar for Member #949455

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.