Can you include an image in the hyperlink style definition?

Community Beginner ,
Oct 04, 2017

Copy link to clipboard

Copied

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.

TOPICS
HTML

Views

202

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

1 Correct Answer

LEGEND , Oct 04, 2017
Captiv8r LEGEND , Oct 04, 2017
Hi thereI 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 va...

Likes

Translate

Translate
Jump to answer Jump to answer
Adobe Community Professional ,
Oct 04, 2017

Copy link to clipboard

Copied

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

the output.

Please use the blue Reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Oct 04, 2017

Copy link to clipboard

Copied

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:

Capture.PNG

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
Oct 04, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Oct 04, 2017

Copy link to clipboard

Copied

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

}

image-after-link.png

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Oct 04, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Oct 04, 2017

Copy link to clipboard

Copied

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

Perhaps the link Rick provided will help.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
Oct 04, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
greg_sutton AUTHOR LATEST
Community Beginner ,
Oct 05, 2017

Copy link to clipboard

Copied

Thanks Rick. That worked perfectly.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more