Main Content

Using Show Hide to Create Interactive Images

Horizontal Layout for Interactive Images

  • Owned by Viacom
  • Owned by Viacom
  • Owned by Viacom

Click on the examples of Viacom examples above to learn more about horizontal integration.

Comedy Central is owned by Viacom.
MTV is owned by Viacom.
BET is owned by Viacom.

The example above of clickable images in a horizontal layout will require the following:

    Create a list and a details container.

    Add HTML similar to the example below:

    <!-- a clickable list of items -->
    <ul class="interactive-vertical">
    </ul>
    <!-- end clickable list of items -->

    <!-- details container -->
    <div class="details-horizontal">
    <p>INSERT INSTRUCTIONS HERE</p>
    </div>
    <!-- end details container -->

    Tip: You can style the details box like the example above by adding one of the Content Box styles to it.

    Insert a list item and a details item for each clickable image.

    Inside the ul of the HTML you just added, you will add a list item (li) for each clickable image. Remember to replace the three references of IMAGE-ID-HERE with the unique id you give each image:

    <!-- a clickable list of items -->
    <ul class="interactive-horizontal">
    <!-- one clickable item -->
    <li>
    <div class="clickme" id="IMAGE-ID-HERE">
    <div class="caption IMAGE-ID-HERE showme nojs">INSERT IMAGE #1 CAPTION HERE</div>
    </div>
    </li>
    <!-- end clickable item -->
    </ul>
    <!-- end clickable list of items -->

    <!-- details container -->
    <div class="details-horizontal">
    <p>INSERT INSTRUCTIONS HERE</p>
    <div class="details IMAGE-ID-HERE showme nojs">INSERT IMAGE #1 DESCRIPTION HERE</div>
    </div>
    <!-- end details container -->

    Tip: The your details container set up with div tags, p tags, or even a list with list items (li), as long as you add the approrpriate classes to them.

    Add the CSS.

    The CSS creates the interactivity. You can add the CSS by linking to a content.css and adding some CSS. For each clickable image you wish to add, add the code below. Replace IMAGE-ID-HERE with the unique id of the image and images/IMAGE-URL-HERE.jpg with url to that image.

    #IMAGE-ID-HERE {background:url('images/IMAGE-URL-HERE.jpg') center center no-repeat;}

    Top of page