Using Prototip with AJAX (Part 3)- Extending the Tooltips with Additional Mark-up
-
So far all of our examples have used simple text as the heading and content for the tooltips; in addition to this we can also supply other content such as images, using HTML instead of plain text within the tooltips. This gives us much more flexibility over the behavior and appearance of the tooltips, and allows us to add images, lists, and other elements.
We’ll make a new page for this example; we can have a series of thumbnail-sized images on the page along with some descriptive text. Whenever one of the thumbnail images is rolled over, we can show the full-sized version in a tooltip. The page we’ll end up with should look something like the following screen shot:
In a new file in your text editor, then, create the following basic page:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”../css/prototip.css”>
<link rel=”stylesheet” type=”text/css” href=”../css/imagetips.css”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Prototip Example</title>
</head>
<body>
<div id=”outerContainer”>
<h1>Phenomena of the Universe</h1>
<div>
<div>
<h2>Galaxies</h2>
<div>
<img id=”galaxy” src=”../images/space/thumbs/galaxy_thumb.jpg” alt=”Spiral Galaxy NGC 4526″>
</div>
<p>A galaxy is a system of stars, etc…</p>
</div>
</div>
<div>
<div>
<h2>Stars</h2>
<div>
<img id=”star” src=”../images/space/thumbs/star_thumb.jpg” alt=”UV Trace of the Sun”>
</div>
<p>A star is a huge, shining ball in space etc…</p>
</div>
</div>
<div>
<div>
<h2>Nebulae</h2>
<div>
<img id=”nebula” src=”../images/space/thumbs/nebula_thumb.jpg” alt=”The Crab Nebula”>
</div>
<p>A nebula is a cloud of dust particles etc…</p>
</div>
</div>
<div>
<div>
<h2>Dark Matter</h2>
<div>
<img id=”dark” src=”../images/space/thumbs/dark_thumb.jpg” alt=”A Ring of Dark Matter”>
</div>
<p>The name dark matter comes from etc…</p>
</div>
</div>
</div>
<script type=”text/javascript” src=”../scriptaculous-js-1.8.2/lib/prototype.js”></script>
<script type=”text/javascript” src=”../scriptaculous-js-1.8.2/src/effects.js”></script>
<script type=”text/javascript” src=”../js/prototip.js”></script>
Save what we have so far as prototip4.html in the pages folder. We have a series of content blocks, each with a heading, some text and an image; the images will become triggers for the tooltips when we add the script. We have some elements, such as the placeholder and contents div elements which are used purely for styling. Prototips look so great that I couldn’t just leave the page bare for this example!
Popularity: 1% [?]
