How to get a hover/mouseover effect to stay selected?

Question

Hi! I'm very much a beginner when it comes to Javascript and would appreciate any help you can give! I'm creating a feature box on my home page where three headlines will share one picture spot. I've found a script that changes the image when the headlines are rolled over, but it's hard to tell when the page opens that the first headline goes with the first picture. How do I get my hover style to appear already selected, and then stay with the last headline that was rolled over, so it's apparent what headline goes with the photo showing? Here's my example

Here's the code I'm using:

HOVER STYLE:

a.feature:hover {
    font-size: 0.9em;
    font-family: "trebuchet ms", Arial, Helvetica, sans-serif;
    color: #b0171f;
    font-weight: bold;
    background-image: url(../zimgart/nav/bgfeature.jpg);
    background-repeat: no-repeat;
    text-decoration: none;
    padding: 5px 0 5px 10px;
    display:block;
}

JAVASCRIPT:

<script>

/*Rollover effect on different image script-
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/

function changeimage(towhat,url){
    if (document.images){
        document.images.targetimage.src=towhat.src
        gotolink=url
    }
}
function warp(){
    window.location=gotolink
}
</script>

<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
    for (i=0;i<preloadimages.arguments.length;i++){
        myimages[i]=new Image()
        myimages[i].src=preloadimages.arguments[i]
    }
}


preloadimages("photos/feature1.jpg",
              "photos/feature2.jpg",
              "photos/feature3.jpg")
</script>

Answer 1

Generally you should do such thing with JS code, simplest of course would be to use jQuery. With jQuery it would look like this:

$(document).ready(function(){
  $('A.feature').mouseover(functiond(e){
    $('A.feature').removeClass('a_hover');
    $(this).addClass('a_hover');
    $('#bigimage').attr('src',$(this).attr('rel')); // big image effect, just example
  })
});

I assume that A-links have attribute rel='bigimageulr'. To install jQuery just put in header:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;