Skip to main content
G
greg_sutton
Inspiring
October 4, 2017
Answered

Can you include an image in the hyperlink style definition?

  • October 4, 2017
  • 2 replies
  • 663 views

Hi,

I want to include an image to appear at the end of a hyperlink similar to a twisty. In RoboHelp 2015, I can click the Set Twisties button and use the Select Twisties Images dialog box to add an image. The image appears in the Character Preview box but not in the topic. Is what I want to do possible or am I stuck manually inserting images over and over again?

Thanks in advance for any assistance.

This topic has been closed for replies.
Correct answer Captiv8r

Yeah, newer css often doesn't work in chm files - unsurprising given how old it is.

Perhaps the link Rick provided will help.


Hi there

I looked at the link I supplied and it does seem to work in the compiled CHM file.

Basically I opened the CSS in Windows Notepad and made the following changes:

A:link {

font-weight: bold;

color: #000080;

text-decoration: none;

    background: transparent url('purple2_right.gif') no-repeat center right;

    padding-right: 60px;

}

After making those changes, I then ensured I added the desired image to baggage. Compiled the CHM and voila!

Note that you will likely need to adjust the padding-right value to be smaller.

Cheers... Rick

2 replies

A
Community Expert
AmebrCommunity Expert
Community Expert
October 4, 2017

I've done this using the :after pseudo-element, but you have to write it manually and I'm not sure if it will work in chm files.

The basic version looks like this:

a:after {

content: url('path/image.name');

}

e.g.

a:after {

content: url('../images/web-link.png');

}

You can do more complicated things to limit it to the topic content and only for external links. For example, in Multiscreen HTML5, the following limits the image to links inside the topic container (class=wTopic), and only if the href begins with 'http'. If those are true, show the image after the url. The content property uses the relative path from the css to the image file you want to use. You will also probably need to add the image as a baggage file, as (at least in v11) Robohelp doesn't automatically pull in content references.

If you want the image in front of the link, use ':before' instead. (hopefully it works in chm files. )

/* Add web-link image to any link to a website */

.wTopic a[href^='http']:after {

content: url("../images/web-link.png");

}

    G
    greg_suttonAuthor
    Inspiring
    October 5, 2017

    Thanks, but your solution did not work in my CHM file.

    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    October 5, 2017

    Yeah, newer css often doesn't work in chm files - unsurprising given how old it is.

    Perhaps the link Rick provided will help.

    Peter Grainge
    Community Expert
    Peter GraingeCommunity Expert
    Community Expert
    October 4, 2017

    The image does not appear in the topic but will appear in the preview and

    the output.

    Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    G
    greg_suttonAuthor
    Inspiring
    October 4, 2017

    It did not appear in either. I wonder if it is not supported in CHM files or if I incorrectly defined the style. Here is what is in the CSS:

    Captiv8r
    Captiv8r
    Legend
    October 4, 2017

    Hi there

    I'm not surprised in the least that this didn't work. Why? Well, the stuff for the DHTML twisties relies on special coding designed for that specific style. Specifically, the class="dropspot" bit.

    You might give the link below a try.

    Click here to view

    Cheers... Rick

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices