Despite my efforts, I haven't been able to find exactly what I'm looking for. My current setup involves an image/content slider powered by Awkward Showcase. Within each slide, I want to incorporate a mouse-in/mouse-out effect that switches and hides images when the user hovers over text options. The JavaScript code I have in place is as follows:
$("#news-2, #news-3, #news-4, #news-5, #news-6").hide();
$("#newsitem-1, #newsitem-2, #newsitem-3, #newsitem-4, #newsitem-5, #newsitem-6").mouseover(function(){
$(this).css('cursor', 'pointer');
if($("#newsitem").val() != $(this).attr('id').replace('newsitem', 'news')){
$("#news-1").hide();
$("#news-2").hide();
$("#news-3").hide();
$("#news-4").hide();
$("#news-5").hide();
$("#news-6").hide();
$("#newsitem").val($(this).attr('id').replace('newsitem', 'news'));
var vid = $(this).attr('id').replace('newsitem', 'news');
$("#" + vid).show();
}
});
The HTML associated with this is structured like so:
<div id="showcase" class="showcase">
<div class="showcase-slide cs-1">
<div class="showcase-content">
<div class="cs-container">
<div class="thumbs">
<div id="news-1"><a href="/link"><img src="http://placehold.it/640x360/eeeeee/cccccc" border="0"></a></div>
<div id="news-2" style="display: none;"><a href="/link"><img src="http://placehold.it/640x360/dddddd/dddddd" border="0"></a></div>
<div id="news-3" style="display: none;"><a href="/link"><img src="http://placehold.it/640x360/cccccc/aaaaaa" border="0"></a></div>
</div>
<div class="cs-links">
<h2>Link Title 1</h2>
<ul>
<li id="newsitem-1"><a href="#">Hover Change Image 1</a></li>
<li id="newsitem-2"><a href="#">Hover Change Image 2</a></li>
<li id="newsitem-3"><a href="#">Hover Change Image 3</a></li>
</ul>
</div>
</div>
</div>
<div class="showcase-thumbnail">
<div class="showcase-thumbnail-caption">Caption Title</div>
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
<div class="showcase-slide cs-2">
<div class="showcase-content">
<div class="cs-container">
<div class="thumbs">
<div id="news-4"><a href="/link"><img src="http://placehold.it/640x360/eeeeee/cccccc" border="0"></a></div>
<div id="news-5" style="display: none;"><a href="/link"><img src="http://placehold.it/640x360/dddddd/dddddd" border="0"></a></div>
<div id="news-6" style="display: none;"><a href="/link"><img src="http://placehold.it/640x360/cccccc/aaaaaa" border="0"></a></div>
</div>
<div class="cs-links">
<h2>Link Title 2</h2>
<ul>
<li id="newsitem-4"><a href="#">Hover Change Image 1</a></li>
<li id="newsitem-5"><a href="#">Hover Change Image 2</a></li>
<li id="newsitem-6"><a href="#">Hover Change Image 3</a></li>
</ul>
</div>
</div>
</div>
<div class="showcase-thumbnail">
<div class="showcase-thumbnail-caption">Restaurant TV</div>
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
</div>
I would appreciate any suggestions or advice on making this more efficient. Additionally, do you have any insights into why this setup breaks after engaging the slide function?
Edit: To explain my use of IDs, they are necessary due to the one-to-one relationship between text and associated images.
Edit 2: When I switch the order of my JavaScript code, the functionality breaks. You can view a JSFiddle with the correct order here.