Main Content

Using Show Hide to Create Interactive Images

Vertical Layout for Interactive Images

The WC Show Hide allows you to create interactive content from text and images HTML and CSS. You can use spacial relationships to convey ideas. The examples below were used in COMM 180 to help visualize the differences between vertical and horizontal integration:

A vertically integrated company might try to harm competitors at each level. The government has a variety of rules in place to prevent these kinds of anticompetitive behaviors. Click on the images below to see an example:

  • Production
    For example, Time Warner owns Warner Brothers Studio and HBO.
  • Wholesale Distribution
    HBO competes with Showtime. Warner Brothers might give HBO a better deal than Showtime or even refuse to let Showtime have any Warner Brothers movies in order to give HBO an advantage.
  • Retail Distribution
    Time Warner Cable systems compete with DirecTV. Time Warner might refuse to let DirecTV carry HBO or CNN so that customers will stick with cable instead of switching to satellite television.

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

    Create a list.

    Add HTML similar to the example below:

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

    Insert a list 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 -->
    <p>INSERT INSTRUCTIONS HERE</p>
    <ul class="interactive-vertical">
    <!-- 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>
    <div class="details IMAGE-ID-HERE showme nojs">INSERT IMAGE #1 DESCRIPTION HERE</div>
    </li>
    <!-- end clickable item -->
    </ul>
    <!-- end clickable list of items -->

    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