{"id":733,"date":"2013-05-03T00:49:23","date_gmt":"2013-05-03T00:49:23","guid":{"rendered":"http:\/\/javascript-tutor.net\/?page_id=733"},"modified":"2017-11-16T23:12:34","modified_gmt":"2017-11-16T23:12:34","slug":"lesson-30-creating-rollover-effects-in-javascript","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-30-creating-rollover-effects-in-javascript\/","title":{"rendered":"JavaScript Lesson 30: Creating the Rollover Effect"},"content":{"rendered":"<h3 style=\"text-align: center;\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-29-creating-slideshow-in-javascript\/\">&lt;Previous Lesson&gt;<\/a>\u00a0<a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Table of Contents]<\/a>\u00a0<a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-lesson-31-creating-graphics-using-javascript\/\">&lt;Next Lesson&gt;<\/a><\/strong><\/h3>\n<div id=\"mycontent\">\n<div class=\"column1\">\n<p>In this lesson, we shall learn how to create the rollover effect in JavaScript. Rollover means a 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 create rollover, using plain HTML or using a mixture of JavaScript and HTML. We will demonstrate the creation of rollovers using both methods.<\/p>\n<\/div>\n<div class=\"column2\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<!-- Javascript Responsive Ads --><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block;\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"9005101105\" data-ad-format=\"rectangle\"><\/ins><br \/>\n<script>\n(adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/div>\n<\/div>\n<h3><strong>30.1 Creating Rollovers using HTML<\/strong><\/h3>\n<p>The keyword that is used to create rollover is the &lt;onmousover&gt; event. For example, we want to create a rollover text that appears in a text area. \u00a0The \u00a0text \u00a0<em>&#8220;What is rollover?&#8221;<\/em> appears when the user place his or her mouse over the text area \u00a0and the rollover text changes to <em>&#8220;Rollover means \u00a0a webpage changes when the user moves his or her mouse over an object on the page&#8221;<\/em> when the user moves his or her mouse away from the text area. The HTML script is shown in Example 30.1<\/p>\n<div class=\"codebg\">\n<h4><strong>Example 30.1<\/strong><\/h4>\n<p>&lt;HTML&gt;<br \/>\n&lt;head&gt;&lt;\/head&gt;<br \/>\n&lt;Body&gt;<br \/>\n&lt;textarea rows=&#8221;2&#8243; cols=&#8221;50&#8243; name=&#8221;rollovertext&#8221; onmouseover=&#8221;this.value=&#8217;What is rollover?'&#8221;<br \/>\nonmouseout=&#8221;this.value=&#8217;Rollover means a webpage changes when the user moves his or her\u00a0mouse over an object on the page'&#8221;&gt;&lt;\/textarea&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/p>\n<\/div>\n<p>View the <a href=\"http:\/\/javascript-tutor.net\/java_tutor\/image\/rollover_eg1.html\">Example 30.1<\/a> in action<\/p>\n<p>In example 30.2, we create a rollover effect that can change the color of its text using the style attribute.<\/p>\n<div class=\"codebg\">\n<h4><strong>Example 30.2<\/strong><\/h4>\n<p>&lt;p<br \/>\nonmouseover=&#8221;this.style.color=&#8217;red'&#8221;<br \/>\nonmouseout=&#8221;this.style.color=&#8217;blue'&#8221;&gt;<br \/>\nMove the mouse over this text to change its color to red. Move the mouse away to<br \/>\nchange the text color to blue.<br \/>\n&lt;\/p&gt;<\/p>\n<\/div>\n<p>View<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/image\/rollover_eg2.html\"> example 30.2<\/a> in action<\/p>\n<h4><strong>Example 30.3<\/strong><\/h4>\n<p>This example shows how to create rollover effect that involves text and images. When the user places his or her mouse pointer over a book title, the corresponding book image appears.<\/p>\n<div class=\"codebg\">&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;Rollover Effect&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;table&gt;<br \/>\n&lt;tbody&gt;<br \/>\n&lt;tr valign=&#8221;top&#8221;&gt;<br \/>\n&lt;td width=&#8221;50&#8243;&gt;<br \/>\n&lt;a&gt;&lt;img src=&#8221;vb2010book.jpg&#8221; name=&#8221;book&#8221;&gt;&lt;\/a&gt;<br \/>\n&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;img height=&#8221;1&#8243; width=&#8221;10&#8243;&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;a onmouseover=&#8221;document.book.src=&#8217;vb2010book.jpg'&#8221;&gt;&lt;b&gt;Visual Basic 2010 Made Easy&lt;\/b&gt;&lt;\/a&gt;<br \/>\n&lt;br&gt;<br \/>\n&lt;a onmouseover=&#8221;document.book.src=&#8217;vb2008book.jpg'&#8221;&gt;&lt;b&gt;Visual Basic 2008 Made Easy&lt;\/b&gt;&lt;\/a&gt;<br \/>\n&lt;br&gt;<br \/>\n&lt;a onmouseover=&#8221;document.book.src=&#8217;vb6book.jpg'&#8221;&gt;&lt;b&gt;Visual Basic 6 Made Easy&lt;\/b&gt;&lt;\/a&gt;<br \/>\n&lt;br&gt;<br \/>\n&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;\/tbody&gt;<br \/>\n&lt;\/table&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/div>\n<p>View <a href=\"http:\/\/javascript-tutor.net\/java_tutor\/image\/rollover.htm\">Example 30.3<\/a> in action<\/p>\n<h3><strong>30.2 Creating Rollovers Using JavaScript<\/strong><\/h3>\n<p>Though HTML can be used to create rollovers , it can only performs simple actions. If you wish to create more powerful rollovers, you need to use JavaScript. To create rollovers in JavaScript, we need to create a JavaScript function.<\/p>\n<p>Example 30.4 is similar to Example 30.3 but we have added some JavaScript code. In this example, we have create an array <em>MyBooks<\/em> to store the images of three book covers. Next, we create a <em>ShowCover(book)<\/em> to display the book cover images on the page. Finally, we call the <em>ShowCover<\/em> function using the <em>onmouseover<\/em> event.<\/p>\n<div class=\"codebg\">&lt;!DOCTYPE html PUBLIC &#8220;-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN&#8221;&gt;<br \/>\n&lt;html xmlns=&#8221;http:\/\/www.w3.org\/1999\/xhtml&#8221;&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;script language=&#8221;Javascript&#8221;&gt;<br \/>\nMyBooks=new Array(&#8216;vb2010book.jpg&#8217;,&#8217;vb2008book.jpg&#8217;,&#8217;vb6book.jpg&#8217;)<br \/>\nbook=0<br \/>\nfunction ShowCover(book){document.DisplayBook.src=MyBooks[book]<br \/>\n}&lt;\/script&gt;&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;P align=&#8221;center&#8221;&gt;&lt;img src=&#8221;vb2010book.jpg&#8221; name=&#8221;DisplayBook&#8221;\/&gt;&lt;p&gt;<br \/>\n&lt;center&gt;<br \/>\n&lt;table border=0&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td align=center&gt;&lt;a onmouseover=&#8221;ShowCover(0)&#8221;&gt;&lt;b&gt;Visual Basic 2010 Made Easy&lt;\/b&gt;&lt;\/a&gt;&lt;br&gt;<br \/>\n&lt;a onmouseover=&#8221;ShowCover(1)&#8221;&gt;&lt;b&gt;Visual Basic 2008 Made Easy&lt;\/b&gt;&lt;\/a&gt;&lt;br&gt;<br \/>\n&lt;a onmouseover=&#8221;ShowCover(2)&#8221;&gt;&lt;b&gt;Visual Basic 6 Made Easy&lt;\/b&gt;&lt;\/a&gt;&lt;br&gt;<br \/>\n&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;\/table&gt;<br \/>\n&lt;\/body&gt;<em id=\"__mceDel\"><br \/>\n<\/em>&lt;\/html&gt;<\/div>\n<p>View<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/image\/rollover_eg3.htm\"> Example 30.4<\/a> in action.<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<!-- Javascript Responsive Ads --><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block;\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"9005101105\" data-ad-format=\"auto\"><\/ins><br \/>\n<script>\n(adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h3 style=\"text-align: center;\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-29-creating-slideshow-in-javascript\/\">&lt;Previous Lesson&gt;<\/a>\u00a0<a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Table of Contents]<\/a>\u00a0<\/strong><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-lesson-31-creating-graphics-using-javascript\/\">&lt;Next Lesson&gt;<\/a><\/strong><\/h3>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Previous Lesson&gt;\u00a0[Table of Contents]\u00a0&lt;Next Lesson&gt; In this lesson, we shall learn how to create the rollover effect in JavaScript. Rollover means a 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 create rollover, using plain HTML or using &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-30-creating-rollover-effects-in-javascript\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 30: Creating the Rollover Effect&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-733","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Lesson 30: Creating the Rollover Effect - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"This javascript lesson illustrates the creation of rollover effects\" \/>\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\/lesson-30-creating-rollover-effects-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 30: Creating the Rollover Effect - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"This javascript lesson illustrates the creation of rollover effects\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/lesson-30-creating-rollover-effects-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-16T23:12:34+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-30-creating-rollover-effects-in-javascript\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-30-creating-rollover-effects-in-javascript\/\",\"name\":\"JavaScript Lesson 30: Creating the Rollover Effect - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2013-05-03T00:49:23+00:00\",\"dateModified\":\"2017-11-16T23:12:34+00:00\",\"description\":\"This javascript lesson illustrates the creation of rollover effects\",\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-30-creating-rollover-effects-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/lesson-30-creating-rollover-effects-in-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-30-creating-rollover-effects-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 30: Creating the Rollover Effect\"}]},{\"@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\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Lesson 30: Creating the Rollover Effect - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"This javascript lesson illustrates the creation of rollover effects","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\/lesson-30-creating-rollover-effects-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 30: Creating the Rollover Effect - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"This javascript lesson illustrates the creation of rollover effects","og_url":"https:\/\/javascript-tutor.net\/index.php\/lesson-30-creating-rollover-effects-in-javascript\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-16T23:12:34+00:00","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-30-creating-rollover-effects-in-javascript\/","url":"https:\/\/javascript-tutor.net\/index.php\/lesson-30-creating-rollover-effects-in-javascript\/","name":"JavaScript Lesson 30: Creating the Rollover Effect - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2013-05-03T00:49:23+00:00","dateModified":"2017-11-16T23:12:34+00:00","description":"This javascript lesson illustrates the creation of rollover effects","breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-30-creating-rollover-effects-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/lesson-30-creating-rollover-effects-in-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-30-creating-rollover-effects-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 30: Creating the Rollover Effect"}]},{"@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"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"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=733"}],"version-history":[{"count":37,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/733\/revisions"}],"predecessor-version":[{"id":2508,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/733\/revisions\/2508"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}