Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Macintosh mouseover code help

    I can't figure out the code to perform this task.. I need to change the menu's text color with a mouseover on a webpage. Please read on.. The menu consists of 7 text links. Each one is a different color. The mouseover is to change the text link to orange while the other 6 menu items change to purple.

  • #2
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    Post your code so there's something to work on.

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Macintosh

    Can I attach the code doc. somehow or is it best to cut and paste the code into this area.

  • #4
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    Cut and paste, just make sure its wrapped in CODE tags. [that # symbol in post editor].

  • #5
    New Coder
    Join Date
    Mar 2009
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Me Me Me Galerie</title>
    
    <link href="css/main.css" rel="stylesheet" type="text/css">
    <meta name="keywords" content="Me Me Me, original prints, posters, Idols, book, Head In The Clouds, events, playshops.">
    		<meta name="Description" content="The official website of painter, composer Vita. This online galerie features major works throughout the years.">
    
    <script language="JavaScript" type="text/JavaScript">
    <!--  put some javascript in here -->
    <!--
    
    //-->
    
    </script>
    
    </head>
    <style>
    
    a {
    line-height: 1.2;
    }
    
    </style>
    
    <link rel="STYLESHEET" type="text/css" href="copy.css">
    </head>
    
    <body leftmargin="0" topmargin="0" bgcolor="#090009" border="0">
    
    <!--Header-->
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr> 
        <td align=center valign=top>
        <table width="800" border="0" cellspacing="3" cellpadding="2">
     
        <td width=15>&nbsp;</td>
            <tr> 
    <td align="center" class="name">me
    </td>
    </tr>
    <tr>
    <td align="center" class="nameplace">galerie me me me
    <br>
    <font color="#0A67C3">_________________________________________________________________________________
    </font>
    </td>
    </tr>
    
    <tr>
    <td align="center" valign="top">
    <a href="index.html" class="menu1"> home  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a>
    <a href="vita.html" class="menu2"> me &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a>
    <a href="galerie.html" class="menu1"> galerie  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a>
    <a href="book.html" class="menu3"> book &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a>
    <a href="prints.html" class="menu4"> prints &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a>
    <a href="events.html" class="menu2"> events  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a>
    <a href="contact.html" class="menu1"> contact </a></td>
    
    </tr>
    
    <td align="center">
    <img src="vitahome.jpg" width="400" height="513" hspace="10" border="0">
    <br>
    </td>
    </tr>
    <tr>
    <td align="center" class="copyright" nowrap>
     &#169; Me &nbsp;&nbsp; All Rights Reserved &nbsp;&nbsp; Use by permission only &nbsp;&nbsp; 
     <a href="mailto:me@megalerie.com" class="copyright">info@megalerie.com</a>
     <br>
     <br>
     </td>
     </tr>
     </table>
     </table>
     </body>
     </html>





    Code:
    body {
    	font-family: arial, helvetica, sans-serif;
    	font-size: 11px;
    	font-style: normal;
    	font-weight: normal;
    	color: #8EAEF0;
    	background-color: #090009;
    	text-decoration: none;
    }
    
    td {
    	font-family: trebuchet MS;
    	font-size: 11px;
    	font-style: normal;
    	font-weight: normal;
    	color: #8EAEF0;
    	text-decoration: none;
    }
    
    
    .name {
    	font-family: lucidia grande, arial, helvetica, sans-serif;
    	font-size: 24px;
    	font-style: normal;
    	font-weight: bold;
    	color: #F21707;
    	text-decoration: none;
    }
    
    .nameplace {
    	font-family: helvetica, sans-serif;
    	font-size: 14px;
    	font-style: normal;
    	font-weight: normal;
    	color: #AFAB9C;
    	text-decoration: none;
    }
    
    .copyright {
    	font-family: trebuchet MS;
    	font-size: 11px;
    	font-style: normal;
    	font-weight: bold;
    	color: #948F83;
    	text-decoration: none;
    	visibility:visible;
    }
    
    .copyright:a {
    	color: #948F83;
    }
    
    .regular {
    	font-family: trebuchet MS;
    	font-size: 12px;
    	font-style: normal;
    	font-weight: normal;
    	color: #000000;
    	text-decoration: none;
    }
    
    .menu1 {
    	font-family: trebuchet MS;
    	font-size: 12px;
    	font-style: normal;
    	font-weight: bold;
    	color: #9B6ED9;
    	text-decoration: none;
    }
    
    .menu2 {
    	font-family: trebuchet MS;
    	font-size: 12px;
    	font-style: normal;
    	font-weight: bold;
    	color: #8EAEF0;
    	text-decoration: none;
    }
    
    .menu3 {
    	font-family: trebuchet MS;
    	font-size: 12px;
    	font-style: normal;
    	font-weight: bold;
    	color: #F21707;
    	text-decoration: none;
    }
    
    .menu4 {
    	font-family: trebuchet MS;
    	font-size: 12px;
    	font-style: normal;
    	font-weight: bold;
    	color: #EEE003;
    	text-decoration: none;
    }
    
    .menu1:hover {
    	color: #DA1103;
    }
    
    .menu2:hover {
    	color: #DA1103;
    }
    
    .menu3:hover {
    	color: #DA1103;
    }
    
    .menu4:hover {
    	color: #DA1103;
    }
    
    .menu {
    	font-family: trebuchet MS;
    	font-size: 12px;
    	font-style: normal;
    	font-weight: bold;
    	color: #9267CD;
    	text-decoration: none;
    }
    .menu:hover {
    	color: #DA1103;
    }
    
    .gemail {
    	font-family: trebuchet MS;
    	font-size: 12px;
    	font-style: normal;
    	font-weight: normal;
    	color: #9267CD;
    }
    
    
    .contact1 {
    	font-family: trebuchet MS;
    	font-size: 12px;
    	font-style: normal;
    	font-weight: normal;
    	color: #EACB02;
    	text-decoration: none;
    }
    
    .contact2 {
    	font-family: trebuchet MS;
    	font-size: 12px;
    	font-style: normal;
    	font-weight: normal;
    	color: #9267CD;
    	text-decoration: none;
    }
    
    .book1 {
    	font-family: trebuchet MS;
    	font-size: 12px;
    	font-style: normal;
    	font-weight: bold;
    	color: #B3B1A4;
    	text-decoration: none;
    }
    
    .book2 {
    	font-family: trebuchet MS;
    	font-size: 12px;
    	font-style: normal;
    	font-weight: bold;
    	color: #E4E2D6;
    	text-decoration: none;
    }
    
    .book3 {
    	font-family: gill sans MT,trebuchet MS;
    	font-size: 12px;
    	font-style: normal;
    	font-weight: bold;
    	color: #A05AFE;
    	text-decoration: none;
    }
    
    
    a {
    	font-family: trebuchet MS, sans-serif;
    	font-size: 12px;
    	font-style: normal;
    	font-weight: bold;
    	color: #669933;
    	text-decoration: none;
    }
    a:hover {
    	color: #EB1303;
    }
    
    a {
    	text-decoration: none;
    }

  • #6
    New Coder
    Join Date
    Mar 2009
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Macintosh CSS or javascript?

    Perhaps there's a solution using CSS. Could this thread simply be shown to the CSS and HTML group? I'm still stumped. Thanks for your help.

  • #7
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    First, make some changes in your HTML [changes are in red color]:
    Code:
    <td align="center" valign="top" id="links">
    <a href="index.html" class="menu1" onmouseover="colors(this,1);" onmouseout="colors();"> home  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a>
    ...add the same onmouseover="colors(this,1);" onmouseout="colors();" for each link...
    <a href="contact.html" class="menu1" onmouseover="colors(this,1);" onmouseout="colors();"> contact </a>
    </td>
    And then, somewhere below those links in your code, for example just before end of your document:
    Code:
    <script>
    var colors_ar=['#9B6ED9','#8EAEF0','#9B6ED9','#F21707','#EEE003','#8EAEF0','#9B6ED9']
    var links_ar=document.getElementById('links').getElementsByTagName('a');
    function colors(t,s){
    	for(i=0;i<links_ar.length;i++){
    	s?links_ar[i].style.color="orange":links_ar[i].style.color=colors_ar[i];
    	}
    s?t.style.color="purple":'';
    }
    </script>
    
    </body> <!--your document ends here-->
    </html>
    As you can see, I opted for coding in color values for each link, instead of retrieving them from CSS rules [there are different ways to do it for FF and IE, and values retrieved are in different formats, I've decided it's less coding this way, and since it is menu, it is not going to change too often, so it shouldn't be hard to maintain].
    If you want to add more links, you can just add more color codes to that list:
    Code:
    var colors_ar=['#9B6ED9','#8EAEF0','#9B6ED9','#F21707','#EEE003','#8EAEF0','#9B6ED9']
    Colors on the list are following the order of your links, #9B6ED9 is the color of link no1, no3 and no7.
    If you decide to change color in your CSS later on, you need to change it on this list as well.
    One more thing, please validate your code, there are several serious errors there [like double HEAD ending, no proper DOCTYPE declaration].

  • Users who have thanked freedom_razor for this post:

    petalmax (03-22-2009)

  • #8
    New Coder
    Join Date
    Mar 2009
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    This javascript works. I was ready to give up. I never saw javascript code placed below the links in the body of the document. There must be a reason for this??? Thanks you very much, as I have learned a lot from you. The code works in AOL, Flock, Firefox, and Safari. I don't have netscape or IE to test it on.

  • #9
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    It has to be placed below document elements it refers to. Otherwise browser finds the script first, and since the rest of the document [that script refers to] is not loaded yet, throws errors.
    That's why I asked you to put it in a certain place. You can check it for yourself, put it above your links and it is not going to work.

    I test my code in IE7 and FF, so it works in IE7.

  • #10
    New Coder
    Join Date
    Mar 2009
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    One more thing, please validate your code, there are several serious errors there [like double HEAD ending, no proper DOCTYPE declaration].
    I cleaned up the double head ending and other tags w/o ending tags. I'm using BBEdit lite free software. I understand with the full version of BBEdit, I'll have many more tools including a validator.
    What is wrong with my DOCTYPE declaration?

  • #11
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    You have:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    and it should be:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    Last edited by freedom_razor; 03-25-2009 at 12:22 PM.

  • Users who have thanked freedom_razor for this post:

    petalmax (04-06-2009)

  • #12
    New Coder
    Join Date
    Mar 2009
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by freedom_razor View Post
    You have:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    and it should be:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    Thank you for the correct doctype declaration. I've often saw this as some sort of formality which I'm willing to respect, but, what's the difference here? Does this become outsourced and need updating from time to time? Would I have to update all of my web pages with this proper doctype declaration? Thank you.
    Last edited by petalmax; 04-06-2009 at 04:48 PM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •