layered images

Report · Apr 11, 2008

Hi,
RH Version 6. Output is FlashHelp.
For reasons of my own, I would rather not use popups for the effect I want to achieve.
I want to have a list of text terms...when the user clicks on a term, an image appears.
My vision is to have all the terms in a column and to have the images appear to the right of that column.
If the user clicks on a second term, the second image covers up the first image and so on.

So...basic question is...how do I layer images?

Many thanks,
Joe

Report · Apr 11, 2008

Hi Joe

You could accomplish it using Positioned Text Boxes and DHTML. But I would think that's the long way around.

Not sure if you have it available, but I would probably resort to Adobe Captivate for this purpose.

Cheers... Rick

Report · Apr 11, 2008

Hi Rick,
Perfect. Thank You.
I was performing my due diligence in Help prior to bothering the folks in the Forum.
I was fixated on "image" topics in the RoboHelp Help. I guess this brings up a good point for the Adobe folks...perhaps it would be more intuitive to call the Text Box a "Text/Image Box" or even a "Content Box". In any event, your solution (Text Boxes and DHTML) is perfect for what I need to do.
Thanks again for helping me,
Joe

Report · Oct 04, 2011

Rick, I am trying to accomplish a similar action of layering where I want to achieve exactly what is done on the following where a user can click the "view full size graphic" and see the full size graphic and then be provided the option to view small graphic:

http://help.adobe.com/en_US/robohelp/robohtml/WS5b3ccc516d4fbf351e63e3d11aff59bd8a-7ffb.html

All of this will be placed in the dropdow text, and I have been trying the positioned text boxes but I believe I am running into the problems you mention in that I am having troubles controlling the placement of my content. Can you point me to how to accomplish in Captivate as you mention above?

Thanks.

Report · Oct 04, 2011

Hi,

Just took a peek at the source of the adobe Help and ripped their script They use the following function:

// HIDES AND SHOWS LARGE GRAPHICS IN THE CONTENT PAGES
function showHideImage(thisID, obj) 
{
    
    var imgElement = obj.nextSibling;
    var imgText = obj;

    if( imgElement.className == "largeImage" )
    {
        imgElement.src = "images/" + thisID + ".png";
        imgElement.className="smallImage";
        obj.className="showImageLink";
        obj.href="#";
        obj.firstChild.nodeValue = terms_AHV_LARGE_GRAPHIC;
        window.focus();
    }
    else
    {
        imgElement.src = "images/" + thisID + "_popup.png";
        imgElement.className="largeImage";
        obj.className="hideImageLink";
        obj.href="#";
        obj.firstChild.nodeValue = terms_AHV_SMALL_GRAPHIC;
        window.focus();
    }
    return false;
}

With the following HTML:

<a onclick="return showHideImage('gs_manage_linked_resources', this);" href="#">View full size graphic</a>
<img id="gs_manage_linked_resources" src="images/gs_manage_linked_resources.png" />

As far as I can make out, you need to do the following:

Create a JavaScript file and add the function above.
Add var terms_AHV_LARGE_GRAPHIC = "View full size graphic"; to the top of the file.
Add var terms_AHV_SMALL_GRAPHIC = "Show small graphic"; to the top of the file.
Add the file as a baggage file to your project.
Assign the JS file to the topic by adding it to the head section: <head><script type="text/javascript" src="help.js"></script></head>
Create two images, the small one named someting like: image1.png. The large one named: image1_popup.png. The bold text needs to be the same.
Place both images in a folder named images. This directory must be placed in the directory that holds the topic.
Add the image _popup as a baggage file to the project.
In the topic, add a popup and an image below.
Go to HTML mode.
Add # as the href of the link.
Add an onclick element and add the name of the small image without .png as the first argument. See the example HTML above.
Add the name of the small image without .png as the id of the image. See the example HTML above.
Save and generate.

No guarantees that this will work, this is just how it should work for Adobe

Greet,

Willam

Adobe Community

layered images