How to stop Javascript from showing default image and only text for link?
The Javascript below has a default image, but I would like display text "only text url" for this link instead of this button at this link http://developer.mixi.co.jp/wp-content/uploads/2010/09/bt_check_1.gif that this script defa开发者_如何学JAVAults to. Is this possible?
<div>
<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="some-data-key" data-url="http://someurl.com">only text url </a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>
</div>
Assuming this is legal (it may not be legal to embed this script in your site if you make modifications to it), we can decompress the script using an online JavaScript beautifier. The result is this:
http://www.jsfiddle.net/T4Rrh/
The bit we're interested in is the last for
loop there, where each button is processed. We can safely remove a most of the image generation and protocol sniffing (an unnecessary practice, by the way) to reduce the weight of the code:
var type = (button["button"] || "button-1.png").split("-");
var prefix = ("https:" == document.location.protocol) ? "https://mixi.jp/" : "http://static.mixi.jp/";
if (!type || type.length < 2) type = ["button", "1.png"];
if (type[1].indexOf(".") == -1) type[1] += ".png";
var src = (type[0] == "button") ? [prefix, "img/basic/mixicheck_entry/bt_check_", type[1]] : (type[0] == "icon") ? [prefix, "img/basic/mixicheck_entry/icon_mixi_", type[1]] : [prefix, "img/basic/mixicheck_entry/bt_check_1.png"];
src = src.join("");
and
var img = document.createElement("img");
img.setAttribute("src", src);
img.style.border = "0";
var element = button.element;
for (var j = element.childNodes.length - 1; j >= 0; j--) {
element.removeChild(element.childNodes[j]);
}
element.appendChild(img);
should be both removed. You can then minify and save the code, then serve it yourself in your page. Here's what the cleaned up code looks like: http://www.jsfiddle.net/XrYLX/
Second Method:
Using CSS, we first remove the part of the JavaScript which removes all child nodes of the button element, so the text inside the button is not removed:
for (var j = element.childNodes.length - 1; j >= 0; j--) {
element.removeChild(element.childNodes[j]);
}
We then apply some CSS to hide the image:
.mixi-check-button img {
display: none;
}
See: http://www.jsfiddle.net/T4Rrh/1/.
Copy that script to your site and remove element.appendChild(img);
at the beginning of the last line.
精彩评论