Okay, I'm working on my school website, and I have this page called rainforest.html that has a dark background. So, I put the title and textarea in two DIVs. The background color is transparent at first, but I have these onMouseOver and onMouseOut events (JavaScript) in the divs (this is an example):
So, what this does is it blocks out the background. But the problem is, I tried it in Netscape Communicator at my school (we have Netscape Communicator and Internet Explorer), and it does not work in Netscape! Why is this happening?
The page has not been updated yet; I just made this change on the date of 4/1/03. If you want to see how it is currently, visit "http://b-bp.k12.ny.us/jwy%20web%20pages/rainforest.html (click here). Originally, I had done the stupidest of all things (not on the actual website, though): I had made a single image of a white block that blocks out the background when the user mouses over. The problem was, it was an image separate from the div, and each web browser (even the same ones!) placed the image differently on the page! (However, it showed up on both browsers at least.) And then it hit me, today (4/1/03), that I should change the style of the div and ditch the white image.
Does anyone know how to solve my problem? I'll give you an update once the page has been uploaded.
Never the less, it had errors it it, and I fixed them for you.
That's impossible!! How could a web browser NOT support css??
I didn't say it didn't support CSS, I said it doesn't support the "style" property. NS 4 was the first dynamic browser with CSS support. It supports a subset of the CSS1 specification. NS 4 predates this specification. Also, there are many proprietary methods and objects that are not in that specification.
NS 4 also does not automatically assign mouse events to every object. Infact, if the object is not positioned, you can only use script on things like images and forms.
Sometimes it is easy, and then sometimes you have to stand on your head. For example, give this a try:
Code:
<a href="#"
style="position:relative"
id="a1"
onclick="return false"
onmouseover="if(document.layers){document.a1.bgColor='lightgrey'}else{this.style.backgroundColor='lightgrey'}"
onmouseout="if(document.layers){document.a1.bgColor=window.document.bgColor}else{this.style.backgroundColor=''}">This will change if you mouse over it</a>
Originally posted by gil davis NS 4 was the first dynamic browser with CSS support. It supports a subset of the CSS1 specification. NS 4 predates this specification. Also, there are many proprietary methods and objects that are not in that specification.
NS 4 also does not automatically assign mouse events to every object. Infact, if the object is not positioned, you can only use script on things like images and forms.
I didn't quite know what you mean, but right now I am in my school. Here is the source code for the rainforest page I tried updating.
<P style="text-indent: 50; line-height: 150%;"><FONT SIZE="+2">Starting
right befo<!--SELECTION--><!--/SELECTION-->re February vacation,
the Ecology Club will be having another rainforest T-shirt sale.
Come and pick up an application from Mr. Muller in room 219. You
can buy cool t-shirts with animals from a wide selection in a
catalogue, and sell them to other people.</FONT></P>
<P style="text-indent: 50; line-height: 150%"><FONT SIZE="+2">Please
help our rainforest! Every t-shirt you buy will help us to adopt
more acres of rainforest (1 acre for every 10 t-shirts). The rainforest
needs all the help it can get. Once you have obtained a form and
a catalogue, please sell t-shirts to all the people you can! Each
t-shirt costs $13.50. I would assume that we should still have
"rewards" (Mr. Muller's baby cries, teachers and members
dressing up as popular figures, etc.). If you don't have an order
form, you're in luck because I scanned a copy of the form and
posted it on this site on a PDF (Portable Document File) file.
(You will need <A HREF="http://www.adobe.com/products/acrobat/readstep.html"
onMouseOver="window.status='Click here to download a free version of Adobe
Acrobat Reader.'" onMouseOut="out_message()">Adobe Acrobat Reader</A>
to view this file.) For information, you can visit the <A HREF="http://www.earthfound.com/"
onMouseOver="window.status='Click here to
visit the Earth Foundation Website.'" onMouseOut="out_message()">Earth
Foundation website</A>. Unfortunately, neither I nor this site
can provide you with a catalogue.</FONT></P>
<P style="text-indent: 50; line-height: 150%"><FONT SIZE="+2">I
regret to say that this was planned at the last minute.
We apologize for the short notice, but Mr. Muller will be handing
out forms and catalogues on Friday, February 14, right before
vacation. If you didn't get one, you can receive them when we
return from vacation, and you can print an <A HREF="T-Shirt%20Order%20Form.PDF">order
form</A> (not a catalogue) using the PDF file.</FONT></P>
<P style="text-indent: 50; line-height: 150%"><FONT SIZE="+2">We
are also in the process of planning sales for the Spring and for
Earth Day.</FONT></P>
<P style="text-indent: 50; line-height: 150%"><FONT SIZE="+2">Thank
you for your support in saving the rainforest. Happy selling!</FONT></P>
<P style="text-indent: 0"><CENTER><A HREF="http://www.b-bp.k12.ny.us/jwy%20web%20pages/Ecology.html"
TITLE="Ecology Club page" onMouseOver="window.status='Click here to visit the
Ecology Club webpage.'" onMouseOut="out_message()" onMouseOut="window.status='Come support the Earth Foundation!'"><FONT
SIZE="+1">Ecology Club page</FONT></A></CENTER></P>
<P style="text-indent: 0"><CENTER><A HREF="JWY%20home%20page.html"
TITLE="Home Page" onMouseOver="window.status='Click here to go to our home
page.'" onMouseOut="out_message()"><FONT SIZE="+1">Home</FONT></A></CENTER></P>
1.) You do not need to give things a name and an id.
2.) You need to assign a style of "position: absolute" for NS 4 to allow script access to a div. That causes you to place things in specific locations in your page.
3.) You have to "stand on your head" to get NS 4 to do mouse events on a div.
4.) NS 4 does not support a background called "transparent".
5.) You should not use a reserved word ("title") for a name or id (there is already a thing called document.title in JavaScript).
Originally posted by gil davis 1.) You do not need to give things a name and an id.
Okay, no prob.
2.) You need to assign a style of "position: absolute" for NS 4 to allow script access to a div. That causes you to place things in specific locations in your page.
But I want the div to be positioned as "text on the page" (I think this is the position:relative style attribute); I would rather not position it absolutely on the page because the browser can move it around to wherever it wants to, and each browser does it differently. That's what made me ditch the white block image and use the "background" style property instead.
3.) You have to "stand on your head" to get NS 4 to do mouse events on a div.
OK, but what action do I acually have to take other that this?
4.) NS 4 does not support a background called "transparent".
Why not, and how do I work around that? There has to be a style property value for "background" that Netscape supports.
5.) You should not use a reserved word ("title") for a name or id (there is already a thing called document.title in JavaScript).
Very good point.
OK, so please either tell me the corrections or send me a source file I need to work around these problems (2, 3, and 4) so that my page will work correctly.
P.S. I am sending you this from my school again, and I have just checked our version of Netscape (which we never really use): Communicator 4.7.
P.S.S. Just a side question: My teacher just informed me that, because rainforestbg.jpg is a JPEG file, it is not showing up on the internet. But, when I preview it from the webpage making program, it shows up (I preview it in the actual Internet Explorer browser). She says it needs to be a gif image. If this is not caused by the browser itself, then is it caused by the server we use?
Originally posted by MarkE But I want the div to be positioned as "text on the page" (I think this is the position:relative style attribute); I would rather not position it absolutely on the page because the browser can move it around to wherever it wants to, and each browser does it differently. That's what made me ditch the white block image and use the "background" style property instead.
Hey, I didn't write the browser, I just know the rules. You cannot have any mouse over/out on a DIV unless it is "position: absolute". And then you still have to "stand on your head".
OK, but what action do I acually have to take other that this?
My only possible answer would include "position: absolute", so there is no answer.
Why not, and how do I work around that? There has to be a style property value for "background" that Netscape supports.
I don't understand why you cannot get this concept. It is called bgColor, and it is a direct property of an object. Like
Code:
document.layers["myLayer"].bgColor = green;
OK, so please either tell me the corrections or send me a source file I need to work around these problems (2, 3, and 4) so that my page will work correctly.
Your request is not within the realm of possibilities for NS 4.
My teacher just informed me that, because rainforestbg.jpg is a JPEG file, it is not showing up on the internet. But, when I preview it from the webpage making program, it shows up (I preview it in the actual Internet Explorer browser). She says it needs to be a gif image. If this is not caused by the browser itself, then is it caused by the server we use?
Apparently. Unless you don't have the file in the right directory. I would tend to believe your teacher.
If you really want to learn about things that you can do with NS 4 (probably a BWOT), try this link:
Ok, I see that Netscape 4.7 does not support the background style property. So what direct property (bgColor) property do I use? Would it be 'div bgColor=""'?
And you said that it does not support mouseover events for divs... unless they are positioned absolutely. Got it. If this still doesn't work, I will need to use drastic measures: I will actually have to put the mouseover event in a JavaScript like this:
document.getElementByTagName('div')[0].onmouseover=this.bgColor= // and then I'd have whatever bgColor value I need.
Whoops, that's right, Netscape doesn't support getElementById or getElementByTagName.
Ugh, now I will have to give the div a name so that I can identify it correctly (e.g. "textareadiv"):
document.textareadiv.onmouseover=this.bgColor= // and the value for a transparent background.
Even this may not work!
Netscape sure is a pain in the neck!
So the style background property for a transparent background is "transparent", but what is the direct bgColor property value (not in the style attribute) for a transparent background?
Here is a short example of how you can flow an absolute DIV with the document. The problem becomes establishing the width and height of the DIV. I cheated and used a table.
Code:
<center>
<table border>
<tr>
<td width=100 style="position: relative"><div id="d1" style="position: absolute">This is a DIV test
<script>
this.onmouseover = function () {this.bgColor = "lightgrey";}
this.onmouseout = function () {this.bgColor = null;}
</script></div></td>
<td>This is not</td>
<td>This is not</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</center>
what direct property (bgColor) property do I use?
Code:
document.layerName.bgColor = "whatever";
I will have to give the div a name
No, an ID.
what is the direct bgColor property value (not in the style attribute) for a transparent background?
<div id="d1" style="position: absolute">This is a DIV test
<script>
this.onmouseover = function () {this.bgColor = "lightgrey";}
this.onmouseout = function () {this.bgColor = null;}
</script></div>
WOW!!! You mean you can actually use the "this" keyword to refer to the tag that came right before the script? How would it know you're talking about the div named "d1"?
JavaScript integrated CSS
Why is this happening?
Reply With Quote
How could a web browser NOT support css?? 
You mean you can actually use the "this" keyword to refer to the tag that came right before the script? How would it know you're talking about the div named "d1"?
Bookmarks