Jquery: Change banner when hover over text and icon

Webbo_1980
Webbo_1980 used Ask the Experts™
on
Hi,
I'm looking to use JQuery where I change a banner upon hovering over some text and an icon.

There will be five different banner each with an icon and text associated with each and when the user hovers over the relevant icon and text the banner will display the related banner.

By default the banner will need to default to the first banner.

Many thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Post the code you are using now that needs to be modified for this functionality
leakim971Multitechnician
Top Expert 2014

Commented:
set a class for each element to associate it with a banner.
For example we have three banners and the class names are respectively for each : one, two three :

we use an array (hash table) of banners :


banners = new Array();
	banners["one"]="http://images.uulyrics.com/cover/d/david-banner/album-certified.jpg";
	banners["two"]="http://www.universal-playback.com/assets/images/0002/1216/bill-bixby-as-dr-david-banner-in-the-incredible-hulk.jpg";
	banners["three"]="http://data-allocine.blogomaniac.fr/mdata/8/9/2/Z20060830185424267203298/img/edward_norton.jpg";

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
three text : each text enclose by a div (or another tag) with the class :


<div class="one">I'm the text number one!</div><br />
<div class="two">I'm the text number two!</div><br />
<div class="three">I'm the text number three!</div><br />

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
three icons/images/pictures :


<img class="one" width="96" src="http://www1.istockphoto.com/file_thumbview_approve/4565081/2/istockphoto_4565081_number_one.jpg" /><br />
<img class="two" width="96" src="http://l.nmimg.net/images/number_two.jpg" /><br />
<img class="three" width="96" src="http://farm1.static.flickr.com/107/279583606_01243e2d4f.jpg" /><br />

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
for each banner we use the class as argument of the hash table (our array of banners links) and we set it as source of the banner picture :


$("#banner").attr("src", banners[$(this).attr("class")]);

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
We use the hove function to capture the event when mouse is over the texts or icons : http://api.jquery.com/hover/
We may use multi selector : http://api.jquery.com/multiple-selector/ 
$(".one,.two,.three").hover(function() {

Open in new window

Multitechnician
Top Expert 2014
Commented:
Test page :


<html>
<head>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	banners = new Array();
	banners["one"]="http://images.uulyrics.com/cover/d/david-banner/album-certified.jpg";
	banners["two"]="http://www.universal-playback.com/assets/images/0002/1216/bill-bixby-as-dr-david-banner-in-the-incredible-hulk.jpg";
	banners["three"]="http://data-allocine.blogomaniac.fr/mdata/8/9/2/Z20060830185424267203298/img/edward_norton.jpg";
	$(document).ready(function() {
		$(".one,.two,.three").hover(function() {
			$("#banner").attr("src", banners[$(this).attr("class")]);
		});
		$("#banner").attr("src",banners["one"]);
	});
</script>
</head>
<body>
<div class="one">I'm the text number one!</div><br />
<div class="two">I'm the text number two!</div><br />
<div class="three">I'm the text number three!</div><br />
<img class="one" width="96" src="http://www1.istockphoto.com/file_thumbview_approve/4565081/2/istockphoto_4565081_number_one.jpg" /><br />
<img class="two" width="96" src="http://l.nmimg.net/images/number_two.jpg" /><br />
<img class="three" width="96" src="http://farm1.static.flickr.com/107/279583606_01243e2d4f.jpg" /><br />
<br />
<h1>BANNER :</h1>
<img id="banner" width="480" />
</body>
</html>

Open in new window

Author

Commented:
Excellent. Many thanks for help!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial