Как изменить изображение на изображении кнопки на событие mmoverover в HTML? - PullRequest
Новая
       7

Как изменить изображение на изображении кнопки на событие mmoverover в HTML?

2 голосов
/ 07 февраля 2012

У меня есть 4 кнопки с изображением. при наведении курсора мыши я должен изменить изображение (т.е. загрузить новое изображение на кнопку). Вот код. 

<div class ="submit" id="submit" >
    <input  type="image" src="dump.png" value="Dumb" class ="Dumb" id="Dumb" onclick="posting_by_user('Dumb')" />
    <input  type="image" src="informative.png" value="Informative" class ="Informative" id="Informative" onclick="posting_by_user('Informative')"/>
    <input  type="image" src="brilliant.png" value="Brilliant" class ="Brilliant" id="Brilliant" onclick="posting_by_user('Brilliant')"/>
    <input  type="image" src="cool.png" value="Cool" class ="Cool" id="Cool" onclick="posting_by_user('Cool')"/>
</div>

Здесь я загрузил dump.png, inforitative.png, brilliant.png и cool.png. при наведении курсора на каждую кнопку я должен изменить изображение.

Ответы [ 5 ]

2 голосов
/ 07 февраля 2012

Попробуйте это 

$(document).ready(function() {
$('input[type=img]')
    .mouseover(function() { 
        var src =  "mouseover.png";
        $(this).attr("src", src);
    });
2 голосов
/ 07 февраля 2012 
<input  type="image" src="dump.png" value="Dumb" class ="Dumb" id="Dumb" onclick="posting_by_user('Dumb')" onmouseover="changeImg.call(this)" />

function changeImg(){
this.setAttribute("src","newImageFileName.jpg");
}

Всегда рекомендуется отделять ваш код от html .. этот ответ будет полезен, так как он чище и хорош для отладки.

2 голосов
/ 07 февраля 2012 
<input  type="image" src="dump.png" value="Dumb" class ="Dumb" id="Dumb" 
onclick="posting_by_user('Dumb')" 
onmouseover="this.src='informative.png';" 
onmouseout="this.src='dump.png';" />
1 голос
/ 07 февраля 2012

Вы можете использовать для этого либо Javascript, либо CSS, ниже представлен подход javascript. 

window.addEventListener("load", function load (event) {
    window.removeEventListener("load", load, false);
    tieEvents();
}, false);

function tieEvents() {
    var button = document.getElementById('Dumb');

    button.addEventListener("mouseover", hovered, false);
    button.addEventListener("mouseout", unhovered, false);

    function hovered() {
        button.src = "anotherimg.png";
    }

    function unhovered() {
        button.src = "anotherimg.png";
    }
};

JSFiddle Demo

Обратите внимание, что установка событий в HTML не является хорошей практикой, лучше связать их в Javascript.

Способ CSS следующий: 

#Dumb {
    backgroud: url("dump.png");
}

#Dumb:hover {
    backgroud: url("another.png");
}

JS Fiddle Demo

0 голосов
/ 07 февраля 2012

вы можете использовать CSS

  1. правило будет отображать вид по умолчанию

  2. при наведении курсора мыши показывает другое изображение в том же размере базовый пример

    button1 {background: url (img / button1.png)}
    button1: hover {background: url (img / button1_hover.png)}

или вы можете использовать спрайт-изображение, оба водно изображение и использовать правила CSS, чтобы изменить его положение

http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites

...