finding xml nodes
finding xml nodes
i have a dynamic imagemap loaded through asp .net using xml as a datasource, i used the map highlight plugin found on this site and everyhting was fine.
I then amended the jquery to add descriptive text from the xml on hover.
Here is my xml
<img src="bathroom.gif" alt="bathroom" width="852" height="571" >
<file>bathroom.xml</file>
<roomID>1</roomID>
<area id="Bath">
<componenetID>2</componenetID>
<componentDrillDown>N</componentDrillDown>
<component>NA</component>
<shape>poly</shape>
<helpText>Baths are great for getting clean</helpText>
<title>Bath</title>
<coords>363,318,364,377,509,420,521,421,599,400,600,334,439,302</coords>
</area>
<area id="Sink">
<componenetID>41</componenetID>
<componentDrillDown>N</componentDrillDown>
<component>NA</component>
<shape>poly</shape>
<helpText>Wash hands here</helpText>
<title>Sink</title>
<coords>236,311,247,329,265,335,274,401,287,406,310,402,308,334,332,326,335,309,305,300</coords>
</area>
<area id="Shower">
<componenetID>40</componenetID>
<componentDrillDown>N</componentDrillDown>
<component>NA</component>
<shape>poly</shape>
<helpText>Help</helpText>
<title>Shower</title>
<coords>1,145,135,143,163,460,18,498</coords>
</area>
</img>
The issue is I want to remove the id attribute from the area node. But In the jqeury i edited I only know how to find nodes with a specific attribute, so I need to edit this to search fro the title node, and then get the corresponding helptext.
(function(F) {
var B, C, J, M, L, I, G, E, H, A, K;
B = document.namespaces;
has_canvas = !!document.createElement("canvas").getContext;
if (!(has_canvas || B)) {
F.fn.maphilight = function() {
return this
};
return
}
if (has_canvas) {
G = function(P, O, N) {
if (O <= 1) {
P.style.opacity = O;
window.setTimeout(G, 10, P, O + 0.1, 10)
}
};
E = function(N) {
return Math.max(0, Math.min(parseInt(N, 16), 255))
};
H = function(N, O) {
return "rgba(" + E(N.substr(0, 2)) + "," + E(N.substr(2, 2)) + "," + E(N.substr(4, 2)) + "," + O + ")"
};
C = function(N) {
var O = F('<canvas style="width:' + N.width + "px;height:" + N.height + 'px;"></canvas>').get(0);
O.getContext("2d").clearRect(0, 0, O.width, O.height);
return O
};
J = function(Q, N, T, P, O, DB, feed) {
var S, R = Q.getContext("2d");
R.beginPath();
//DB
$.get('/xml/' + feed, function(d) {
$(d).find('area[id = "' + DB + '"]').each(function() {
var $book = $(this);
var title = $book.find("title").text();
var Helptext = $book.find('helpText').text();
$('#desc').html("<strong>Information:</strong><p>" + title + "</p><p>" + Helptext.toString() + "</p>");
});
});
//END
if (N == "rect") {
R.rect(T[0], T[1], T[2] - T[0], T[3] - T[1])
} else {
if (N == "poly") {
R.moveTo(T[0], T[1]);
for (S = 2; S < T.length; S += 2) {
R.lineTo(T[S], T[S + 1])
}
} else {
if (N == "circ") {
R.arc(T[0], T[1], T[2], 0, Math.PI * 2, false)
}
}
}
R.closePath();
if (P.fill) {
R.fillStyle = H(P.fillColor, P.fillOpacity);
R.fill()
}
if (P.stroke) {
R.strokeStyle = H(P.strokeColor, P.strokeOpacity);
R.lineWidth = P.strokeWidth;
R.stroke()
}
if (P.fade) {
G(Q, 0)
}
};
M = function(N) {
N.getContext("2d").clearRect(0, 0, N.width, N.height)
$('#desc').html("<strong>Information:</strong><p></p>");
}
} else {
C = function(N) {
return F('<var style="zoom:1;overflow:hidden;display:block;width:' + N.width + "px;height:" + N.height + 'px;"></var>').get(0)
};
J = function(O, R, S, V, N, DB, feed) {
//DB
$.get('/xml/' + feed, function(d) {
$(d).find('area[id = "' + DB + '"]').each(function() {
var $book = $(this);
var title = $book.find("title").text();
var Helptext = $book.find('helpText').text();
$('#desc').html("<strong>Information:</strong><p>" + title + "</p><p>" + Helptext.toString() + "</p>");
});
});
//END
var T, U, P, Q;
T = '<v:fill color="#' + V.fillColor + '" opacity="' + (V.fill ? V.fillOpacity : 0) + '" />';
U = (V.stroke ? 'strokeweight="' + V.strokeWidth + '" stroked="t" strokecolor="#' + V.strokeColor + '"' : 'stroked="f"');
P = '<v:stroke opacity="' + V.strokeOpacity + '"/>';
if (R == "rect") {
Q = F('<v:rect name="' + N + '" filled="t" ' + U + ' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:' + S[0] + "px;top:" + S[1] + "px;width:" + (S[2] - S[0]) + "px;height:" + (S[3] - S[1]) + 'px;"></v:rect>')
} else {
if (R == "poly") {
Q = F('<v:shape name="' + N + '" filled="t" ' + U + ' coordorigin="0,0" coordsize="' + O.width + "," + O.height + '" path="m ' + S[0] + "," + S[1] + " l " + S.join(",") + ' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:' + O.width + "px;height:" + O.height + 'px;"></v:shape>')
} else {
if (R == "circ") {
Q = F('<v:oval name="' + N + '" filled="t" ' + U + ' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:' + (S[0] - S[2]) + "px;top:" + (S[1] - S[2]) + "px;width:" + (S[2] * 2) + "px;height:" + (S[2] * 2) + 'px;"></v:oval>')
}
}
}
Q.get(0).innerHTML = T + P;
F(O).append(Q)
};
M = function(N) {
F(N).find("[name=highlighted]").remove()
$('#desc').html("<strong>Information:</strong><p></p>");
}
}
L = function(O) {
var N, P = O.getAttribute("coords").split(",");
for (N = 0; N < P.length; N++) {
P[N] = parseFloat(P[N])
}
return [O.getAttribute("shape").toLowerCase().substr(0, 4), P]
};
//DB
ZZ = function(O) {
return [O.getAttribute("title")];
};
YY = function(O) {
return $('#ctl00_ContentPlaceHolder1_hdnMapname').val();
};
//END
K = function(P, O) {
var N = F(P);
return F.extend({}, O, F.metadata ? N.metadata() : false, N.data("maphilight"))
};
A = function(N) {
if (!N.complete) {
return false
}
if (typeof N.naturalWidth != "undefined" && N.naturalWidth == 0) {
return false
}
return true
};
I = {
position: "absolute",
left: 0,
top: 0,
padding: 0,
border: 0
};
var D = false;
F.fn.maphilight = function(P) {
P = F.extend({}, F.fn.maphilight.defaults, P);
if (F.browser.msie && !D) {
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
var O = document.createStyleSheet();
var N = ["shape", "rect", "oval", "circ", "fill", "stroke", "imagedata", "group", "textbox"];
F.each(N, function() {
O.addRule("v\\:" + this, "behavior: url(#default#VML); antialias:true")
});
D = true
}
return this.each(function() {
var V, S, Z, R, U, W, Y, T, X;
V = F(this);
if (!A(this)) {
return window.setTimeout(function() {
V.maphilight(P)
}, 200)
}
Z = F.extend({}, P, F.metadata ? V.metadata() : false, V.data("maphilight"));
X = V.get(0).getAttribute("usemap");
R = F('map[name="' + X.substr(1) + '"]');
if (!(V.is("img") && X && R.size() > 0)) {
return
}
if (V.hasClass("maphilighted")) {
var Q = V.parent();
V.insertBefore(Q);
Q.remove();
F(R).unbind(".maphilight").find("area[coords]").unbind(".maphilight")
}
S = F("<div></div>").css({
display: "block",
background: "url(" + this.src + ")",
position: "relative",
padding: 0,
width: this.width,
height: this.height
});
if (Z.wrapClass) {
if (Z.wrapClass === true) {
S.addClass(F(this).attr("class"))
} else {
S.addClass(Z.wrapClass)
}
}
V.before(S).css("opacity", 0).css(I).remove();
if (F.browser.msie) {
V.css("filter", "Alpha(opacity=0)")
}
S.append(V);
U = C(this);
F(U).css(I);
U.height = this.height;
U.width = this.width;
Y = function(c) {
var a, b;
b = K(this, Z);
if (!b.neverOn && !b.alwaysOn) {
a = L(this);
J(U, a[0], a[1], b, "highlighted", ZZ(this), YY(this));
if (b.groupBy && F(this).attr(b.groupBy)) {
var d = this;
R.find("area[" + b.groupBy + "=" + F(this).attr(b.groupBy) + "]").each(function() {
if (this != d) {
var f = K(this, Z);
if (!f.neverOn && !f.alwaysOn) {
var e = L(this);
J(U, e[0], e[1], f, "highlighted", ZZ(this))
}
}
})
}
F(U).append("<v:rect></v:rect>")
}
};
F(R).bind("alwaysOn.maphilight", function() {
if (W) {
M(W)
}
if (!has_canvas) {
F(U).empty()
}
F(R).find("area[coords]").each(function() {
var a, b;
b = K(this, Z);
if (b.alwaysOn) {
if (!W && has_canvas) {
W = C(V.get());
F(W).css(I);
W.width = V.width();
W.height = V.height();
V.before(W)
}
a = L(this);
if (has_canvas) {
J(W, a[0], a[1], b, "", ZZ(this))
} else {
J(U, a[0], a[1], b, "", ZZ(this))
}
}
})
});
F(R).trigger("alwaysOn.maphilight").find("area[coords]").bind("mouseover.maphilight", Y).bind("mouseout.maphilight", function(a) {
M(U)
});
V.before(U);
V.addClass("maphilighted")
})
};
F.fn.maphilight.defaults = {
fill: true,
fillColor: "000000",
fillOpacity: 0.2,
stroke: true,
strokeColor: "ff0000",
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: false,
wrapClass: true
}
})(jQuery);
My code is in bold, its repated twice for IE and firefox. All that needs changing is:
There will no longer be an attribute of ID, I will still pass the title into jquery and then just find the relevant nodes helptext.
$(d).find('area[id = "' + DB + '"]').each(function() {
Can someone help me? Also the text lookup appears quite slow in FF, this isnt a major issue at moment though.
thanks Dave