1 Reply Latest reply on Dec 1, 2015 7:56 AM by kglad

    Trying to make rollover buttons with a secondary set of links

    shargraves

      Hi, I'm trying to make an interactive map - I just have a bitmap as a background - and I want to make rollover map points (a bit like on google) - that when you rollover it - a box with info appears next to it with a bit of text and a couple of different links to other pages

       

      But - when I do the button "over" keyframe with the box full of info next to the map point - it appears fine - but vanishes if you try and rollover it - as it's not in the hit keyframe - because when I put it in the hit keyframe - it appears when you move the cursor around the map and not just over the map point.

       

      I'm sure this is an age-old question - but I'm a newby to Cs6 and I'm stuck!

       

      How do I get a point where I can rollover it - have something appear next to it - and then be clickable still?

       

      Any help hugely appreciated!

        • 1. Re: Trying to make rollover buttons with a secondary set of links
          kglad Adobe Community Professional & MVP

          you have more flexibility if you use movieclips instead of buttons.  for example,

           

          var click_data:?

          var tooltip:MovieClip = new MovieClip();  // you may want a background for your tooltip or even create one in the ide

          var tf:TextField=new TextField();

          tooltip.addChild(tf);

          var tooltipP:MovieClip=new MovieClip();  // tool tip parent

          addChild(tooltipP);

          tooltipP.addChild(tooltip);

          tooltip.addEventListener(MouseEvent.CLICK,tooltipF);

           

          function tooltipF(e:MouseEvent):void{

          use click_data here

          }

           

          // create city movieclips (this can be alpha=0  shapes or red dots or arrows or anything that fits your design) and place them on your map.  assign them instance names in the properties panel and use those names in cityA below

          var cityA:Array=[cityname1, city2, city3, etc];

          tooltipA:Array = ['this is info about city 1', 'info about city 2', 'city 3', etc];

          clickA:Array = [i'm not sure what you want here but this would be something used with the tooltip is clicked];

           

          for(var i:int=0;i<cityA.length;i++){

          cityA[i].addEventListenter(MouseEvent.MOUSE_OVER,overF);

          }

          function overF(e:MouseEvent):void{

          tf.text=tooptipA[cityA.indexOf(e.currentTarget)];

          tooltip.x = mouseX;  // one of both these usually need some adjustment to be above or to the left/right of the mouse depending on your design

          tooltip.y = mouseY;

          click_data = clickA[cityA.indexOf(e.currentTarget)]

          }

          1 person found this helpful