измените href attrb при создании образа с помощью jquery или javascript

Question

я хочу перейти к этому изображению, используя jquery или javascript, а затем при наведении курсора на изображение изменить hrf attrb на другое изображение src

это код:

<a href="Sign-Up.aspx" ><img alt="Login" src="images/login3.png" style="width: 173px; margin-top: 0px; z-index:10;" /></a>

Answer 1

Во-первых, давайте дадим себе способ идентифицировать эту комбинацию привязки / изображения из всего, что есть на вашей странице:

<a class="button" href="Sign-Up.aspx" ><img alt="Login"
  src="images/login3.png"
  style="width: 173px; margin-top: 0px; z-index:10;" /></a>

Затем давайте напишем несколько jQuery для обмена изображениями:

$('a.button img').mouseover(
    function() { $(this).attr('src', 'images/login3_hover.png'); }
);
$('a.button img').mouseout(
    function() { $(this).attr('src', 'images/login3.png'); }
);

Второй бит, гарантирующий, что мы вернемся в исходное состояние, когда не зависаем.

Однако вам на самом деле не нужен Javascript для этого;вместо этого вы можете сделать это, используя только CSS и HTML.Для этого вам необходимо отделить текст и изображение от ссылки.Что-то вроде следующего HTML:

<a class='button' href="Sign-Up.aspx"><b>Login</b></a>

с некоторыми CSS:

a.button {
    width: 173px;
    height: 73px; // or whatever your image height is
    position: relative;
    background-image: url("images/login3.png");
    background-position: top left;
    background-repeat: no-repeat;
    display: block;
}

a.button:hover {
    background-image: url("images/login3_hover.png");
}
a.button b {
    position: absolute;
    left: -9999px;
}

(я пропустил правила margin-top и z-index, поскольку они предположительно зависят отдругие вещи, происходящие на вашей странице.)

То, что мы делаем там, - это прикрепление изображения к якору в качестве фонового изображения CSS, а затем его изменение, когда мы наводим курсор на этот якорь.Текст (который ранее был в атрибуте alt для изображения) затем обрабатывается таким образом, чтобы он не отображался (но все еще доступен для поисковых систем и инструментов доступности).

Проблема все еще существуетоба эти решения, тем не менее, потому что images/login3_hover.png изображение не будет загружено до того, как вы наведите курсор, поэтому вы получите краткую вспышку любого цвета фона позади якоря во время загрузки.Чтобы решить эту проблему, вам нужно использовать CSS-спрайтов , основанный на методике background-image, описанной выше.

Answer 2

Добавьте идентификатор к вашему тегу изображения, E.G id = "image", затем добавьте этот javascript

<script type="text/javascript">
$(function(){
    $('#image').hover(function(){
        $(this).attr('src', 'images/new_image.png');
    });
});