Using events to display popup information for a specific item
HTML allows to create interactive web-pages by using JavaScript events. HTML can process events from keyboard and mouse, and also some specific events, for example, occurring where form's data was changed. Many objects in Quick 'n Easy Web Builder have built-in support for event handlers like forms, buttons, text fields, images, shapes and others. For more details about the available type of events please consult the help or manual of Quick 'n Easy Web Builder.
In this tutorial we'll explain how to display popup information for an image. Note that the same instructions can be used for events in other objects.
Step 1
Insert the image object for which you want to display a popup.
HTML allows to create interactive web-pages by using JavaScript events. HTML can process events from keyboard and mouse, and also some specific events, for example, occurring where form's data was changed. Many objects in Quick 'n Easy Web Builder have built-in support for event handlers like forms, buttons, text fields, images, shapes and others. For more details about the available type of events please consult the help or manual of Quick 'n Easy Web Builder.
In this tutorial we'll explain how to display popup information for an image. Note that the same instructions can be used for events in other objects.
Step 1
Insert the image object for which you want to display a popup.
Step 6
Open the Object Manager (Menu->View->Object Manager). In the Object Manager you will see a list of all objects in the current page. Find the Shape object 'Shape2' and right click the name to display the context menu. Select 'Hide object' and the object will now no longer be visible in the work space.
Do the same for the text object.
Open the Object Manager (Menu->View->Object Manager). In the Object Manager you will see a list of all objects in the current page. Find the Shape object 'Shape2' and right click the name to display the context menu. Select 'Hide object' and the object will now no longer be visible in the work space.
Do the same for the text object.
Step 7
In the properties of image click the 'Events' button and insert an Event (click the Add button):
Event: onmouseover
Action: Show
Target: Shape2
also add an 'onmouseover' event to display the text.
In the properties of image click the 'Events' button and insert an Event (click the Add button):
Event: onmouseover
Action: Show
Target: Shape2
also add an 'onmouseover' event to display the text.
Tip:
This same method can also be used to display (and hide) images, layers or any other objects!
Related tutorial:
Using events to create a roll over image
This same method can also be used to display (and hide) images, layers or any other objects!
Related tutorial:
Using events to create a roll over image
Step 5
Move the shape and text to the position where you want to display the talk bubble later when the users moves the mouse cursor over the image.
Move the shape and text to the position where you want to display the talk bubble later when the users moves the mouse cursor over the image.
Step 4
Take note of the ID property of the shape and text.
In this example the ID is of the talk bubble is 'Shape2' and the text 'Text1'.
Take note of the ID property of the shape and text.
In this example the ID is of the talk bubble is 'Shape2' and the text 'Text1'.
Step 3
Insert a 'Text' object, type some text and move it on top of talk bubble shape.
Insert a 'Text' object, type some text and move it on top of talk bubble shape.
Step 2
Insert a shape. In the Shape's properties select: Talk Bubble 1 (or any other shape).
Insert a shape. In the Shape's properties select: Talk Bubble 1 (or any other shape).
Step 8
Now if the user moves the mouse away from the image we want to hide the shape and text again, so let's add another event:
Event: onmouseout
Action: Hide
Target: Shape2
also add an 'onmouseout' event to hide the text.
Now if the user moves the mouse away from the image we want to hide the shape and text again, so let's add another event:
Event: onmouseout
Action: Hide
Target: Shape2
also add an 'onmouseout' event to hide the text.
