rekkette
11-13-2013, 06:18 AM
I have some javascript that I'm using to highlight my menu items.
I have included a bit of php so that I'll have an active class for when a menu item is selected (and is on the corresponding page).
Since my Javascript uses a background image and an img tag in the foreground, I would like my Javascript to permanently show only the background image when it is class="active"
Here is my HTML markup:
<a href="about.php" class="<?php echo is_current('about.php','active'); ?>">
<img class="fade" src="menu/images/menu_01.gif" width="170" height="40" style="background: url(menu/replacement/menu_01.png);" alt="falls" />
</a>
Here is my Javascript:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
(function ($) {
$.fn.cross = function (options) {
return this.each(function (i) {
var $$ = $(this);
var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
$$.wrap('<span style="position: relative;"></span>')
.parent()
.prepend('<img>')
.find(':first-child')
.attr('src', target);
if ($.browser.msie || $.browser.mozilla) {
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : this.offsetTop
});
} else if ($.browser.opera && $.browser.version < 9.5) {
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : "0"
});
} else {
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : ''
});
}
$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 250);
}, function () {
$$.stop().animate({
opacity: 1
}, 250);
});
});
};
})(jQuery);
$(window).bind('load', function () {
$('img.fade').cross();
});
</script>
I have included a bit of php so that I'll have an active class for when a menu item is selected (and is on the corresponding page).
Since my Javascript uses a background image and an img tag in the foreground, I would like my Javascript to permanently show only the background image when it is class="active"
Here is my HTML markup:
<a href="about.php" class="<?php echo is_current('about.php','active'); ?>">
<img class="fade" src="menu/images/menu_01.gif" width="170" height="40" style="background: url(menu/replacement/menu_01.png);" alt="falls" />
</a>
Here is my Javascript:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
(function ($) {
$.fn.cross = function (options) {
return this.each(function (i) {
var $$ = $(this);
var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
$$.wrap('<span style="position: relative;"></span>')
.parent()
.prepend('<img>')
.find(':first-child')
.attr('src', target);
if ($.browser.msie || $.browser.mozilla) {
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : this.offsetTop
});
} else if ($.browser.opera && $.browser.version < 9.5) {
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : "0"
});
} else {
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : ''
});
}
$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 250);
}, function () {
$$.stop().animate({
opacity: 1
}, 250);
});
});
};
})(jQuery);
$(window).bind('load', function () {
$('img.fade').cross();
});
</script>