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:
-
For example, Time Warner owns Warner Brothers Studio and HBO.
-
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.
-
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:
<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:
<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 -->
<!-- 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;}