Home arrow AJAX & Prototype arrow Page 3 - Using Prototip with AJAX

Extending the Tooltips with Additional Mark-up - AJAX

In 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.

TABLE OF CONTENTS:
  1. Using Prototip with AJAX
  2. Adding Some PHP
  3. Extending the Tooltips with Additional Mark-up
  4. Getting the Rules Right
By: Dan Wellman
Rating: starstarstarstarstar / 8
February 04, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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! 



 
 
>>> More AJAX & Prototype Articles          >>> More By Dan Wellman
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

AJAX & PROTOTYPE ARTICLES

- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: