 AJAX & Prototype Page 3 - Using Prototip with AJAX |
Extending the Tooltips with Additional Mark-up - AJAXIn the first part of this tutorial we looked at the ease with which a default implementation of Prototip tooltips could be put on the page, and how, with just a little configuration we could change the appearance and behavior of the tooltips. In this part of the tutorial we’re going to take a look at the built-in AJAX functionality boasted by the plugin, and see how we can extend the tooltips by supplying HTML elements instead of plain text as their content.
print this article SEARCH DEV SHED |
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 class="container"> <div class="contents"> <h2>Galaxies</h2> <div class="placeholder"> <img class="thumb" 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 class="container"> <div class="contents"> <h2>Stars</h2> <div class="placeholder"> <img class="thumb" 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 class="container"> <div class="contents"> <h2>Nebulae</h2> <div class="placeholder"> <img class="thumb" 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 class="container"> <div class="contents"> <h2>Dark Matter</h2> <div class="placeholder"> <img class="thumb" 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.htmlin the pagesfolder. 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!
blog comments powered by Disqus |
|
|
|
|
|
|
|
/ 8 
