Enlaces de texto usando Raphael en IE8

Tengo muchos problemas para obtener un simple enlace de texto para trabajar en IE8 usando Raphael. Quiero texto que se comporte como un enlace normal. He incluido algunos códigos a continuación con los que he estado jugando.Enlaces de texto usando Raphael en IE8

consiguió el cursor se convierta en una mano mediante el uso de la función estacionario y document.body.cursor
La función de clic sólo funciona cuando se hace clic en los píxeles de texto reales - clic en los espacios entre las letras no hace nada
El problema anterior también afecta al control deslizante

¿Debo agregar algún elemento detrás del texto, un rectángulo/cuadro delimitador, para manejar el mouse? ¿Algunas ideas? Este problema solo está en IE8, que como saben, usa VML vía Raphael.

Aquí está el código:

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

Fuente

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

Fuente

2010-08-23 09:39:24

Gracias Dmitry que me ayudó mucho. – ncatnow

sigue siendo aplicable unos 2 años después. –

Puede agregar una clase a su elemento como este (no funciona en IE8):

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

Con una hoja de estilo como esto:

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

Así como un enganche de javascript si lo deseas.

Fuente

2013-11-14 05:48:17 duck9

Enlaces de texto usando Raphael en IE8

Respuesta

Cuestiones relacionadas