How to Create a Simple Text to Photo Mouseover

By Tim B

 

OK...Here Goes.

First, you need to make the piece of text or paragraph into a graphic.

 

In X2, create your piece of text or paragraph in a text box. Highlight the text box then right click and convert to curves. (I find the result is better than convert to picture).

 

When you have done this go to File....export as picture...name it something you will remember and save it to a location you will remember. The resolution should be 96 but I think this is the default, and compression 5 which again is default.

 

IMPORTANT...

Make sure the small check box "Selected objects" at the bottom of the box is ticked.

 

You can also do as above with Artistic Text. This eliminates the need to convert to curves, then "export as picture" exactly the same as above.

Make sure you know where the picture you want to appear on mouseover is, and its name.

 

Now you have the two graphics.

 

Next step..... in WP X2, on the left hand panel, go to the Navigation tool (it’s about the ninth tool up from the bottom). Click the small arrow to the right of it and a fly out element will appear. Click the one that says “Insert Pop up Rollover”. A rollover graphic box will appear...

 

In the box that says “Normal”, browse to the piece of text that you made into a graphic. Click OK. You will see that the graphic now appears in the line that says “Normal” (It might also appear in the line below as well but just ignore that).

 

Now, in the box that says “Over”, browse to the graphic that you want to appear on mouseover. Click OK. That graphic will now appear in the box “Over”.

Make sure the box “Embed image files in site” is checked. This is just in case you move the two graphics to another location on your computer; if you move them and don’t embed them, X2 won’t find them!....

 

Now, at the bottom of the dialog box you will see “Set Rollover position”. Click it.

 

In the bottom left hand corner you will see where it says “No Selection” .....

 

Click the arrow and alter it to “Normal selection”. You will see the Green image on the small page in the box.  This is where that image will appear on the page, this will be your text, move it to where you want it to appear on the page. The simple way of doing it is to left click it and move it with your mouse.

 

Next, alter “Normal selection to “Over selection”. You will see the blue image on the screen, this is where the image that will appear on mouseover will appear.

Alter its position to where you want it to appear as above. Next click OK, and OK again on the “Rollover Graphic Box”. You will now see the text on your page (you can move it around the page like you would with normal image) this will alter the position of the text as required ....but not the position of the POP UP (over selection graphic), that is set as described above.

 

Now, preview the page and see if it works. Experiment with a few different images and page positions .Just shout if you have a problem.

 

Tim B
 

Serif Forum link - text to photo mouseover

Tim’s WP X2 file