0

我对asp.netandjavascript非常陌生，我应该在几天内完成以下任务。我知道在询问之前我必须学习所有基础知识，但真的不知道在短时间内从哪里获得我需要的东西。提前非常感谢！

这里有一些城市，它们将显示在国家地图上：每个城市都有自己的风格（因为城市位置不同），在css.

<div class="node">
    <div class="taxonomy">
    </div>
    <div class="content">
        <div id="contact_map" runat="server">
            <ul>
                <li id="city1" onmouseover= "onmouseoveragent(this)"   
                               onmouseout="onmouseoutagent(this)">
                    <a href="someAddress"><span class="hideme">Some City Name</span>
                    </a>
                    <p class="hideme">Some City Name<strong class="tel">0123456789</strong>
                    </p>
                </li>
                <%-- other cities here, with different city name and tel --%>
            </ul>
        </div>
    </div>
</div>

稍后我可能会尝试弄清楚如何动态创建这些城市项目。

下面是一个提示框，当鼠标在城市上空时显示。必须为所有城市重复。（问题1：如何动态创建这些提示框，并以某种方式用与正确城市相关的信息填充它们？也许我也必须动态创建以前的列表..）

<div id="agentVisit" class="floating-tip-wrapper" style="margin: 0px; padding: 0px; position:    
    absolute; display:none; opacity: 1;">
    <div class="floating-tip" style="margin: 0px;">Some City Name
        <strong class="tel">0123456789</strong>
    </div>
</div>

onmouseover这是每个城市的javascript代码onmouseout：（问题2：我怎样才能告诉函数agentVisit要获取哪个？）

<script language="javascript" type="text/javascript">

    function onmouseoveragent(e) {
        var hint = document.getElementById("agentVisit");
        console.log(hint);
        hint.style.display = 'block';
        hint.style.top = Math.max(e.offsetTop - hint.offsetHeight, 0) + "px";
        hint.style.left = e.offsetLeft + "px";
    };

    function onmouseoutagent(e) {
        var hint = document.getElementById("agentVisit");
        hint.style.display = 'none';
    }

</script>

如果您提供有关如何执行此操作的想法（或只是一般提示），我将不胜感激。或者只是一个快速教程的链接。谢谢！

4

1 回答 1

0

我认为你让这种方式变得比它必须的更复杂，因为你可以利用data-DOM 元素的 data dash ( ) 属性，然后使用jQueryUI Tooltip之类的东西。

于 2013-07-17T15:43:30.237 回答