Remove html coding in image tooltip

[dmwhipp]

Hi,
I'm not even sure if I'm using the correct terminology, but this is an issue I have on multiple sites that feature photo galleries with image titles.

Here is an example: http://www.messerparkbaseball.org/allstars.html

I'm using Image Thumbnail Viewer and need to fill in the image title attribute. The titles require some html coding (i.e. <b> and <br>). The captions display perfectly when the images are enlarged.

But when you mouseover the thumbnail images before enlarging, the tooltip shows the html coding.

Is there any way to remove this when mousing over the thumbnails but still have the title display when the image is enlarged? I've been scouring the Internet for a workaround for this, but I'm not even sure what terminology to use when searching.

Thanks,
Deborah

[ApacheTech]

It's because you can't use markup (HTML) in an image's title="" attribute.

You'll need a JS or JQ script to display a <div></div> when you hover over the link.

The title attribute is only supposed to be a short description, a 'tooltip' if you will, that gives some information about the image or link.

For the site as a whole, it is very old and is coded in a now depreciated fashion in a fast depreciating version of HTML. In modern day terms, that one page has 43 errors and 11 warnings when passed through a validator. You may wish to update your site wholesale using modern day techniques; it will greatly increase your web visibility by bringing it inline with modern SEO (Search Engine Optimisation) standards. In laymans rems, search engines will be able to index your site more easily and you'll be nearer the top of any search results. It will also help future-proof your site, so that you can more easily add plugins and scripts such as the one you need here.

That said, however, I'm sure you'll get an answer to your problem as a quick-fix here. In the long term though, your site needs a major overhaul.

[dmwhipp]

Hi Apache,
Thanks for the response.

The majority of my sites need to be cross browser compatible for the lowest common denominator (site visitors in public schools, frequently using old versions of Internet Exploder). I'm waiting for HTML5 to become the official standard before switching out their coding. The site is built using HTML 4.01 transitional and validates error free at http://validator.w3.org/.

Thanks,
Deborah

[dmwhipp]

Forgot to ask, can a JS or JQ script display the caption in the large image after the thumbnail is clicked? I don't need a description on hover at all, just a caption for the large image.
Thanks again,
Deborah

[ApacheTech]

I would recommend using CSS3, HTML5, with the Modernizr plugin and the latest version of JQuery (currently 1.7.2 at time of writing). Or at the very least, XHTML 1.0 Transitional.

A good starting place for scratch-built sites is http://html5boilerplate.com/

It comes with a huge amount of features for cross-browser compatibility and it's set up ready to go, there's a good video on the home page that explains everything that's in it.

The main problem with the way you code your sites is using tables as a layout guide. Tables in HTML should only be used for tabular data. Search engines find it difficult to read the contents of tables and their use for simply positioning things on the page is highly discouraged nowadays. Unfortunately, in 1996 it was pretty much the only way to have a consistent layout for your pages, so it was taught pretty much uniformly across the board. Since then, we've have realised their massive mistake and most Web Developers nowadays will push towards eliminating such sites and remastering them in HTML5 or XHTML 1.0, with div tags and CSS styling.

Also, tables create vast amounts of unneeded code, meaning larger page sizes (slower refresh rates) and it can be very difficult to work out what's actually going on on a page from it's source code because of the lack of flow. On top of that, CSS is harder to manage and JQuery/Javascript scripts run slower and can be hugely more difficult to manage because of the extra markup and unnecessary tags.

For a validator, the one you're using is fine. It's industry standard; but if you develop with an IDE, such as Visual Studio 2010 or Netbeans, they have their own in-built validators when in debug mode. They adhere to the schema you choose, based on the DOCTYPE of the page, or CSS version.

For your problem here, you can do the following:

In the head:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $('.thumbnail').each(function () {
            $(this).hover(function () {
                $(this).children('.tooltip').fadeIn('slow');
            }, function () {
                $(this).children('.tooltip').fadeOut('fast');
            });
        });

    </script>

Then each image link would be:

    <div class="thumbnail" >
        <a title="2012 Dizzy Dean World Series Team" rel="thumbnail" href="/graphics/photos/2012-WorldSeriesTeam.jpg">
            <img alt="2012 Dizzy Dean World Series Team" src="/graphics/photos/2012-WorldSeriesTeam_th.jpg">
        </a>
        <p class="caption">
            2012 Dizzy Dean World Series Team</p>
        <div class="tooltip" style="display: none;">
            <p>
                <b>Messer Park 14U World Series Team</b></p>
            <p>
                <b>Back Row:</b> Coach Joe Calabrese; Benjamin Wynn; Landon Ortwein; Bailey Lee;
                Cole Newcomb; Jerry Harrell</p>
            <p>
                <b>Middle Row:</b> Coach Mike Sposato; Jordan Manning; Caleb Davie; James Dodson;
                Gage Hevener; Manager Britt Wynn</p>
            <p>
                <b>Front Row:</b>
            Carmen Calabrese; Michael Sposato; David Sposato; Robert Batson; Hunter Truman;
            Coach Chris Dodson
        </div>
    </div>

Then all you need to do is style .tooltip to how you want it. That's one way of doing it anyway.

[ApacheTech]

Another option would be to use a Lightbox plugin.

There's a round up of the best ones here:

http://line25.com/articles/rounding-...ghtbox-scripts

For a page such as yours, with the effects you already have, that would be one of the best options. With the lightbox plugins, you can specify the captions your photo has when they are magnified.

[jscheuer1]

Use this custom version of the script:

Attachment 4531

Now you use the data-title attribute instead of title for the description. Example:

<a href="/graphics/photos/2012-WorldSeriesTeam.jpg" rel="thumbnail" data-title="<b>Messer Park 14U World Series Team</b><br><b>Back Row:</b> Coach Joe Calabrese; Benjamin Wynn; Landon Ortwein; Bailey Lee; Cole Newcomb; Jerry Harrell<br>
		<b>Middle Row:</b> Coach Mike Sposato; Jordan Manning; Caleb Davie; James Dodson; Gage Hevener; Manager Britt Wynn<br>
		<b>Front Row:</b> Carmen Calabrese; Michael Sposato; David Sposato; Robert Batson; Hunter Truman; Coach Chris Dodson"><img src="/graphics/photos/2012-WorldSeriesTeam_th.jpg" alt=""></a>

It won't show up as a tooltip, but will show up as a description in the larger image box.

Though no longer required, you may still use a title attribute If you want. It will not be used by the script. It will show up as a tooltip when you hover the image.

[dmwhipp]

Thanks John - fast, easy and works perfectly. You're a life saver as usual!
Deborah