API tools faq
paste
HTML

howard-rollover.html

HTML
Apr 6th, 2017
165
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.00 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Howard - Rollover Lab</title>
  6. <script language="JavaScript">
  7. <!--
  8. function MM_findObj(n, d) { //v4.01
  9.  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  10.    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  11.  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  12.  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  13.  if(!x && d.getElementById) x=d.getElementById(n); return x;
  14. }
  15. function MM_swapImgRestore() { //v3.0
  16.  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  17. }
  18. function MM_preloadImages() { //v3.0
  19.  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  20.    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  21.    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  22. }
  23.  
  24. function MM_swapImage() { //v3.0
  25.  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  26.   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  27. }
  28. //-->
  29. </script>
  30. <link rel="stylesheet" href="style.css" />
  31. </head>
  32.  
  33. <body onload="MM_preloadImages('img/button_1_s2.jpg','img/button_2_s2.jpg','img/button_3_r2_c2_s2.jpg')">
  34. <div id="wrapper">
  35. <header>
  36.   <h1>Fireworks Rollover Images</h1>
  37.   <nav align="center">
  38.   <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','img/button_1_s2.jpg',1)"><img src="img/button_1.jpg" alt="Home Button" width="200" height="100" id="home" /></a>
  39.   <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('abtm','','img/button_2_s2.jpg',1)"><img src="img/button_2.jpg" alt="About Me Button" width="200" height="100" id="abtm" /></a>
  40.   <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('othe','','img/button_3_r2_c2_s2.jpg',1)"><img src="img/button_3_r2_c2.jpg" alt="Other Button" width="200" height="100" id="othe" /></a><br />
  41.   <p class="spoiler">None of these links do anything...</p>
  42. </nav>
  43. </header>
  44. <main>
  45.   <h2>I Made The Rollover Images</h2>
  46.   <p>Rollover images add interactivity to a web page. Using rollver images in the naviation is common. The user will have the experience of clicking a button that links to an internal URL.</p>
  47.   <p>Adobe Fireworks is a program that designers can use to make the rollover images. We start by creating the button's various states--up and down are required. Then we export the button's html and images--Fireworks creates the HTML file needed for the webpage to display our button as a rollover image. The button's HTML file can be previewed on its own. Finally, Dreamweaver allows us to easily insert the code into the HTML file, wherever we want it. I inserted it into the NAV.</p>
  48.   <p>The navigation for this page was made using rollover images I created in Fireworks and imported to Dreamweaver. Read on to learn about my CSS.</p>
  49.   <h2>I Made the CSS, Too! Here's How</h2>
  50.   <ol>
  51.     <li>Use the CSS Styles Panel - Click the NEW CSS RULE button.</li>
  52.     <ul>
  53.         <li>In RULE DEFINITION at the bottom of thsi window, choose <strong>New Style Sheet File</strong></li>
  54.     </ul>
  55.     <li>There are a few steps to add all of the CSS to BODY, WRAPPER, HEADER, NAV, H1, H2, P and Footer
  56.       <ul>
  57.         <li>From the dropdown choose <strong>TAG to edit
  58.         Body, H1, A or P</strong> </li>
  59.       </ul>
  60.     </li>
  61.       <ul>
  62.         <ul>
  63.           <li>These are older tags and are available in the tag section list.</li>
  64.         </ul>
  65.         <li><strong>Choose ID to edit Wrapper</strong>--must be chosen from dropdown.</li>
  66.         <li><mark>To edit HTML5 elements such as MAIN, HEADER, and FOOTER:</mark></li>
  67.         <ul>
  68.           <li>Go to the Related File for your CSS.</li>
  69.           <li>Code <em><strong>blank rules</strong></em> into the .CSS file, and Save.</li>
  70.           <li>For example: footer{ } or header { }        </li>
  71.         </ul>
  72.       </ul>
  73.     <li>At any time, come back to CSS panel and choose a selector in the <strong>ALL</strong> tab of the panel.</li>
  74.     <ul>
  75.       <li>By double clicking any selector (body, nav, wrapper) you can use the CSS window to choose CSS.</li>
  76.       <li>But remember you know how to go into the CSS file to make changes, too!  </li>
  77.     </ul>
  78.   </ol>
  79. </main>
  80. <footer> <a href="http://lyman.scps.k12.fl.us" target="_blank">Home</a> | <a href="http://lyman.scps.k12.fl.us" target="_blank">Tutorials</a> | <a href="http://lyman.scps.k12.fl.us" target="_blank">About</a><br />
  81. <span id="ul">Style Guide</span>
  82. <p>Fonts: Comic Sans MS and Arial Narrow. Monochromatic grayscale; gray = #333 black = #000 white = #FFF</p>
  83. &copy; Jacob Howard 2017 <a href="mailto:@student.myscps.us">@student.myscps.us</a> </footer>
  84. </body>
  85. </html>
Advertisement
Comments
  • User was banned
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!