Changing image on button click
<p>this is my first python programming code. I am trying to change the image on click of a button. I have 2 buttons, <kbd>Start Conversation</kbd> &amp; <kbd>Stop Conversation</kbd>. </p>

<p>When the form loads there is no image. when <em>Start</em> button is clicked, ABC image will be displayed. When the <em>Stop</em> button is clicked, xyz image should be displayed. </p>

<p>The problem I am facing is, when I click Start, the corresponding image appears, but when I click Stop, the new image appears but the previous image doesn't disappear. Both the images are displayed one after other</p>

<p>My code is below</p>

<pre><code>root = Tk()
prompt = StringVar()
root.title("AVATAR")
label = Label(root, fg="dark green")
label.pack()

frame = Frame(root,background='red')
frame.pack()
</code></pre>

<h1>Function definition</h1>

<pre><code>def Image1():
  image = Image.open("C:\Python27\Agent.gif")
  photo = ImageTk.PhotoImage(image)
  canvas = Canvas(height=200,width=200)
  canvas.image = photo  # &lt;--- keep reference of your image
  canvas.create_image(0,0,anchor='nw',image=photo)
  canvas.pack()

def Image2():
  image = Image.open("C:\Python27\Hydrangeas.gif")
  photo = ImageTk.PhotoImage(image)
  canvas = Canvas(height=200,width=200)
  canvas.image = photo  # &lt;--- keep reference of your image
  canvas.create_image(0,0,anchor='nw',image=photo)
  canvas.pack()

#Invoking through button
TextWindow = Label(frame,anchor = tk.NW, justify = tk.LEFT, bg= 'white', fg   = 'blue', textvariable = prompt, width = 75, height=20)
TextWindow.pack(side = TOP)

conversationbutton = Button(frame, text='Start    Conversation',width=25,fg="green",command = Image1)
conversationbutton.pack(side = RIGHT)

stopbutton = Button(frame, text='Stop',width=25,fg="red",command = Image2)
stopbutton.pack(side = RIGHT)

root.mainloop()
</code></pre>

<p>The most important issue is that you do not clear your canvas before the new image is created. Start your (button) functions with:</p>

<pre><code>canvas.delete("all")
</code></pre>

<p>However, the same goes for your canvas; you keep creating it. Better split the creation of the canvas and setting the image:</p>

<pre><code>from Tkinter import *

root = Tk()
prompt = StringVar()
root.title("AVATAR")
label = Label(root, fg="dark green")
label.pack()

frame = Frame(root,background='red')
frame.pack()

# Function definition

# first create the canvas
canvas = Canvas(height=200,width=200)
canvas.pack()

def Image1():
    canvas.delete("all")
    image1 = PhotoImage(file = "C:\Python27\Agent.gif")
    canvas.create_image(0,0,anchor='nw',image=image1)
    canvas.image = image1

def Image2():
    canvas.delete("all")
    image1 = PhotoImage(file = "C:\Python27\Hydrangeas.gif")
    canvas.create_image(0,0,anchor='nw',image=image1)
    canvas.image = image1

#Invoking through button
TextWindow = Label(frame,anchor = NW, justify = LEFT, bg= 'white', fg   = 'blue', textvariable = prompt, width = 75, height=20)
TextWindow.pack(side = TOP)

conversationbutton = Button(frame, text='Start    Conversation',width=25,fg="green",command = Image1)
conversationbutton.pack(side = RIGHT)

stopbutton = Button(frame, text='Stop',width=25,fg="red",command = Image2)
stopbutton.pack(side = RIGHT)

root.mainloop()
</code></pre>

<p>This also prevents the somewhat strange extension of the window on button push.
To make the code fit for <code>python3</code>, replace <code>from Tkinter import*</code> by <code>from tkinter import*</code></p>

python python-2.7 tkinter