lawer85,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
img{
height: 200px
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var button = $("#hocusPocus"), img = $("#topHat")[0], n = 1;
button.click(function() {
n ^= 1;
button[0].value = n ? "Hocus Pocus!" : "Get back in that hat!";
img.src = n ? "http://www.maxi-gif.com/gif-anime/objets/objets-magies-00003.gif" : "http://img.saraivaconteudo.com.br/Clipart/Photo/138/34521_.jpg";
});
});
</script>
</head>
<body> <h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="http://www.maxi-gif.com/gif-anime/objets/objets-magies-00003.gif" id="topHat"/>
<br /><br />
<input type="button" value="Hocus Pocus!" id="hocusPocus" />
</p>
</form>
</body>
</html>