Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Need onmouseover syntax within <style> tags 1

Status
Not open for further replies.
vb6novice

vb6novice

Programmer
Sep 23, 2002
288
US
I am using style sheets within the HTML such as

Code: 
</head>
<style>
.BannerText {font-family:"Times New Roman"; font-style: "italic"; font-weight:"Bold"; color:"#003300"; font-size:"18pt"; text-align:center;}
.SectionText {font-family:"Arial"; color:"#003300"; font-size:"8pt"}

</style><body>

I want to include an onmoseover and onclick event as part of the BannerText style. Is it possible to have onmouseover, onmouseout, onclick, etc. within the definition of the style so that any tags in which class="BannerText" will respond to those events? I have tried several ways using the syntax from an inline style but it isn't working. If it is possible, what is the syntax?

 
Sort by date Sort by votes
Put the STYLE tags in the HTML's HEAD tags.

Even so, I'm not sure about the answer to your question. A workaround, however, is to assign these events with the BODY tag's ONLOAD event:

<BODY ONLOAD='assignMouseovers()'>

and create the function:

Code: 
function assignMousovers()
{
 var fE = document.formName.elements;
 for(var i=0; i<fE.length; i++)
  if(fE[i].className == "BannerText")
   fE[i].onmouseover = functionNameWithoutParentheses;
}

'hope that helps. I'd interested in the exact answer to your question though. I hope someone's got one!

--Dave
 
Upvote 0 Downvote
Yes, there is one. Use the pseudoclass :hover - it doesn't work with all elements in IE though, another one of its parsing and rendering errors, you'll have to put an <a> tag around the parts you want to mouseover and assign the :hover there.

Code: 
<style>
.BannerText {
  font-family:"Times New Roman";
  font-style: "italic";
  font-weight:"Bold";
  color:"#003300";
  font-size:"18pt";
  text-align:center;
}
.BannerText:hover {
  color:"#FFFFFF";
}
</style>
</head>
<body>

I left away the selection text and did a tiny bit of formatting as well. Oh, and put the <style> into the <head> ;-)

Hope this helps

haslo@haslo.ch - www.haslo.ch​
 
Upvote 0 Downvote
Dave and Haslo,

Thanks for your input. I tried both suggestions and neither one works.

I moved the styles into the head as recommended by both, and tried the two methods one at a time. In both cases, I get nothing when the mouse is over the text.
 
Upvote 0 Downvote
vb6novice,

Can you give us a link to the site? ...or post your whole HTML page?

--Dave
 
Upvote 0 Downvote
I can't give a link to the site as I am just developing it. It is not on any web server yet. I'll provide the HTML but it is just a test page. I'm trying to figure out a way that I can have a class assigned to many table elements each respond the same way on the mouseover without having to have the onmouseover event written into the tags of every element.

Here's the page:

Code: 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>


<style>
	.BannerText {font-family:"Times New Roman"; font-style: "italic"; font-weight:"Bold"; color:"#003300"; font-size:"18pt"; text-align:center;}
	.BannerText:hover {color:"#800000";}
	.BannerHilt {font-family:"Times New Roman"; font-style: "italic"; font-weight:"Bold"; color:"#800000"; font-size:"18pt"; text-align:center; background:"#D8D8AA";}
	.SectionText {font-family:"Arial"; color:"#003300"; font-size:"8pt"}
	.SectionTitle {font-family:"Arial"; color:"#003300"; font-size:"9pt"; text-decoration:"none";}
	.homehdrtext {font-family:"Arial"; font-style: "italic"; font-weight:"Bold"; color:"#660000"; font-size:"12pt"}
	.datahdrtxt {font-family:"Arial"; font-style: "italic"; font-weight:"Bold"; color:"#003300"; font-size:"12pt"}
	.bodytext {font-family:"Arial"; color:"#000000"; font-size:"10pt"; text-align:justify;}
	.datetext {font-family:"Tahoma"; color:"#003300"; font-size:"7pt"}

</style>
</head>

<body onload="assignMouseovers()">

<SCRIPT LANGUAGE="JavaScript">
<!-- //
button1image = new Array();
button1image[0] = new Image();
button1image[0].src = "images/sys_gr_sqr.gif";
button1image[1] = new Image();
button1image[1].src = "images/red_bullet.gif";
//-->

