This is now solved. I simplified the code.
My problem now is that whenever I hover over all list items (shown below ul.menu) then hover over again, upon inspection style="display:none;" is not being removed after I come back to mouseover again.
Current Html:
<ul class="menu">
<li class="menu-mlid-187" id="ElDorado"><a title="El Dorado" href="/el-dorado">El Dorado</a></li>
<li class="menu-mlid-202" id="TheGrand"><a title="The Grand" href="/grand">The Grand</a></li>
</ul>
The images that need to change when each menu item is moused over:
<div id="bannerContainer">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<span class="field-content">
<a href="/el-dorado" class="imagefield imagefield-nodelink imagefield-field_image">
<img class="imagefield imagefield-field_image equal" width="636" height="420" alt="" title="El Dorado" src="http://localhost:8888/sites/default/files/eldoradobanner.jpg" />
</a>
</span>
</div>
</div>
<div class="views-row views-row-2 views-row-even views-row-last">
<span class="field-content">
<a href="/grand" class="imagefield imagefield-nodelink imagefield-field_image">
<img class="imagefield imagefield-field_image equal" width="636" height="420" alt="" title="The Grand" src="http://localhost:8888/sites/default/files/grandbanner.jpg" />
</a>
</span>
</div>
</div>
<!-- default image -->
<div id="upload">
<img width="636" height="561" title='venues' src="http://localhost:8888/sites/default/files/venues_banner.jpg" alt="" class="imagefield imagefield-field_image">
</div>
</div>
Updated Jquery
// Dynamic mouse over menu item to display image utilizing titles
$('#content .menu-block-3 ul.menu a').mouseover( function(){
$("#bannerContainer #upload").fadeOut('fast');
var sharedtitle = $(this).attr("title");
$('#bannerContainer img[title = "'+sharedtitle+'" ]').fadeIn('fast');
});
$('#content .menu-block-3 ul.menu a').mouseout( function(){
$("#bannerContainer #upload").fadeIn('fast');
var sharedtitle = $(this).attr("title");
$('#bannerContainer img[title = "'+sharedtitle+'" ]').fadeOut('fast');
});
CSS:
/****** Venues Rollover navigation menu ******/
.view-ImageRollover {
float:left;
position:relative;
top: 0;
}
.view-ImageRollover .view-content { /* outer container */
position: relative;
}
.view-ImageRollover .field-content img { /* inner container */
display: block!Important;
float: left;
margin: 0;
padding: 0;
position: absolute;
top: 0px;
}
/* default image */
#upload {
float: left;
z-index: 5;
position: absolute;
}
#upload .imagefield-field_image img{
left:0px;
position: absolute;
}
You can see dev site here: http://bit.ly/cLziea
Does anyone have an idea of what my issue is? let me know if im not clear. I tried adding display:block to the .imagefield but it gets over wridden by the jquery and won't go back to block.