Mac SEO Blog

Using a mouse or other form of pointing device such as a stylus, trackpad or even a finger,  is a given for any computer, tablet or phone user when navigating the its OS,  apps or website browser. Each method of ‘pointing and clicking’ has its own context e.g. you can hover a mouse over text, or a shape, and see it’s color change, but you cannot use the same hover over effect if you are using a finger on a mobile phone. This blog describes ‘mouseover’ effects but refers to any kind of pointing device. When using ‘mouseover’ effects in your own website remember to take into account the devices you are going to be interacting with and use the most appropriate effect.

The effects shown are ‘Call To Actions’ where you want to bring attention to something on screen that you want your website visitor to follow. The most common example of a mouse over effect is hyperlinked text such as ‘this will take you to the EverWeb website‘.

Text Effects Using Hyperlinking

The best known mouse over effect is the hyperlinked text effect. These are created in EverWeb using the Hyperlinks Inspector:

1. First select the text you want to hyperlink
2. Go to the Hyperlinks Inspector in the Inspector Window and tick the ‘Enable as Hyperlink’ box
3. Use ‘Link To’ dropdown to choose to link to a page in your website, an external page, a file or to an email message
4. Use ‘Behavior’ dropdown list to choose if you want to open the link in a new browser window, as a popup window or as default which will replace the current page contents with the linked page contents.
5. The section below ‘Behaviour’ displays options appropriate to what you have selected for ‘Link To’. Fill in the required information as appropriate.
6. The ‘Hyperlink Formatting’ section is where you select mouseover effects by setting the following properties:

Normal: How text looks before you mouseover it. You can change the color using the color swatch. Click the ‘U ‘ button to toggle the text underline on and off.

Rollover: Sets how the hyperlinked text looks when the mouseover it. This is sometimes referred to as ‘Rollover’ or ‘Hover Over’.

Visited: Sets how the hyperlinked text looks after it has been clicked on. This can differ from ‘Normal’ if it is important to let the visitor know that they have clicked the hyperlink before.

Hyperlink Formatting options can also be used on EverWeb’s built in Navigation Menu widget as the widget uses hyperlinks to take you different pages in your website.

When hyperlinking text, try to make the text itself unique e.g. if you hyperlink the words ‘click here’, in SEO terms it will never be found because everybody uses ‘click here’ as hyperlinked text! Try where possible to describe what the hyperlink is instead of using generic ‘click here’ text.

Setting Default Hyperlink Styles

You can set the default color and under line style for Normal, Rollover and Visited  hyperlink states by clicking on the ‘Default Styles’ button in the Hyperlinks Inspector, or from the Format-> Default Styles… menu option. Changes to any of the Default Styles only apply to anything created after you have updated the default.

Mouse Over Effects Using Shapes

As well as text, you can use mouseover effects for objects such as shapes or images.  Shape objects are often used as Call To Action objects e.g. as a button to press. Images can be used in a variety of different and innovative ways as we show later on.

1. To start, add a shape from the Toolbar to your page e.g. an arrow shape which, in this case, changes color when  moused over, and is hyperlinked when clicked on to go to another page on my website.
2. With the arrow shape selected, go to the Shape Options tab in the Inspector Window. By default, the ‘Fill’ type is set to ‘Normal’ with the color set to blue.
3. To setup the change of color on mouseover, change the ‘Fill’ type from ‘Normal’ to ‘Mouse Over’.
4. Next select ‘Color Fill’ from the drop down menu.
5. Use the color swatch to change the color for the mouseover.
6. When finished, use the ‘Preview’ button in the Toolbar to test that the mouseover works properly.
7. Finally, hyperlink the arrow using the Hyperlinks Inspector as described earlier in the blog. Note, however, that as this is a shape object, the Hyperlinks Formatting options will not work as they only apply to text.

Mouse Over Effects Using Images

Mouse over effects are also great for adding ‘discovery areas’ to images. In the following example, I have a map of Paris which I want to overlay some information on top of  when my visitor mouses over the Eiffel Tower. The information is a piece of text that has been converted in to an image file.

1. Start by adding an image to your page if you have not done so already, in my example, a map of Paris.
2. Next create a Text Box but delete its contents so that it is just an empty box.
3. Place the Text Box over the Eiffel Tower and size it appropriately.
4. With the Text Box still selected, go to the Shape Options tab in the Inspector Window.
5. Select the Fill Type as ‘Mouse Over’.
6. For the effect to work, the image file used contains the text I want. This file was prepared beforehand using a graphics editing program.
7. Add the image file using the ‘Image Fill’ option from the drop down menu.
8. Finally make sure that the image is always on top by using use the Arrange-> Always On Top menu option or the ‘Always On Top’ checkbox in the Metrics Inspector.
9. As the ‘Normal’ Fill Type is an empty box you will not see anything in the Editor Window except for the Text Box outline.
10. When you Preview the page, mouse over the area of the image that contains the empty Text Box and you will see the mouse over image containing the text appearing.

In the last example, you can use social media buttons to create ‘Call To Actions’ when they are moused over. For example, you could invert the regular Facebook logo from white text on a blue background, to blue text on a white background when hovered over. To do this:

1. First obtain the Facebook logo from Facebook’s own brand resource website.
2. Once you have the original white text on blue background logo, take this into a graphics editor and invert the image. Save the inverted image as a new file name but with the same settings as the original file.
3. Now go to your page in to EverWeb.
4. For the ‘Normal’ Fill, select ‘Image Fill’ from the drop down and select the original Facebook logo file.
5. For the ‘Mouse Over’ Fill again use ‘Image Fill’ from the drop down, this time selecting the inverted Facebook logo file.
6. Use Preview to test that the mouseover works correctly.
7. To finish, hyperlink the Facebook logo to your Facebook page using the Hyperlinks Inspector.

Mouse over effects give you a variety of methods to bring to attention to ‘Call To Actions’ regardless of the pointing devices  used or the environment your website is being used in.

Watch the Video!

For a walkthrough of a some of the mouse over effects shown above, why not check out our YouTube video, Using Mouse Over Effects in EverWeb.

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw