Well, if I understand your code correctly, you have 4 elements (ss1, ss2, ss3, ss4) and one content holder (sc) in which you want to display custom content when hovering the ss1 to ss4 elements.
What I don't undersand from your code is the relation between your elements. Hovering ss1 displays sc2 / ss2 -> sc3 / ss3 -> sc1 / ss4 -> sc4
A quite easy approach would be to use a common class for your hover elements and loop through them, then replacing the main container's content with another DIV's content, based on your hover elements' ids.
PHP Code:
$(function() {
$(".hover-element").each(function() {
$(this).mouseover(function() {
$("#containerElement").html($("#" + $(this).attr('id') + "Content").html());
});
});
});
And your HTML would be:
PHP Code:
<div id="ss1" class="hover-element">
Element 1
</div>
<div id="ss2" class="hover-element">
Element 2
</div>
<div id="ss3" class="hover-element">
Element 3
</div>
<div id="ss4" class="hover-element">
Element 4
</div>
<div id="ss1Content" style="display:none;">
The HTML Content of Element 1
</div>
<div id="ss2Content" style="display:none;">
The HTML Content of Element 2
</div>
<div id="ss3Content" style="display:none;">
The HTML Content of Element 3
</div>
<div id="ss4Content" style="display:none;">
The HTML Content of Element 4
</div>
<div id="containerElement">
Nothing here yet
</div>
Note the dot notation ".hover-element" instead of "#elementId" to identify a CSS class rather than an element's ID.
Do you get the point? Of course, there are other ways to do that, with less HTML, having each element's content in a javascript array for example. This is quick and dirty but illustrates how you can loop through a range of HTML elements and interact with others, and simplify your javascript code by the use of
.each() and
$(this).