|
|||||||||
|
|||||||||
| |||||||||
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
November 7th, 2000, 03:00 PM
|
|||
|
|||
|
I'm trying to create a mouseover and mouseout that changes the background color and font when I put my mouse over the Heading tag (H1).
Here are some of the elements I need to include in my code. Add an onMousevent that calls a JavaScript function called over();. Next,Add an onMouseOut event that calls a function called ()out;. Add a script section in the head of the page that includes the over()and out()functions. The over()function should set the header.style.backgroundColor equal to yellow and the header.style.color to blue. The out() function should set the header.style.backgroundColor equal to white and the header.style.color to black. Add a style that defines the background color of the header as white. Do you have any suggestion on how I would accomplish this. Thanks for you help! Here's what I have so far: <HTML> <HEAD> <TITLE>Web Builder Books Catalog</TITLE> </HEAD> <STYLE TYPE ="text/css"> <BODY {background-color: white} header1.style.backgroundcolor {color: blue; background: yellow} header.style.background {color:black; background: white} </STYLE> <H1 NAME="header" SRC="header" onMouseOver="yellow();" onMouseOut="white();"> <SCRIPT LANGUAGE="javascript"> function over() { header.src="header1" } function out() { header.src="header" </SCRIPT> <STYLE TYPE="text/css"> TABLE {background-color: yellow} H1 {color: black; font-family: sans-serif; text-align: center} HR {color: red} H2 {font-style: italic; text-align: center} TD {font-family: sans-serif; font-style: italic; font: bold} </STYLE> <BODY BGCOLOR="#FFFFFF"> <H1 ID="header">Web Builder Books Catalog</H1> <HR> </BODY> </HTML>
|
|
#2
November 7th, 2000, 03:33 PM
|
|||
|
|||
|
I'm just guessing with this one, but it appears that you never called your functions to make the changes.
<H1 Name="header" SRC="header" onMouseOver="over();" onMouseOut="out();"> Try this, Steve ------------------ Web Application Developer URL [This message has been edited by ssvr6 (edited November 07, 2000).]
|
|
#3
November 7th, 2000, 09:11 PM
|
|||
|
|||
|
That should work just fine in IE, but it will not work at all for Netscape (pre-mozilla). IE allows you to access (almost) all HTML properties of the document from script, but NS 4.x is far more restrictive. OnMouseOvers in Netscape ONLY work on hyperlinks and form elements.
To get your idea to work in Netscape you will have to simulate it. It will not work at all without a hyperlink, so if there is no text in your header, you should use a transparent gif (just stretch a 1-pixel job over the area you want) and if you have no hyperlink for it use <a href="#" OnMouseOver="your_script()" OnMouseOut="your_other_script()"><img etc... Netscape can only change background properties to <DIV> or <LAYER> elements, so you should wrap a small <DIV> (so it works with IE) layer around all of this. Then you can just tell your script to change the layer backround property of this <DIV>. This will look as if the <H1> background is changing, but it will work in NS 4+ and IE 4+.
|
|
| Viewing: Dev Shed Forums > Web Design > HTML Programming > Mouseovers |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
