{"id":89,"date":"2011-11-03T01:13:25","date_gmt":"2011-11-03T01:13:25","guid":{"rendered":"http:\/\/courses.haigarmen.com\/isma205\/?p=89"},"modified":"2011-11-03T01:13:25","modified_gmt":"2011-11-03T01:13:25","slug":"image-rollovers-with-css","status":"publish","type":"post","link":"https:\/\/courses.haigarmen.com\/isma205\/image-rollovers-with-css\/","title":{"rendered":"Image Rollovers with CSS"},"content":{"rendered":"<p>A easy way to create interactive features on a website is the simple rollover. A common device for revealing information or making links or a call-to-action more enticing and clickable, the rollover is used in a variety of ways. First we&#8217;ll be looking at how to create a simple text rollover using CSS.<\/p>\n<h3>1. The simple Text rollover<\/h3>\n<p>The first thing we&#8217;ll need to do to make some text have a rollover effect is make it a link. Contain your text within an A tag, like this:<\/p>\n<pre><a href=\"#\"> my link<\/a><\/pre>\n<p>If the element you&#8217;d like to make a rollover isn&#8217;t supposed to link to anything in particular put a # sign into the href part of your a tag. Next we&#8217;ll make a CSS style for that link:<\/p>\n<pre>\na {\n   color: #FFF;\n   background-color: #000;\n   padding: 5px;\n}\n<\/pre>\n<p>Then we&#8217;ll add a new CSS style for the hover state (when a rollover occurs).<\/p>\n<pre>\na:hover {\n   background-color: #C00;\n}\n<\/pre>\n<h3>2. Buttons from a Unordered List<\/h3>\n<p>Another common practice is to use a list as a way to structure your navigation items. Normally we use an unordered list tag to create this:<\/p>\n<pre>\n<ul>\n\t<li>\n\t\t<a href=\"#\">list item one<\/a>\n\t\t<a href=\"#\">list item two<\/a>\n\t\t<a href=\"#\">list item three<\/a>\n\t<\/li>\n<\/ul>\n<\/pre>\n<p>Now let&#8217;s add some CSS to make those act more like buttons:<\/p>\n<pre>\n\t\tul {\n\t\t\tlist-style: none;\n\t\t}\n\n\t\tli {\n\t\t\tpadding: 10px;\n\t\t\tmargin: 0px;\n\t\t\twidth: 200px;\n\t\t\theight: 20px;\n\t\t}\n\n\t\tul a {\n\t\t\tbackground-color: #C00;\n\t\t\tdisplay: block;\n\t\t}\n\n\t\tul a:hover {\n\t\t\tbackground-color: #000;\n\t\t}\n<\/pre>\n<h3>Image in Background<\/h3>\n<p>So far so good, next we&#8217;d like to replace the plain background colour with an image. I&#8217;ve prepared an image in Photoshop with some texture that combines both the &#8220;default&#8221;(non-rollover) state and the rollover state into a single image, both images adjacently placed one underneath the other. Here&#8217;s what I mean:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/courses.haigarmen.com\/isma205\/files\/2011\/11\/button-rollover-labelled.gif\" alt=\"\" width=\"200\" height=\"60\" class=\"alignnone size-full wp-image-164\" \/><\/p>\n<p>Here&#8217;s the actual image:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/courses.haigarmen.com\/isma205\/files\/2011\/11\/button-rollover.gif\" alt=\"\" width=\"200\" height=\"60\" class=\"alignnone size-full wp-image-165\" \/><\/p>\n<p>And here&#8217;s the CSS to use to bring that image into both the default and rollover states:<\/p>\n<pre>\n\t\tul #buttons {\n\t\t\tlist-style: none;\n\t\t}\n\t\tli {\n\t\t\tpadding: 10px;\n\t\t\tmargin: 0px;\n\t\t\twidth: 200px;\n\t\t\theight: 20px;\n\t\t}\n\t\t#buttons a {\n\t\t\tbackground-image: url(\"button-rollover.gif\");\n\t\t\tdisplay: block;\n\t\t}\n\t\t#buttons a:hover {\n\t\t\tbackground-position: 0 -30px;\n\t\t}\n\n<\/pre>\n<p>Here&#8217;s a ZIP file of the HTML, CSS and image files for this example.<br \/>\n<a href=\"https:\/\/courses.haigarmen.com\/isma205\/files\/2011\/11\/css-rollover.zip\">Download Example files<\/a><\/p>\n<h3>Other CSS Tutorials<\/h3>\n<p>Image Rollovers with CSS<br \/>\n<a href=\"http:\/\/www.creativepro.com\/article\/view-source-advanced-css-rollovers\">http:\/\/www.creativepro.com\/article\/view-source-advanced-css-rollovers<\/a><\/p>\n<p>Speckyboy<br \/>\n<a href=\"http:\/\/speckyboy.com\/2009\/05\/27\/22-css-button-styling-tutorials-and-techniques\/\">http:\/\/speckyboy.com\/2009\/05\/27\/22-css-button-styling-tutorials-and-techniques\/<\/a><\/p>\n<p>Smashing Magazine:<br \/>\n<a href=\"http:\/\/coding.smashingmagazine.com\/2010\/02\/18\/50-css-and-javascript-techniques-for-layouts-forms-and-visual-effects\/\">http:\/\/coding.smashingmagazine.com\/2010\/02\/18\/50-css-and-javascript-techniques-for-layouts-forms-and-visual-effects\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A easy way to create interactive features on a website is the simple rollover. A common device for revealing information or making links or a call-to-action more enticing and clickable, the rollover is used in a variety of ways. First we&#8217;ll be looking at how to create a simple text rollover using CSS. 1. The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-89","post","type-post","status-publish","format-standard","hentry","category-exercises"],"_links":{"self":[{"href":"https:\/\/courses.haigarmen.com\/isma205\/wp-json\/wp\/v2\/posts\/89","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/courses.haigarmen.com\/isma205\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.haigarmen.com\/isma205\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.haigarmen.com\/isma205\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.haigarmen.com\/isma205\/wp-json\/wp\/v2\/comments?post=89"}],"version-history":[{"count":0,"href":"https:\/\/courses.haigarmen.com\/isma205\/wp-json\/wp\/v2\/posts\/89\/revisions"}],"wp:attachment":[{"href":"https:\/\/courses.haigarmen.com\/isma205\/wp-json\/wp\/v2\/media?parent=89"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.haigarmen.com\/isma205\/wp-json\/wp\/v2\/categories?post=89"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.haigarmen.com\/isma205\/wp-json\/wp\/v2\/tags?post=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}