function openindex()
      { 
OpenWindow=window.open("", "mynewwin", "height=400,width=600,toolbar=0,scrollbars=0,menubar=0,status=0,resize=0");
OpenWindow.document.write("<TITLE>New Window Title</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=#d8d8aa>")
OpenWindow.document.write("<h2>This is an example of opening a new window</h2>")
OpenWindow.document.write("This is the text that will appear in the window!")
OpenWindow.document.write("<a href='home.html'><img src='images/logo.jpg' width='500' height='267' border='0' alt=''></a>")
OpenWindow.document.write("<FORM><INPUT TYPE='BUTTON' VALUE='Close'" + "onClick='window.close()'></FORM>")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
OpenWindow.document.close()
self.name="main"
     }
	 
 function BtOver() {
document.button1.src = button1image[0].src;
}
function BtOut() {
document.button1.src = button1image[1].src;
}
function assignMouseovers()
{
 var fE = document.form1.elements;
 //alert (fE);
 for(var i=0; i<fE.length; i++)
  if(fE[i].className == "BannerText")
   fE[i].onmouseover = bannerchg;
}

function bannerchg()
{
this.className="BannerHilt";

}

</SCRIPT>
<form name="form1">
<a><p class="BannerText" onmouseover="this.className='BannerHilt'" onmouseout="this.className='BannerText'" onclick="openindex()">my banner</p></a>
<table border=3>
<a href="labchome.html" onMouseOver = "BtOver()" onMouseOut = "BtOut()" >
<tr>
<td class="submenutext">
<img src="images/sys_ylw_tgl.gif" border="0" name="button1"><p class="submneutext">&nbsp;&nbsp;&nbsp;Home</p>
</td></a>
</tr>
</table>
</form>
</body>
</html>

Thank you for the help.
 
Upvote 0 Downvote
Here you go. Heavily commented...

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Blabla</title>
    <!--
      Don't write tags CAPITALIZED, it's rather ugly
      and does not conform with XHTML
    -->
    <style>
    /*
     * You can write classes uppercase, but I don't :)
     */
    .content {
      text-align: center;
      margin-left: 100px;
      margin-right: 100px;
    }
    .bannertext {
      /*
       * Never use only one font, you don't know
       * what the user has installed
       */
      font-family: "Times New Roman", Times, serif;
      /*
       * The following attributes don't work with quotes
       */
      font-style: italic;
      font-weight: bold;
      color: #003300;
      font-size: 18pt;
    }
    .bannertext:hover {
      /*
       * You don't need to duplicate properties in the hover
       * pseudoclass that have already been set in bannertext
       */
      color:#800000;
      background:#D8D8AA;
    }
    .submenu {
      /*
       * Adjust the padding so it fits your squares and bullets
       */
      padding-left: 20px;
      /*
       * I'd suggest renaming your images, their names look
       * ugly and incomprehensive otherwise
       */
      background-image: url(images/square.gif);
    }
    .submenu:hover {
      background-image: url(images/bullet.gif);
    }
    </style>
  </head>
  <body>
    <p class="content">
      <!-- See my comment about the popup window -->
        <a href="index.html" class="bannertext" target="_blank">my banner</a>
    </p>
    <table border="3" width="100">
      <tr>
        <td>
          <!--
            labchome? Hm...
            Why is that file not simply called home.html?
          -->
          <a href="home.html" class="submenu">Home</a>
        </td>
      </tr>
    </table>
  </body>
</html>

