Skip to main content
B
Benoit35282326t8ra
Participant
February 6, 2024
Answered

Need help to put a border on a link in a Map area , where the border need to be blur and sharpen on

  • February 6, 2024
  • 1 reply
  • 467 views

Hello, Need help to put a border on a link in a Map area , where the border need to be blur and sharpen on event of mouse roll over. please assist with a sample code Thanks.

    This topic has been closed for replies.
    Correct answer Jon Fritz

    I'm going to say this once, to make myself feel better for what I'm about to do...


    NOBODY SHOULD EVER DO THIS, IT'S NOT 1995 ANYMORE!1!!ELEVEN!!


    There, now here's a cheap and dirty way to do what you want with the tools and resources at your disposal:

    1. Create an "off state" for your map with nothing glowing (full map, all locations, no glowing sign posts)

     

    2. Create an "on state" for each individual sign post (full map, all locations, 1 glowing sign each)

     

    3. In DW, insert your "Off State" image and give it an ID in the Properties Window  

     

    4. In the Properties window, select the the Polygon Hotspot Tool tool in bottom left. You MUST be in Design View and the tiny triangle in the bottom right of the Properties Window must also be pointing up, or the tools won't appear

     

    5. Trace a polygon shape over your first zone. Click the Pointer Hotspot Tool (arrow icon in bottom left of Properties Window) and click a non-hotspot on the image (this locks the first zone in). Click the Polygon Tool again and draw your next zone. Repeat the process for each "linked" area of the map (do not overlap areas).

     

    6. Select the Pointer Hotspot Tool again and click your first polygon (the corners will highlight with anchor points) then go to Window > Behaviors (if your Behaviors window is not open)

     

    7. In the Behaviors Window, hit the Add Behavior (+ icon) button and choose Swap Image

     

    8. Be sure the ID from step 3 is selected from the list of images, and browse to the correct "On State" image for the zone you have selected.

     

    9. Be sure "restore Image onMouseOut" is checked and hit "OK"

     

    10. Repeat steps 6-10 for the remainder of your hotspots

    That should do it. 

    1 reply

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    February 6, 2024

    Here's some sample code using an SVG map and some simple rollovers: https://codepen.io/okeul/pen/LVjbdE

    Without more info about your page, and what you actually want to have happen, there's really nothing more I'm willing to add here.

    What you want to do may sound simple to you, but I'm guessing it may ultimately be hours worth of billable time in the end.

      B
      Benoit35282326t8raAuthor
      Participant
      February 6, 2024

      that's exactly what I need, but my pictures are not svg.

      let's have a look at a part of the project here :

      http://www.dessinateur.biz/mr/carte4

      for the moment, few pictures are in animated gif format, to highlight links of the area map (all are not already active, this is just for testing).

      Creating all the pictures of the entire project in svg format is not an option (too much work). That's why I'm looking for how color or make visible border on this type of link (area map) without complex coding (I'm not a specialist)

      Thanks a lot for you answer

       

      Jon Fritz
      Community Expert
      Jon FritzCommunity ExpertCorrect answer
      Community Expert
      February 6, 2024

      I'm going to say this once, to make myself feel better for what I'm about to do...


      NOBODY SHOULD EVER DO THIS, IT'S NOT 1995 ANYMORE!1!!ELEVEN!!


      There, now here's a cheap and dirty way to do what you want with the tools and resources at your disposal:

      1. Create an "off state" for your map with nothing glowing (full map, all locations, no glowing sign posts)

       

      2. Create an "on state" for each individual sign post (full map, all locations, 1 glowing sign each)

       

      3. In DW, insert your "Off State" image and give it an ID in the Properties Window  

       

      4. In the Properties window, select the the Polygon Hotspot Tool tool in bottom left. You MUST be in Design View and the tiny triangle in the bottom right of the Properties Window must also be pointing up, or the tools won't appear

       

      5. Trace a polygon shape over your first zone. Click the Pointer Hotspot Tool (arrow icon in bottom left of Properties Window) and click a non-hotspot on the image (this locks the first zone in). Click the Polygon Tool again and draw your next zone. Repeat the process for each "linked" area of the map (do not overlap areas).

       

      6. Select the Pointer Hotspot Tool again and click your first polygon (the corners will highlight with anchor points) then go to Window > Behaviors (if your Behaviors window is not open)

       

      7. In the Behaviors Window, hit the Add Behavior (+ icon) button and choose Swap Image

       

      8. Be sure the ID from step 3 is selected from the list of images, and browse to the correct "On State" image for the zone you have selected.

       

      9. Be sure "restore Image onMouseOut" is checked and hit "OK"

       

      10. Repeat steps 6-10 for the remainder of your hotspots

      That should do it. 

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices