{"id":2910,"date":"2017-06-16T04:20:39","date_gmt":"2017-06-16T09:20:39","guid":{"rendered":"http:\/\/www.ragesw.com\/blog\/?p=2910"},"modified":"2018-04-10T02:12:31","modified_gmt":"2018-04-10T07:12:31","slug":"creating-mouse-over-effects-in-everweb","status":"publish","type":"post","link":"https:\/\/www.ragesw.com\/blog\/2017\/06\/16\/creating-mouse-over-effects-in-everweb\/","title":{"rendered":"Creating Mouse Over Effects in EverWeb"},"content":{"rendered":"

\"Creating<\/p>\n

 <\/p>\n

Using a mouse or other form of pointing device such as a stylus, trackpad or\u00a0even a finger, \u00a0is a given\u00a0for any computer, tablet or phone user\u00a0when navigating the its\u00a0OS, \u00a0apps 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\u00a0remember\u00a0to take into account the devices you\u00a0are going to be interacting with and use the most appropriate effect.<\/p>\n

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.\u00a0The most common example of a mouse over effect is hyperlinked text such as ‘this will take you to the EverWeb website<\/a>‘.<\/p>\n

 <\/p>\n

Text Effects Using\u00a0Hyperlinking<\/h2>\n

The best known mouse over effect is the\u00a0hyperlinked text effect. These are created in EverWeb<\/a> using the Hyperlinks Inspector:<\/p>\n

 <\/p>\n

    \n
  1. First select the text you want to hyperlink<\/li>\n
  2. Go to the Hyperlinks Inspector in the Inspector Window and tick the ‘Enable as Hyperlink’ box<\/li>\n
  3. Use ‘Link To’ dropdown to choose to link to a page in your website, an external page, a file or to an email\u00a0message<\/li>\n
  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.<\/li>\n
  5. The section below ‘Behaviour’ displays options appropriate to what you have selected for ‘Link To’. Fill in the required information as appropriate.<\/li>\n
  6. The ‘Hyperlink Formatting’ section is where you select mouseover effects by\u00a0setting the following properties:<\/li>\n<\/ol>\n

    Normal<\/em>: How text looks before you mouseover it. You can change the color using the color swatch. Click the ‘U<\/span>\u00a0‘ button to toggle the text underline on and off.<\/p>\n

    Rollover:<\/em>\u00a0Sets how the hyperlinked text looks when the mouseover it. This is sometimes\u00a0referred to as ‘Rollover’ or ‘Hover Over’.<\/p>\n

    Visited:<\/em>\u00a0Sets 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.<\/p>\n

     <\/p>\n

    Hyperlink Formatting options can also be used on EverWeb\u2019s built in Navigation Menu widget as the widget uses hyperlinks to take you different pages in your website.<\/p>\n

    When hyperlinking text, try to make the text itself unique e.g. if you hyperlink\u00a0the 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<\/em> instead of using generic ‘click here’ text.<\/p>\n

     <\/p>\n

    Setting Default Hyperlink Styles<\/h2>\n

    You can set the default color and under line style for Normal, Rollover and Visited \u00a0hyperlink states by clicking on the ‘Default Styles’ button in the\u00a0Hyperlinks\u00a0Inspector, or from the Format-> Default Styles… menu option.\u00a0Changes to any of the Default Styles only apply to anything created after you have updated the default.<\/p>\n

     <\/p>\n

    Mouse Over Effects Using Shapes<\/h2>\n

    As well as text, you can use mouseover effects for objects such as shapes or images. \u00a0Shape objects are often used as Call To Action objects e.g.\u00a0as a button to press. Images can be used in a variety of different and innovative ways as we show\u00a0later on.<\/p>\n

      \n
    1. To start, add a shape from the Toolbar to your page e.g. an\u00a0arrow shape which, in this case, changes color when \u00a0moused over, and is\u00a0hyperlinked when clicked on to\u00a0go\u00a0to another page on my website.<\/li>\n
    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.<\/li>\n
    3. To setup the change of color on mouseover, change the ‘Fill’ type from ‘Normal’ to ‘Mouse Over’.<\/li>\n
    4. Next select ‘Color Fill’ from the drop down menu.<\/li>\n
    5. Use the color swatch to change the color for the mouseover.<\/li>\n
    6. When finished, use the \u2018Preview\u2019 button in the Toolbar to test that the mouseover works properly.<\/li>\n
    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.<\/li>\n<\/ol>\n

       <\/p>\n

      Mouse Over Effects Using Images<\/h2>\n

      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 \u00a0when my visitor mouses over the Eiffel Tower. The information is a piece of text that has been converted in to an image file.<\/p>\n

        \n
      1. Start by adding an image to your\u00a0page if you have not done so already, in my example, a map of Paris.<\/li>\n
      2. Next create a Text Box but delete its contents so that it is just an empty box.<\/li>\n
      3. Place the Text Box over the Eiffel Tower and size it appropriately.<\/li>\n
      4. With the Text Box still selected, go to the Shape Options tab in the Inspector Window.<\/li>\n
      5. Select the Fill Type as\u00a0\u2018Mouse Over\u2019.<\/li>\n
      6. For the effect to work, the\u00a0image file used contains\u00a0the text I want. This file was prepared beforehand using a graphics editing program.<\/li>\n
      7. Add the image file using the ‘Image Fill’ option from the drop down menu.<\/li>\n
      8. Finally make sure that the\u00a0image is always on top by using use the Arrange-> Always On Top menu option or the ‘Always On Top’ checkbox in the Metrics Inspector.<\/li>\n
      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.<\/li>\n
      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.<\/li>\n<\/ol>\n

         <\/p>\n

        In the\u00a0last example, you can use social media buttons to create ‘Call To Actions’ when they are moused\u00a0over. For example, you could invert the regular Facebook\u00a0logo from white text on a blue background, to blue text on a white background when hovered over. To do this:<\/p>\n

          \n
        1. First obtain the Facebook logo from Facebook’s\u00a0own brand resource<\/a> website.<\/li>\n
        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.<\/li>\n
        3. Now go to your page in to EverWeb.<\/li>\n
        4. For the ‘Normal’ Fill, select ‘Image Fill’ from the drop down and select the original Facebook logo file.<\/li>\n
        5. For the ‘Mouse Over’ Fill again use ‘Image Fill’ from the drop down, this time selecting the inverted Facebook logo file.<\/li>\n
        6. Use Preview to test that the mouseover works correctly.<\/li>\n
        7. To finish, hyperlink the Facebook logo\u00a0to your Facebook page using the Hyperlinks Inspector.<\/li>\n<\/ol>\n

           <\/p>\n

          Mouse over effects give you a variety of methods to bring to attention to ‘Call To Actions’ regardless of the pointing devices \u00a0used or the\u00a0environment your website is being used in.<\/p>\n

           <\/p>\n

          Watch the\u00a0Video!<\/h2>\n

          For a walkthrough of a some of the\u00a0mouse over effects shown above, why not check out our YouTube video, Using Mouse Over Effects in EverWeb<\/a>.<\/p>\n

           <\/p>\n

           <\/p>\n

          EverWeb on Social Media<\/h2>\n

          You can also find EverWeb\u00a0on\u00a0the following social media platforms:<\/p>\n

          Facebook<\/a><\/p>\n

          Google+<\/a><\/p>\n

          Flipboard<\/a><\/p>\n

          YouTube<\/a><\/p>\n

          Twitter handle @ragesw<\/p>\n

          <\/p>\n","protected":false},"excerpt":{"rendered":"

            Using a mouse or other form of pointing device such as a stylus, trackpad or\u00a0even a finger, \u00a0is a given\u00a0for any computer, tablet or phone user\u00a0when navigating the its\u00a0OS, \u00a0apps 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, […]<\/p>\n","protected":false},"author":844,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[247,252,2],"tags":[368,371,369,370],"class_list":["post-2910","post","type-post","status-publish","format-standard","hentry","category-everweb","category-everweb-software","category-software","tag-mouseover","tag-normal-everweb","tag-rollover","tag-visited"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/2910","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/users\/844"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/comments?post=2910"}],"version-history":[{"count":15,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/2910\/revisions"}],"predecessor-version":[{"id":3556,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/2910\/revisions\/3556"}],"wp:attachment":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/media?parent=2910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/categories?post=2910"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/tags?post=2910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}