JEditorPane remove border from image link

Question

I have a JEditorPane that displays a link containing an image like so:

<a href='http://somesite.com/'>
    <img src='someImage.png' />
</a>

When the JEditorPane display this as HTML, it puts a blue border around the image which I am trying to remove without any luck.

I want it to look like this inside of the jeditorpane: image: (http://randomcloud.net/img/prob/valid.png)

But this is how the JEditorPane displays it: image(http://randomcloud.net/img/prob/jeditorpane.png)

This is what I have tried so far, and it still is not working

editorPane = new JEditorPane("http://randomcloud.net/ads/index.php?id=1");
StyleSheet style = ((HTMLDocument)editorPane.getDocument()).getStyleSheet();
style.addRule("a img {text-decoration: none; border: none;}");

Any suggestions or insight ?

-Michel

Answer 1

HTLEditorKit's ImageView source. As you can see borderSize is set to DEFAULT_BORDER (2 pixels). You can replace the ImageView creation in your implementation of ViewFactory and override the method to provide desired border (0 as I understand).

protected void setPropertiesFromAttributes() {
    StyleSheet sheet = getStyleSheet();
    this.attr = sheet.getViewAttributes(this);

    // Gutters
    borderSize = (short)getIntAttr(HTML.Attribute.BORDER, isLink() ?
                                   DEFAULT_BORDER : 0);

    leftInset = rightInset = (short)(getIntAttr(HTML.Attribute.HSPACE,
                                                0) + borderSize);
    topInset = bottomInset = (short)(getIntAttr(HTML.Attribute.VSPACE,
                                                0) + borderSize);

    borderColor = ((StyledDocument)getDocument()).getForeground
                  (getAttributes());

    AttributeSet attr = getElement().getAttributes();

    // Alignment.
    // PENDING: This needs to be changed to support the CSS versions
    // when conversion from ALIGN to VERTICAL_ALIGN is complete.
    Object alignment = attr.getAttribute(HTML.Attribute.ALIGN);

    vAlign = 1.0f;
    if (alignment != null) {
        alignment = alignment.toString();
        if ("top".equals(alignment)) {
            vAlign = 0f;
        }
        else if ("middle".equals(alignment)) {
            vAlign = .5f;
        }
    }

    AttributeSet anchorAttr = (AttributeSet)attr.getAttribute(HTML.Tag.A);
    if (anchorAttr != null && anchorAttr.isDefined
        (HTML.Attribute.HREF)) {
        synchronized(this) {
            state |= LINK_FLAG;
        }
    }
    else {
        synchronized(this) {
            state = (state | LINK_FLAG) ^ LINK_FLAG;
        }
    }
}

I think the blue border is just selection of text. Try to deselect the content or use jEditorPaneInstance.getCaret().setSelectionVisible(false);

Answer 2

@Alien595: On img tags, you can add an attribute named border that is 0.

Example:

<a href="your_link.html">
    <img border="0" src="your_image.png"/>
</a>