If you take all the comments out (after you've read them and renamed some files) your stuff should work and the code looks really nice.
You can make it look even a lot nicer if you outsource the CSS - make it an own file (for example, formats.css) and use this code:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Blabla</title>
    <link rel="stylesheet" type="text/css" href="formats.css">
  </head>
  <body>
    <p class="content">
      <a href="index.html" class="bannertext" target="_blank">my banner</a>
    </p>
    <table border="3" width="100">
      <tr>
        <td>
          <a href="home.html" class="submenu">Home</a>
        </td>
      </tr>
    </table>
  </body>
</html>

...with the CSS file being...

Code: 
.content {
  text-align: center;
  margin-left: 100px;
  margin-right: 100px;
}
.bannertext {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: bold;
  color: #003300;
  font-size: 18pt;
}
.bannertext:hover {
  color:#800000;
  background:#D8D8AA;
}
.submenu {
  padding-left: 20px;
  background-image: url(images/square.gif);
}
.submenu:hover {
  background-image: url(images/bullet.gif);
}

Some Comments:

Use JavaScript only if you're absolutely positively sure it is required. And never use JavaScript so users with JS disabled (about 10%) don't see anything.

Regarding the popup: this thread shows you how to create a popup that resizes if the user has JS enabled and still pops up if he has it disabled.

All your classes: You can also set properties for tags, including the body tag. So if you use the same font everywhere, place that information in the body tag. And you don't have to repeat information, stylesheets are cascading after all. And you don't have to change a class because of a mouseover.

Hope this helps, and keep learning

haslo@haslo.ch - www.haslo.ch​
 
Upvote 0 Downvote
Now that I look at it, you can make the code even a lot nicer than that. Don't use the table, instead use a <div> with a class or an id, and use the different CSS border attributes (have a look)

haslo@haslo.ch - www.haslo.ch​
 
Upvote 0 Downvote
Haslo,

Thanks for the great tips.

Some of the tags that were capitalized were scavenged from published web pages and I just hadn't changed them. Whenever I create tags I make them lower case, but I was not aware about the XHTML limitation on uppercase.

Regarding the use of 'labchome' as the link and your question about why not just 'home', this is the first site I am developmeing for the organization whose name is abbreviated 'labc'. Until I am working on a site for some other organization I really wasn't going to be too worried about reusability of the code on that page (assuming that was your point about the name of the home page). Perhaps when I get the site running and start working on the next one and don't want to create it from scratch, 'home' will be more appropriate.

Regarding your comment about the names of the images, though they may seem ugly and incomprehensive to you, the names are easily understood by me and I use them to help me find where things in the HTML code actually show up on the page. What I sent you had an image called sys_ylw_tgl.gif, which to me is a system (sys) image (something I would use throughout the pages of the web site), it is yellow (ylw) and happens to be a triangle (tgl). This makes it easily distinguishable from a blue triangle (sys_blu_tgl) or a yellow square (sys_ylw_sqr). I realize this is a personal convention, but to me it makes a lot more sense than some of the other things I have seen when I view the code on what I would consider to be 'professional' web sites.

I understand the concept of having the styles in a css document, but have yet to be able to make my HTML page actually go out and get the styles from a CSS, which is why they were internal to the HTML document. I would love to be able to make that work because the web site I am developing has about 20 similar pages and I have to have the styles in all of them. If I change one I've got to change them all.

I will experiment with what you have sent me, and return with questions as they come up.

Thanks again.
 
Upvote 0 Downvote
I hope you were not offended by the terms "ugly and incomprehensive". And your naming scheme makes sense. However, if you look at your code in some years, either you have sticked to "tgl" for meaning "triangle" until then, or you won't remember why you called that frickin' image "tgl" ... was that "target locator"? "totally genious look"?

These examples are stupid, and I know it :) However, writing stuff out pays out over time in my experience. You could also make it like /media/common/triangles/yellow.gif - using folders is also a great way to organize your media stuff...

The labchome was just incomprehensible to me as well - since I don't know that firm shortens to labc. You could use index.html for the home page though, since that's one of the common standard default pages in web servers. But as I said, labchome makes sense here. Code reusabiliy ... well, you'll need to change those file names anyway :) most times I write new HTML, I just write the whole thing again, it's faster than if I'd try and adapt the old code, but that's just me...

By the way, outsourcing your CSS into a file of its own is really not hard. Just create a file where you put all the CSS you use into, and insert the <link rel="stylesheet" type="text/css" href="formats.css"> into the head of the page. That'll do ;-)

haslo@haslo.ch - www.haslo.ch​
 
Upvote 0 Downvote
Thank's for the further clarification. All your points are worth considering.

The style sheet is working, although slightly different than it did when internal, so that'll be a big help.

Now I'm looking for a way to have the same banner and header and all the drop down things on every page without having to have the HTML for it on every page. At this point I'm up to 500 lines of HTML before I ever get to any real content. Having to wade through Is it possible to have those 500 lines in a separate document that is called at the beginning of every page?
 
Upvote 0 Downvote
the only way is server side includes, i think
javascript's document.write() appends stuff at the end.

