Can you include an image in the hyperlink style definition?

[greg_sutton]

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.

[Peter Grainge]

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

the output.

[greg_sutton]

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]

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

[Amebr]

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");

}

[greg_sutton]

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

[Amebr]

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

Perhaps the link Rick provided will help.

[Captiv8r · Accepted solution]

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

[greg_sutton]

Thanks Rick. That worked perfectly.