Как исправить всплывающую карту javascript

Question

У нас был код разработчика на этой javascript карте, у которой есть всплывающие окна, когда вы наводите курсор на определенные точки.

http://www.cadenceaerospace.com/products/aeros/centers_of_excellence/index_test.html

Я пытаюсь добавить новую точку (B & E), и она должна открыться так же, как открывается инструмент Tell Tool, но я не могу заставить ее работать. Я не знаю много javascript, поэтому кто-нибудь сможет взглянуть и увидеть, что я делаю неправильно?

Это код на странице, которая контролирует карту:

<script language="javascript">
                    $(document).ready(function() {
                        $('#loc_map > DIV').css({'display': 'none', 'position': 'absolute'});
                        $('#loc_map > DIV > DIV').each(function(i,e) {
                            var close_button = document.createElement('span');
                            close_button.className = 'close_button';
                            var button_x = document.createElement('a');
                            button_x.innerHTML = 'X';
                            button_x.href = '#';
                            $(button_x).on('click', function(x) {
                                //console.log(e.parentNode.id);
                                $('#loc_map > DIV').css({'display': 'none'});
                                x.preventDefault();
                            });
                            $(close_button).prepend(button_x);
                            $(e).prepend( close_button );
                        });

                        $('#loc_map AREA')
                        .on('mouseover', function(e) {
                            e.preventDefault();
                            var div_id = e.currentTarget.alt,
                            div = $(document.getElementById(div_id)),
                            left = (div_id == 'tell_tool_operations')? e.pageX-5 - div.outerWidth() : e.pageX+5,
                            top = (RegExp(/^(giddens|pmw|tell|be)/).test(div_id))? e.pageY+5 : e.pageY-5 - div.outerHeight();
                            $('#loc_map > DIV').css({'display': 'none'});
                            div.css({'display': 'block', 'left': left, 'top': top});
                        }); 

                        $('#loc_map AREA')
                        .on('click', function(e) {
                            e.preventDefault();
                            var div_id = e.currentTarget.alt,
                            div = $(document.getElementById(div_id)),
                            left = (div_id == 'tell_tool_operations')? e.pageX-5 - div.outerWidth() : e.pageX+5,
                            top = (RegExp(/^(giddens|pmw|tell|be)/).test(div_id))? e.pageY+5 : e.pageY-5 - div.outerHeight();
                            $('#loc_map > DIV').css({'display': 'none'});
                            div.css({'display': 'block', 'left': left, 'top': top});
                        });
                    });
                </script>

Дай мне знать, если тебе понадобится что-нибудь еще от меня. Спасибо!

Answer 1

Линия, которая вычисляет левую позицию, должна быть изменена с

left = (div_id == 'tell_tool_operations')? e.pageX-5 - div.outerWidth() : e.pageX + 5

... на ...

left = (div_id == 'tell_tool_operations' || div_id == 'be_oem')? e.pageX-5 - div.outerWidth() : e.pageX + 5

Добавленная часть - || div_id == 'be_oem'.

---

Модифицированный код

<script language="javascript">
                    $(document).ready(function() {
                        $('#loc_map > DIV').css({'display': 'none', 'position': 'absolute'});
                        $('#loc_map > DIV > DIV').each(function(i,e) {
                            var close_button = document.createElement('span');
                            close_button.className = 'close_button';
                            var button_x = document.createElement('a');
                            button_x.innerHTML = 'X';
                            button_x.href = '#';
                            $(button_x).on('click', function(x) {
                                //console.log(e.parentNode.id);
                                $('#loc_map > DIV').css({'display': 'none'});
                                x.preventDefault();
                            });
                            $(close_button).prepend(button_x);
                            $(e).prepend( close_button );
                        });

                        $('#loc_map AREA')
                        .on('mouseover', function(e) {
                            e.preventDefault();
                            var div_id = e.currentTarget.alt,
                            div = $(document.getElementById(div_id)),
                            left = (div_id == 'tell_tool_operations' || div_id == 'be_oem')? e.pageX-5 - div.outerWidth() : e.pageX+5,
                            top = (RegExp(/^(giddens|pmw|tell|be)/).test(div_id))? e.pageY+5 : e.pageY-5 - div.outerHeight();
                            $('#loc_map > DIV').css({'display': 'none'});
                            div.css({'display': 'block', 'left': left, 'top': top});
                        }); 

                        $('#loc_map AREA')
                        .on('click', function(e) {
                            e.preventDefault();
                            var div_id = e.currentTarget.alt,
                            div = $(document.getElementById(div_id)),
                            left = (div_id == 'tell_tool_operations' || div_id == 'be_oem')? e.pageX-5 - div.outerWidth() : e.pageX+5,
                            top = (RegExp(/^(giddens|pmw|tell|be)/).test(div_id))? e.pageY+5 : e.pageY-5 - div.outerHeight();
                            $('#loc_map > DIV').css({'display': 'none'});
                            div.css({'display': 'block', 'left': left, 'top': top});
                        });
                    });
                </script>