21
Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

Embed Size (px)

Citation preview

Page 1: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

Serif Part 2

Adding text popups to pictures

Adding a rollover image

Adding a popup rollover

Adding a Voki

Page 2: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

How to add a text box thatshows when you put your

mouse over it

Page 3: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

Right click on the picture Choose – Export Options

Page 4: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

…then choose ALT and TITLE and add your words in the TITLE box

Page 5: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

Add a rollover imageA picture that changes when you put your mouse over it

Page 6: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki
Page 7: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

You can then choose the normal image..and the Over image

Click Ok

Then preview your website inInternet Explorer

Page 8: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

How to add a popup picture

Page 9: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki
Page 10: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

Choose the original picture

Choose the picture that it changes to

You can add a caption here

You need to set what position the popup picture will appear. Click here

Page 11: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

Set where the popup picture will be

Page 12: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

Test your popup picture by previewing the site

Page 13: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

Adding a VOKI (you will need to use an email address)

Page 14: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

Create your Voki by clicking on Customize Your Character.When you are done, record some words, then Publish

Page 15: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

Give your Voki a name

Page 16: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

You now need to Publish your Voki so you can use it on your webpage.

Click on ‘Publish your Voki’

Page 17: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

For your 1st Voki you WON’T need to register with an email addressJust click on the X

Page 18: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

On the next screen click on Copy. This will copy the web address of the Voki you have just created

Page 19: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

Now you need to add the link you just copied.

In Serif Web Plus choose Insert – Web Object – HTML

Then draw out where your Voki will go

Page 20: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

The last thing is to click on ‘Paste to Body’

Page 21: Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki

To see your Voki working, Preview your website in Internet Explorer