Как изменить кнопку на изображение при нажатии?

Ниже мой существующий код. Он успешно меняет изображение на другое изображение при нажатии. Мне нужно изменить его, чтобы он начинался как кнопка, в которой говорилось «СОВЕТ»? на нем затем изменяется изображение. Я не хочу использовать изображение в качестве кнопки.Как изменить кнопку на изображение при нажатии?

<!--HINT 1--> 
<script lanuage="javascript"> 
    function handleClick1(element) { 
     element.src="http://leowestonvfx.com/wp-content/uploads/2016/02/dirty.jpg"; 
    } 
</script> 
<!--HINT 1 END--> 

<img src="http://leowestonvfx.com/wp-content/uploads/2016/02/rock-hand.png" onclick="handleClick1(this);">

Я думал, что я мог бы быть в состоянии изменить его к кнопке, как это так, но она останавливает его работы:

<input type="button" value="Hint?" onclick="handleClick1(this);">

источник

2016-02-20 leo weston

, потому что 'тип ввода =«Кнопка»' не поддерживает 'src' –

Я предлагаю начать со скрытым изображением (style="display:none"), а затем с помощью JQuery до show() изображение и hide() кнопка onclick.

вы можете использовать ID на изображении вместе с селекторами jquery, вместо того чтобы пройти this в свою функцию.

также, вы можете изменить изображение src с помощью jquery (see this question). другой вариант использует метод append для добавления html.

источник

2016-02-20 19:03:27

дополнительный совет: включать более соответствующие теги в вопросе для более соответствующего внимания (т.е. «html», «javascript» и т. д.) –

Ваш исходный код использует строку:

<img onclick="handleClick1(this);">

означает, что ваш код эффективно пытается вызвать

button.src="http://example.com/myimage.png";

Который не будет работать как атрибут Src будет работать только с элементом изображения ,

Самый простой способ получить желаемый результат - разместить элементы в контейнере, а затем управлять через CSS, должно ли оно быть видимым или нет. Что-то, как это должно решить проблему:

HTML

<div class="hint"> 
    <button type="button">Hint?</button> 
    <img src="http://example.com/my_ending_image.png"> 
</div>

JavaScript

function buttonClick(){ 
    this.parentNode.classList.add("show"); 
} 

var buttons = document.querySelectorAll(".hint button"); 
for (var x=0; x<buttons.length; x++) { 
    buttons[x].addEventListener("click", buttonClick); 
}

CSS

.hint.show button { 
    display: none; 
} 

.hint img { 
    display: none; 
} 

.hint.show img { 
    display: block; 
}

JSFiddle, показывающий функциональность, можно увидеть here

источник

2016-02-20 20:14:02 Doug

Спасибо, но я не могу заставить это работать. И я не уверен, почему код, который вы указали, содержит 2 изображения. Запуск и завершение. Я просто хочу, чтобы кнопка начиналась с того, что при щелчке превращается в изображение. –

Я неправильно понял ваш вопрос, я изменил свой ответ, надеюсь, будет больше соответствовать тому, что вы после – Doug

Спасибо за ваши ответы. Я на самом деле понял, как сделать это так:

<body onload="hideallhints()"> 


<script> 
function hideallhints() { 
    document.getElementById("artwork1").style.display = "none"; 
} 

function HINT1() { 
    document.getElementById("artwork1").style.display = "block"; 
    document.getElementById("hintbutton").style.display = "none"; 
} 
</script> 


<img id="artwork1" src="w3javascript.gif" width="100" height="132"> 
<br> 

<button type="button" id="hintbutton" onclick="HINT1()">Hint?</button> 



</body>

источник

2016-02-21 20:08:54

Как изменить кнопку на изображение при нажатии?

ответ

Смежные вопросы