Текстовые ссылки с использованием Raphael в IE8 - PullRequest
Новая
       2

Текстовые ссылки с использованием Raphael в IE8

5 голосов
/ 19 августа 2010

У меня много проблем с получением простой текстовой ссылки для работы в IE8 с использованием Raphael.Я хочу текст, который ведет себя как обычная ссылка.Ниже приведен код, с которым я играл.

  • Получил курсор, чтобы перейти к руке, используя функцию наведения и document.body.cursor
  • Функция щелчка работает только при щелчке по фактическим текстовым пикселям - нажатие на пробелымежду буквами ничего не происходит
  • Приведенная выше проблема также влияет на наведение

Нужно ли добавлять какой-либо элемент позади текста, прямоугольник / ограничивающий прямоугольник, для управления мышью?Есть идеи?Эта проблема только в IE8, который, как вы знаете, использует VML через Raphael.

Вот код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.4.min.js"></script>
    <script type="text/javascript" src="js/raphael-min.js" charset="utf-8"></script>
    <script type="text/javascript">
    window.onload = function () {

    // Creates canvas 320 × 200 at 10, 50
    var paper = Raphael(10, 50, 420, 400);

    var lbl = paper.text(50, 40, 'test').attr( {
      "font" : '14px Helvetica, Arial',
      stroke : "none",
      fill : '#ffffff',
      'text-anchor' : 'middle'
    });

    lbl.node.style.display = 'block';
    lbl.node.style.cursor = 'pointer';

    lbl.click(function() {
      alert('hi');        });

    lbl.hover(function() {
      document.body.style.cursor = 'hand';
    }, function() {
        document.body.style.cursor = 'default';
    });

    }
    </script>
</head>
<body style="background-color: #000000;">
    <div id="wrapper" style="background-color: #000000;"> </div>
</body>
</html>

Ответы [ 2 ]

10 голосов
/ 23 августа 2010 
var lbl = paper.text(50, 40, 'test').attr( {
  font : '14px Helvetica, Arial',
  stroke : "none",
  fill : '#fff'
}),
blanket = paper.rect().attr(lbl.getBBox()).attr({
  fill: "#000",
  opacity: 0,
  cursor: "pointer"
}).click(function () { alert("hi"); });
0 голосов
/ 14 ноября 2013

Вы можете добавить класс к своему элементу следующим образом (не работает в IE8): 

lbl.node.className.baseVal += "linked_label";

С такой таблицей стилей: 

.linked_label:hover {
    cursor: pointer;
    text-decoration:underline;
}

А также хук javascript, если хотите.

...