jquery text navigation

[turpentyne]

Hi...

Getting used to jquery, and I'm only on a basic level with javascript.

I'm taking over somebody else's code, and trying to change some navigation to be text instead of images so it's easier to edit. But it seems a little more complicated than it should be? I can't just delete the image and put in text. Nothing appears? Right now it's doing an image switch for the rollover. I just want to do a simple CSS change on mouseover.

Here's what it looks like right now:

The html (and css, if needed to look at):

<div id="navigation">
			<ul class="navigation">
				<li class="nav-history"><img src="images/nav_01.gif"/></li>
				<li class="nav-neighbourhood"><img src="images/nav_04.gif"/></li>			
				<li class="nav-team"><img src="images/nav_05.gif"/></li>
			</ul>
		</div>

#navigation{
	position:absolute;
	width:974px;
	height:24px;
	left:0px;
	top:4px;
	opacity:0;
	display:none;
}

#navigation ul{
	font-size: 0;
	display:inline-block;
	list-style-type: none;
	border:0px;
	padding:0px;
	margin:0px;
}

#navigation ul li{
	cursor:pointer;
	display:inline-block;
	border-collapse:collapse;
	border-left:0px;
	border-right:0px;
	border-spacing:0px;
	list-style-type: none;
	padding:0px;
	margin:0px;
}

Here's the snippet of Jquery I'm trying to change to deal with text, not images

$('.nav-history').click(function(){
		$("#slider-container").stop().animate({left: '0'}, 1000, "easeOutQuint");
		
		$('.nav-history img').attr('src', 'images/nav_01.gif');
		$('.nav-neighbourhood img').attr('src', 'images/nav_04.gif');
		$('.nav-team img').attr('src', 'images/nav_05.gif');

	});

[harbingerOTV]

#navigation ul{
	font-size: 0;

Looks like it could be your culprit.

And you are adding a link right?, eg:

<ul class="navigation">
<li class="nav-history"><a href="">LINK TEXT</a></li>
...

Once you remove the image it self, the jQuery will have nothing to target:

$('.nav-history img').attr('src', 'images/nav_01.gif');

[aliravan]

thanks