Как получить эффект наведения / наведения мыши, чтобы оставаться выделенным? - PullRequest
Новая
       12

Как получить эффект наведения / наведения мыши, чтобы оставаться выделенным?

0 голосов
/ 05 октября 2009

Я очень начинающий, когда дело доходит до Javascript, и был бы признателен за любую помощь, которую вы можете оказать! Я создаю блок функций на моей домашней странице, где три заголовка будут делиться одним пятном изображения. Я нашел скрипт, который меняет изображение при наведении заголовка, но трудно сказать, когда открывается страница, что первый заголовок идет вместе с первым изображением. Как сделать так, чтобы стиль моего наведения отображался уже выбранным, а затем остаться с последним заголовком, который был перенесен, чтобы было понятно, какой заголовок идет с показом фотографии? Вот мой пример

Вот код, который я использую:

СТИЛЬ HOVER: 

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>

1 Ответ

2 голосов
/ 05 октября 2009

Как правило, вы должны делать это с кодом JS, проще всего, конечно, использовать jQuery. С jQuery это выглядело бы так: 

$(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
  })
});

Я предполагаю, что A-ссылки имеют атрибут rel = 'bigimageulr'. Для установки jQuery просто поместите в шапку: 

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