как сделать так, чтобы мой образ висел? - PullRequest
Новая
       25

как сделать так, чтобы мой образ висел?

0 голосов
/ 05 декабря 2011

Я пытаюсь сделать так, чтобы мой логотип завис при наведении курсора, и он не работает.У меня есть два изображения, загруженные на мой сервер.Вот код и ее адрес. Что не так?

http://arabic001.com

<div id='logo'>
            <a href="/index.html">
                <img src="/images/logo001H.png" style="display:none">
                <img src="/images/logo001.png"
                    onMouseOver="this.src='/images/logo001H.png'" 
                    onMouseOut="this.src='/images/logo001.png'">
            </a>
        </div>
#logo {
    position:absolute;  
    text-align:center;
    top:20px;
    right:10px;
    height:150px;
    width:150px;
    cursor:pointer;
}

Ответы [ 2 ]

1 голос
/ 05 декабря 2011

Я предлагаю вам использовать css-спрайты.

http://css -tricks.com / 158-css-sprites /

Ваш HTML-код будет выглядеть примерно так: 

<div id='logo'>
    <a href="/index.html"></a>
</div>

И код CSS: 

#logo a{ 
    text-align:center;
    top:20px;
    right:10px;
    height:150px;
    width:150px;
    cursor:pointer;

    background: url(/images/logo.png) no-repeat;
    display: block;
}
#logo a:hover{
    background-position: 0 -150px;
}

Ваше окончательное изображение будет содержать оба изображения: по умолчанию и при наведении.

1 голос
/ 05 декабря 2011

Я не эксперт по Javascript, но я бы не стал использовать Javascript для этого.

Попробуйте следующий CSS: 

a.logo { /* and add class="logo" to the a-element */
    display:block;
    width:150;
    height:105px;
    background:url(/images/logo001H.png) no-repeat;
}    
a.logo:hover {
    background:url(/images/logo001.png) no-repeat;
}

И удалите img's ...

...