--Chessbot
 
Upvote 0 Downvote
Hm, what you could do (sorry for not answering earlier) is replace the innerHTML of some <div> - but that would break the principle that you should never use any vital JS again...

haslo@haslo.ch - www.haslo.ch​
 
Upvote 0 Downvote
I've got this email from you:

I've looked over my original post and discovered that my question has never really been answered. I have implemented the use of the hover in css class for my pop up menus, but the menu needs to stay visible as long as the mouse is over it or the main cell that made it appear in the first place. The main cell has a js function on its onmouseover event (MM_showHideLayers) which makes the pop up visible, and one which makes it stay visible as long as the mouse is over the submenu (MM_timelineStop). I also have a set of js functions which occurs with the onmouseout event for both the main cell and the pop up cells which makes the pop up hidden again (MM_timelineGoto - this runs a timer and calls MM_showHideLayers), and a third function which calls hides the visible popups when the mouse is not over their main cell.

I'm still trying to get the onmouseover and onmouseout event activities built into the :hover class for the pop up's cells. I just don't know how to structure the syntax. You gave me

Code: 
.submenu {
 padding-left: 20px;
 background-image: url(images/square.gif);
}
.submenu:hover {
 background-image: url(images/bullet.gif);
}

Somewhere in the .submenu:hover I'm hoping to be able to put something like:

Code: 
onmouseover="MM_showHideLayers('submenu1','','show','submenu2','','hide');MM
_timelineStop('hidemenus')"
onmouseout="this.className='submenu';MM_timelineGoto('hidemenus','1');MM_tim
elinePlay('hidemenus')">

How can this be incorporated into the submenu:hover style.

haslo@haslo.ch - www.haslo.ch​
 
Upvote 0 Downvote
Unfortunately, you can't place any JS into the CSS. They just don't match. I'd strongly advise against JS though, as you may already have noticed - especially since it's possible to do popups solely with CSS:


That means no to using the Dreamweaver behaviors on this one, but since that other way is pretty easy to implement as well, I guess that would be the way to go...

Or are there any other things you want to achieve with that onmouseover and onmouseout? Many of them would be possible with CSS as well, I guess, but some things can only be done with JS or at the server (like checking inputs in a form, or doing calculations).

haslo@haslo.ch - www.haslo.ch​
 
Upvote 0 Downvote
Thanks for the reply. I saw the meyerweb site many months ago when I first started learning HTML. It's not a good example of what I am trying to acomplish. I understand your reluctance to use JS and that's great if you can do what you want without it.

The problem I have with the meyerweb site is that everything that appears on rollover always appears in the same place, plus it's either an image or just some text, not a menu or list which must have its own functionality.

I thank you for your time and input.
 
Upvote 0 Downvote
I have my girlfriend over this evening, so I haven't time to really look into it. There must be a solution though, and it now also caught my interest :)

haslo@haslo.ch - www.haslo.ch​
 
Upvote 0 Downvote
I figured out something that seems to me to work reasonably well, although it is not the complete solution. I am using a combination of css for the hover event and some js for what happens to the various submenus and subsubmenus with mouse movement.

It requires a little more coding than I would like but it functions like I want. If you have any other suggestions, I'll be glad to consider them.

I would like to learn how to have the dubmenu divs positioned relative to the cell that fires their appearing. Posts on that subject either leave out something or are intended for a pop up (i.e. a new window) rather than a menu that needs to look like it is hanging off a header bar or off another menu option.

Thanks again.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

LyndonOHRC
  • Locked
  • Question
Need advice with printing on check stock
Replies
5
Views
291
LyndonOHRC
LyndonOHRC
Krus1972
  • Locked
  • Question
Centering Content Within a Fixed Navigation Menu
Replies
10
Views
296
ChrisHirst
ChrisHirst
dvannoy
  • Locked
  • Question
Center a div within an asp.net content placeholder 1
Replies
1
Views
486
vacunita
vacunita
geneg28
  • Locked
  • Question
NEED HELP WITH CREATING LINKS
Replies
6
Views
249
geneg28
geneg28
audiopro
  • Locked
  • Question
Staying Within the Rules 2
Replies
12
Views
219
audiopro
audiopro

Part and Inventory Search

Sponsor

Back
Top