Forums

andrewsquidge

Hi guys,

I hope one of you jQuery genius' can help me out on this. I'm trying to replicate the BBC style news items on their homepage. When you hover over a story title the accompanying image changes on the left hand side. I've created a test page using jQuery to run a function on hover that changes the background image of a div class.

This is the link: http://nawp.org.uk/bbctest.html

It works when there is only one function and one command but as soon as you insert a second (or third) it won't do anything! Ideally I'd like to tidy this up a bit by passing a variable to the function which defines the URL of the image but I wanted to get it working first!!

This is the code for a single function and command (this one works):

<script type=\"text/javascript\">

	function FeatOne(){	
		$(\".feat_img\").css(\"background-image\",\"url(images/image.jpg)\");
	};

	$(document).ready(function() {
		$(\"li.one\").hover(function() {
			FeatOne();
		});
	});

</script>

The page that is not working is the page above (http://nawp.org.uk/bbctest.html).

Any help would be very much appreciated.

Thanks in advance.
Andrew

andrewsquidge

I seem to have solved this using the mouseover attribute rather than hover. Are there any drawbacks to this approach?

Cheers

treehouse : what would you like to learn today?

Forums

jQuery background-image change on hover