0

我正在尝试熟悉 raphael.js。我想创建一个美国地图，该地图已经具有每个州的默认颜色并且这些颜色保留在那里。

这是我想出的。

如果您查看 AK，我会加载默认颜色，但如果我突出显示另一个状态，则 AK 的默认颜色会消失。我希望 AK - 和其他州 - 保持相同的颜色。

具体来说，我不知道是什么清除了我的 AK 全彩。我认为当我将鼠标悬停在不同的状态时，该语句的一部分是清除填充覆盖：

        for (var state in aus) {
        //aus[state].color = Raphael.getColor();
        (function (st, state) {
            st[0].style.cursor = "pointer";
            st[0].onmouseover = function () {
                current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");
                st.animate({fill: st.color, stroke: "#ccc"}, 500);
                st.toFront();
                R.safari();
                document.getElementById(state).style.display = "block";
                current = state;
            };

        })(aus[state], state);
    }

有什么想法我可能会出错吗？

4

3 回答 3

1

自从我使用 Raphael.js 以来已经有一段时间了，但我认为这是重置您的状态的行：

current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");

尝试用 st.color 或任何该状态的颜色替换 #333。如果我的假设是正确的，那将是 aus['AK'] 之类的东西？？？您可能必须捕获先前状态的颜色。如果这不起作用，请告诉我，我可以仔细看看。

祝你好运。

于 2012-10-22T18:18:28.120 回答
0

Bryan Allo 谈到了我的部分问题，但最终是动画代码导致了问题。我从来没有想出如何将动画制作成相似的色调，并完全放弃了以下代码：st.animate({fill: st.color, stroke: "#ccc"}, 500);

最终结果是一个允许用户按州创建自己的总统竞选预测的网站。 这里是。

于 2012-11-03T05:02:59.740 回答
0

将您的美国 SVG 放入 .. 这个

您可以选择删除或留在同样生成的鼠标悬停代码中。

于 2012-10-22T20:46:32.103 回答