Raphael not finding element on asp.net page using jquery
I'm a newbie to Raphael and having problems creating a Raphael object from an existing element.
Code below shows what I have tried and the errors each one creates. Ideally I'd want to use jquery to create the object in the initial call to Raphael.
Any help would be much appreciated.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFor开发者_运维知识库m2.aspx.cs" Inherits="Fleetstar.UI.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="js/raphael.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var thisWorks = document.getElementById('imgMap'); // This works
var thisAlsoWorks = $('.mapClass'); //thsi.works
var thisDoeNotWorkA = Raphael(document.getElementById('imgMap'), 200, 200); //Error: Unexpected call to method or property access.
var thisDoeNotWorkB = Raphael(document.getElementById('imgMap')[0], 200, 200); //Error: 'tagName' is null or not an object
var thisDoeNotWorkC = Raphael(document.getElementById('imgMap').node, 200, 200); //// Error: 'tagName' is null or not an object
var thisDoeNotWorkD = Raphael($('.mapClass'), 200, 200); //Error: 'container' is null or not an object
var thisDoeNotWorkE = Raphael($('.mapClass').node, 200, 200); // Error: 'tagName' is null or not an object
var thisDoeNotWorkF = Raphael($('.mapClass')[0], 200, 200); //Error: Unexpected call to method or property access.
var thisDoeNotWorkG = Raphael($('[id$="imgMap"]'), 200, 200); // Error: 'container' is null or not an object
var thisDoeNotWorkH = Raphael($('[id$="imgMap"]')[0], 200, 200); //Error: Unexpected call to method or property access.
var thisDoeNotWorkI = Raphael($('[id$="imgMap"]').node, 200, 200); //Error: 'tagName' is null or not an object
});
</script>
</head>
<body>
<form id="form1" runat="server">
<img class="mapClass" id="imgMap" name="imgMapName" style="position: absolute" src="Images/map.gif"
alt="" />
</form>
Try this:
var thisDoeNotWorkA = Raphael('imgMap', 200, 200);
The spec at http://raphaeljs.com/reference.html#Raphael says you want to pass the node id.
EDIT: If that doesn't work then it is possible that the element ID was modified by something else?
I have never seen anyone try to make a Raphael canvas from an image tag. Why don't you use an ordinary div and position it where you like?
thisDoesWork = Raphael(document.getElementById('imgMapDiv'), 200, 200);
Charles
http://www.irunmywebsite.com
加载中,请稍侯......
精彩评论