Markup
Settings
$(function()
{
// search categories
$('#search-category span').click(function()
{
var category = $('a', this);
if (category.length)
{
$('#search-category span').not(this).each(function()
{
$(this).html('' + $(this).text() + '');
});
var text = $(category).text();
$(category).parent().html(text);
$('#search-category input').val(text);
$('#search-box input').attr('alt', $('#search-category').attr('alt') + ' ' + text + '...')
.attr('title', $('#search-box input')[0].hoverText).altText();
}
});
// --
// alternative text on inputs - call from plugin
$('#search-box input, .block-subscribe input').altText();
// --
});
Jquery alt text plugin
// jquery.alttext plugin
(function($)
{
$.fn.altText = function($options)
{
var opts = $.extend({}, $.fn.altText.settings, $options || {});
return $(this).each(function()
{
var $this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
this.valBackup = '';
this.focused = false;
this.altText = $this.attr(o.source);
this.hoverText = o.hoverState ? $this.attr(o.hoverSource) : null;
if (o.hoverSource == 'title')
{
this.title = '';
}
$(this).unbind();
$this.val(this.altText).css('color', o.inactiveColor)
.focus(function()
{
this.focused = true;
this.valBackup = $(this).val();
if (this.valBackup == this.altText || (this.valBackup == this.hoverText))
{
$(this).val('');
}
$(this).css($.extend({'color': o.activeColor}, o.activeCSS));
})
.blur(function()
{
this.focused = false;
if ($(this).val() == '')
{
$(this).val(this.altText);
}
$(this).css($.extend({'color': o.inactiveColor}, o.inactiveCSS));
})
.hover
(
function()
{
if (!o.hoverState) return;
if (($(this).val() == '' || $(this).val() == this.altText) && !this.focused)
{
this.valBackup = $(this).val();
$(this).val(this.hoverText);
}
$(this).css($.extend({'color': o.hoverColor}, o.hoverCSS));
},
function()
{
if (!o.hoverState) return;
if ($(this).val() == this.hoverText)
{
$(this).val(this.valBackup);
}
$(this).css($.extend({'color': this.focused ? o.activeColor : o.inactiveColor}, this.focused ? o.activeCSS : o.inactiveCSS));
}
);
});
};
// isEmpty test function
$.fn.isEmpty = function()
{
return ($(this).val() == '') ||
($(this).val() == $(this)[0].altText) ||
($(this).val() == $(this)[0].hoverText);
};
// global settings
$.fn.altText.settings =
{
source: 'alt',
hoverState: true,
hoverSource: 'title',
hoverCSS: { 'font-style': 'italic' },
inactiveColor: '#666',
inactiveCSS: { 'font-style': 'normal' },
activeColor: '#333',
activeCSS: { 'font-style': 'normal' },
hoverColor: '#444'
};
})(jQuery);