Liens textuels utilisant Raphael dans IE8

J'ai beaucoup de mal à obtenir un simple lien textuel pour travailler dans IE8 en utilisant Raphael. Je veux un texte qui se comporte comme un lien normal. J'ai inclus un code ci-dessous avec lequel j'ai joué.Liens textuels utilisant Raphael dans IE8

Got le curseur pour passer à une main en utilisant la fonction de vol stationnaire et document.body.cursor
La fonction clic ne fonctionne que lorsque vous cliquez sur les pixels réels texte - en cliquant sur les écarts entre les lettres ne fait rien
Le problème ci-dessus affecte également le pointeur

Ai-je besoin d'ajouter un élément derrière le texte, un rectangle/une boîte englobante, pour manipuler la souris? Des idées? Ce problème est seulement dans IE8, qui, comme vous le savez, utilise VML via Raphael.

Voici le code:

<!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>

Source

2010-08-19 ncatnow

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"); });

Source

2010-08-23 09:39:24

Merci Dmitri qui m'a beaucoup aidé. – ncatnow

encore applicable quelques années plus tard. –

Vous pouvez ajouter une classe à votre élément comme celui-ci (ne fonctionne pas dans IE8):

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

Avec une feuille de style comme ceci:

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

En plus d'un crochet javascript si tu le désires.

Source

2013-11-14 05:48:17 duck9

Liens textuels utilisant Raphael dans IE8

Répondre

Questions connexes