Question

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

Answer 1

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/.