Webbo_1980
asked on
Jquery: Change banner when hover over text and icon
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
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
Randy Poole
Post the code you are using now that needs to be modified for this functionality
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 :
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";
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 />
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 />
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")]);
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/
We may use multi selector : http://api.jquery.com/multiple-selector/
$(".one,.two,.three").hover(function() {
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Excellent. Many thanks for help!