Onmouseover плюс изменение размера

0

Я пытаюсь навести мышку на изображение (sweden-a.gif), а затем он превращается во что-то другое (sweden-b.gif), но я хочу сделать новое изображение больше исходного изображения. Это мой код, но он не работает, может ли кто-нибудь помочь мне понять, в чем проблема? Благодарю!

<img class="gdp-cirlce" src="img/sweden-a.gif" style="position:absolute; height:93px;" onmouseover="this.src='img/sweden-b.gif' this.style='height:123px'" onmouseout="this.src='img/sweden-a.gif'">
  • 0
    Я знаю, что вы ищете решение CSS, но не могли бы вы просто увеличить изображение?
  • 0
    @Claudio Второе изображение на самом деле больше, но оно ограничено размером style="position:absolute; height:93px;"
Показать ещё 3 комментария
Теги:
onmouseover

2 ответа

0
Лучший ответ

Убедитесь, что вы ссылаетесь на библиотеку JQuery. Если он уже ссылается, попробуйте добавить вышеуказанный код к своей функции document.ready следующим образом:

$(document).ready(function(){

$('#sweden').mouseover(function() {
$(this).attr('src', 'img/sweden-a.gif'); 
$(this).css('height', '123px');
});

});
Поделиться
  • 0
    О, это работает! Большое спасибо!
  • 0
    Добавьте это: $ ('# sweden'). Mouseout (function () {$ (this) .attr ('src', 'img / sweden_old.gif'); $ (this) .css ('height', '93px ');});
Показать ещё 3 комментария
0

Вы можете использовать jquery для этого.

HTML:

<img src="..."/>

Javascript:

$('img').mouseover(function() {
    $(this).attr('src', your_src);
    $(this).css('width', your_width);
    $(this).css('height', your_height);
});

ОБНОВИТЬ:

Код

Поделиться
  • 0
    HTML: <img id="sweden"> и JavaScript: $('#sweden').mouseover(function() {$(this).attr('src', img/sweden-a.gif); $(this).css('height', 123px);}); Это как это работает? Как-то не работает для меня ...
  • 0
    Пожалуйста, посмотрите на мой обновленный код
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню