Edit Question - KnowledgeHub

Title Body

I'm wondering if its possible to make the following code more concise: $('#americasTrigger').hover( function () { $('#americasImg').fadeIn() }, function(){ $('#americasImg').fadeOut() } ); $('#europeTrigger').hover( function () { $('#europeImg').fadeIn(); }, function(){ $('#europeImg').fadeOut(); } ); $('#middleEastTrigger').hover( function () { $('#middleEastImg').fadeIn(); }, function(){ $('#middleEastImg').fadeOut(); } ); //More etc The country name stays the same for each, with 'Trigger' or 'Img' added to the end. There's a lot of repetition here which indicates to me I'm not going about the this best way. I had thoughts around: Crearting a case scenario, or Somehow getting the selector being used for a selection, making it a string, splitting it's name to capture the country in use and applying that to the nested fadeIn/Out function with 'Img' on the end. Is this possible or am I being too fancy? Edit 1: Thanks verymuch for all the responses, apologies for not posting the html, i've put this bellow. In short I'm using image maps over a bg image (of earth) as the hover triggers for fading in/out my absolutely positioned on-hover images. <div class="mapTub"> <img src="images/transparentPixel.png" class="mapCover" usemap="#worldMap" width="524px" height="273px"/> <map name="worldMap" id="worldMap"> <area id="americasTrigger" shape="poly" coords="1,2,3" href="#americas" /> <area id="europeTrigger" shape="poly" coords="4,5,6" href="#europe" /> <area id="middleEastTrigger" shape="poly" coords="7,8,9" href="#middleEast" /> </map> <img src="images/International_americas_dark.png" class="americas" id="americasImg" /> <img src="images/International_europe_dark.png" class="europe" id="euro

Tags (comma-separated) Cancel