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

[Benoit35282326t8ra]

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.

[Jon Fritz]

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.

[Benoit35282326t8ra]

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 · Accepted solution]

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. 

[Benoit35282326t8ra]

Thanks a lot Jon,

1995 was a great year 😉 I understood everything and, miracle, it works !

Your guide is clear and precise, perfect for my level.

For the moment the project doesn't need more, but if it has to be more advanced, I would contact professionals to do the work with 2024's level 😉

[Nancy OShea]

This is doable with SVG shapes over a responsive bitmap.  See example below. 

As for the blinking animated GIF, that's an emphatic NO!!!!  It's a legal liability for the site owner.  Rapid blinking poses health risks for people with epilepsy and photo sensitivities to flashing lights.  It just takes one person to file a complaint & lawsuit to put you out of business.  Do not go there. 

[Benoit35282326t8ra]

thanks Nancy,

got it for the blinking, thanks! for the code, I'll see that tomorow, it's late in the night here 😉