{"id":758,"date":"2013-05-03T12:38:13","date_gmt":"2013-05-03T12:38:13","guid":{"rendered":"http:\/\/javascript-tutor.net\/?p=758"},"modified":"2015-05-07T13:13:07","modified_gmt":"2015-05-07T13:13:07","slug":"creating-rollover-effects","status":"publish","type":"post","link":"https:\/\/javascript-tutor.net\/index.php\/2013\/05\/03\/creating-rollover-effects\/","title":{"rendered":"Creating Rollover Effects"},"content":{"rendered":"<p>We have learned how to create slide show in the previous lesson. In this lesson, we shall learn how to create rollover effect in JavaScript. Rollover means \u00a0a webpage changes when the user moves his or her mouse over an object on the page. It is often used in advertising.<\/p>\n<p>There are two ways to create rollover, using plain HTML or using a mixture of JavaScript \u00a0and HTML . We will demonstrate the creation of rollovers using both methods.<\/p>\n<p>Read more by viewing the new lesson below:<\/p>\n<p><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-30-creating-rollover-effects-in-javascript\/\">http:\/\/javascript-tutor.net\/index.php\/lesson-30-creating-rollover-effects-in-javascript\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We have learned how to create slide show in the previous lesson. In this lesson, we shall learn how to create rollover effect in JavaScript. Rollover means \u00a0a webpage changes when the user moves his or her mouse over an object on the page. It is often used in advertising. There are two ways to &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/2013\/05\/03\/creating-rollover-effects\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Creating Rollover Effects&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-758","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating Rollover Effects - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/javascript-tutor.net\/index.php\/2013\/05\/03\/creating-rollover-effects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Rollover Effects - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"We have learned how to create slide show in the previous lesson. In this lesson, we shall learn how to create rollover effect in JavaScript. Rollover means \u00a0a webpage changes when the user moves his or her mouse over an object on the page. It is often used in advertising. There are two ways to &hellip; Continue reading &quot;Creating Rollover Effects&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/2013\/05\/03\/creating-rollover-effects\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:published_time\" content=\"2013-05-03T12:38:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-05-07T13:13:07+00:00\" \/>\n<meta name=\"author\" content=\"Liew Voon Kiong\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Liew Voon Kiong\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/2013\/05\/03\/creating-rollover-effects\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/2013\/05\/03\/creating-rollover-effects\/\",\"name\":\"Creating Rollover Effects - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2013-05-03T12:38:13+00:00\",\"dateModified\":\"2015-05-07T13:13:07+00:00\",\"author\":{\"@id\":\"https:\/\/javascript-tutor.net\/#\/schema\/person\/63d832c3efdf443517b5f5bfd1b93df8\"},\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/2013\/05\/03\/creating-rollover-effects\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/2013\/05\/03\/creating-rollover-effects\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/2013\/05\/03\/creating-rollover-effects\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Rollover Effects\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/javascript-tutor.net\/#\/schema\/person\/63d832c3efdf443517b5f5bfd1b93df8\",\"name\":\"Liew Voon Kiong\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/javascript-tutor.net\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/413ad70576fa5f43c1d3ae3429c92579c21f536c350e6470302fa25ddd9b6a13?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/413ad70576fa5f43c1d3ae3429c92579c21f536c350e6470302fa25ddd9b6a13?s=96&d=mm&r=g\",\"caption\":\"Liew Voon Kiong\"},\"url\":\"https:\/\/javascript-tutor.net\/index.php\/author\/ajt7051jct\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating Rollover Effects - Learn JavaScript Online | Free Interactive JavaScript Tutorials","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/javascript-tutor.net\/index.php\/2013\/05\/03\/creating-rollover-effects\/","og_locale":"en_US","og_type":"article","og_title":"Creating Rollover Effects - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"We have learned how to create slide show in the previous lesson. In this lesson, we shall learn how to create rollover effect in JavaScript. Rollover means \u00a0a webpage changes when the user moves his or her mouse over an object on the page. It is often used in advertising. There are two ways to &hellip; Continue reading \"Creating Rollover Effects\"","og_url":"https:\/\/javascript-tutor.net\/index.php\/2013\/05\/03\/creating-rollover-effects\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_published_time":"2013-05-03T12:38:13+00:00","article_modified_time":"2015-05-07T13:13:07+00:00","author":"Liew Voon Kiong","twitter_misc":{"Written by":"Liew Voon Kiong"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/2013\/05\/03\/creating-rollover-effects\/","url":"https:\/\/javascript-tutor.net\/index.php\/2013\/05\/03\/creating-rollover-effects\/","name":"Creating Rollover Effects - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2013-05-03T12:38:13+00:00","dateModified":"2015-05-07T13:13:07+00:00","author":{"@id":"https:\/\/javascript-tutor.net\/#\/schema\/person\/63d832c3efdf443517b5f5bfd1b93df8"},"breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/2013\/05\/03\/creating-rollover-effects\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/2013\/05\/03\/creating-rollover-effects\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/2013\/05\/03\/creating-rollover-effects\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"Creating Rollover Effects"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/javascript-tutor.net\/#\/schema\/person\/63d832c3efdf443517b5f5bfd1b93df8","name":"Liew Voon Kiong","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/javascript-tutor.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/413ad70576fa5f43c1d3ae3429c92579c21f536c350e6470302fa25ddd9b6a13?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/413ad70576fa5f43c1d3ae3429c92579c21f536c350e6470302fa25ddd9b6a13?s=96&d=mm&r=g","caption":"Liew Voon Kiong"},"url":"https:\/\/javascript-tutor.net\/index.php\/author\/ajt7051jct\/"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/posts\/758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=758"}],"version-history":[{"count":3,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/posts\/758\/revisions"}],"predecessor-version":[{"id":760,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/posts\/758\/revisions\/760"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/categories?post=758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/tags?post=758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}