\
\
> \
\
> \\
\
> \
\
> \\Welcome to Silvia’s Organic farm. I am Silvia Lucassians and I
> grow the best organic vegatables in beautiful Salinas, California. Salinas is located along the central
> California coast, south of San Francisco, and is blessed with a gentle cool climate and rich soil that
> produces the most flavorful and nutritions organic produce.\\
> I grow my food at ALBA, on certified organic land. No chemical pesticides or fertilizers are ever used.\\
> All food is harvested at the peak of freshness and sent directly to the consumer.
> \ onmouseover=“button1.src=‘button1active.jpeg’”
> onmouseout=“button1.src=‘button1inactive.jpeg’”\>
> \
\\
> \ \
>
> \
\\
> \
> \\
\
> \\
\
> \
>
> \
>
> \
Here is the css file:
> [@](#):
>
> body
> {
> font-family: Arial, Helvetica, sans-serif;
> background-color:#33aa33;
> }
>
> p
> {
> font-size:20px;
> z-index: 50;
> text-align:left;
> color:#cccc22;
> }
>
> div.picture
> {
> z-index: 70;
> position:absolute;
> left:200px;
> top:300px;
> width:2000px;
> padding:0px;
> border:0px;
> margin:0px;
> }
> div.banner
> {
> z-index: 90;
> position:fixed;
> left:0px;
> top:0px;
> width:2000px;
> padding:0px;
> border:0px;
> margin:0px;
> }
>
> div.links
> {
> z-index: 50;
> position:absolute;
> left:300px;
> width:70%;
> top:800px;
> width:520px;
> }
>
> div.topbox
> {
> background-color:#229922;
> position:absolute;
> left:100px;
> top:700px;
> width:620px;
> padding:10px;
> border:3px solid goldenrod;
> margin:0px;
> }
> }
---
Or does the code go in the .css file for the div description.
/not exactly a beginner, just with javascript and css
//worked with Radio Shack Level II Basic and a lot of other programming languages up to SQL
---
In the HTML, place inside the “div.banner” one div per menu item, each called “button.” Put the text of the links inside each div.
Then place my code in the CSS file.
It’s far from complete, it was just an example of how to use the “background” CSS option. There’d be a lot more required to make it work the way you want.
---
> [@GuanoLad](#):
>
> In the HTML, place inside the “div.banner” one div per menu item, each called “button.” Put the text of the links inside each div.
>
> Then place my code in the CSS file.
>
> It’s far from complete, it was just an example of how to use the “background” CSS option. There’d be a lot more required to make it work the way you want.
The thing is, I used to be able to do it so easily in javascript, but I am rusty and can’t make any of this stuff work.
I am all for CSS, and am trying to learn it. Perhaps you know an online tutorial that can step me through this. I am doing this site for a friend, not getting anything monetary out of it. I just want to help her promote her farming.
---
Let’s take this offsite, we can get through this via email because it would take half a day for me to go through the best way to achieve all you want.
I’ve sent you a PM.
---
Quick version…
For each “button”:
```auto
```
---
[Here’s my example](http://guanolad.com/websites/organic/) of how to use CSS and png transparency to get a rollover effect on top of another image.
There are many different, and arguably better, methods.
---
> [@ZipperJJ](#):
>
> Quick version…
>
> For each “button”:
>
> ```auto
>
>
>
> ```
This seems to work. But it doesn’t seem to be javascript. Some new part of HTML? Very simple. So far so good, but this looks like exactly what I want. If I can stick these in a \ box and put them where I want, I am gold. Thanks.
---
Stan, I’ve written a JS routine that does what you want but, over and above the CSS option, it also pre-loads the alternative images when the page loads in. Over slower connections, not preloading the images can cause a placeholder on hover for a few seconds, rather than the alternative image. PM me if you’d like me to send it.
---
> [@Stan\_Shmenge](#):
>
> This seems to work. But it doesn’t seem to be javascript. Some new part of HTML? Very simple. So far so good, but this looks like exactly what I want. If I can stick these in a \ box and put them where I want, I am gold. Thanks.
No, it’s totally Javascript. It’s super basic Javascript. The most simplest way of doing a mouseover. “When the mouse is on this object, the src value of the object is button\_over.gif. When the mouse is not on this object, the src value of the object is button.gif.”
What you really should do is make a table and put your entire header in it and be done with all of this nonsense. No divs, no transparent pngs, no weird shit…
```auto
```
The way to make that work is to take the entire header and slice it in to 6 parts - a top part, 4 buttons and the picture to the right of the button. Then put it back together with the above table coding.
If you set your body margin & padding to 0, you can set that whole table on top of a background that is the same as the background of the header, except super wide. That way your header can be static sized and your background can be chopped off by the browser screen thus eliminating the side scroll.
I’ve said too much. Hope this doesn’t confuse you more…
---
I’m glad to see that the idea that HTML tables are evil is fading away again.
---
Well, this thread is 10+ posts about building shit in CSS and me, a 15-year-veteran suggesting tables, so don’t be so quick to assume the meme has left us.
Unless this happens to go 24 hours without an argument to my post, then yes, we may claim victory.
---
> [@ZipperJJ](#):
>
> Well, this thread is 10+ posts about building shit in CSS and me, a 15-year-veteran suggesting tables, so don’t be so quick to assume the meme has left us.
>
> Unless this happens to go 24 hours without an argument to my post, then yes, we may claim victory.
Well, I got it to work with \ and some simple code, but the whole thing breaks down in IE. Works great in Firefox and Chrome, so I think your table method may be the best way for good cross browser operability. God I hate Explorer.
And I am developing on XP so I can’t even install IE9. So here’s a big fark you to Microsoft. You used to be cool. Sometime around Word 2.0 you were really hitting your stride! What happened to THAT Microsoft? The Microsoft that could make the competition a memory by coming up with such a cool product? The wreath was layed upon that grave a long time ago…
---
And here’s a link to the page in question-
www.silviasorganicfarm.com
---
Most front end web development today seems to focus around YUI or jQuery. In general, it’s easier to use a library that provides the functions you need (and either of the ones mentioned above do just that) than to roll your own.
With that said, I have been out of the web development world for a couple years, so there may be a change in approach of late. But, a pre-existing library, especially for beginners, is often a big time saver since all the cross browser issues and other crap is already handled for you.
Here is an example of a jQuery image menu: [http://www.alohatechsupport.net/examples/image-menu-1.html](http://www.alohatechsupport.net/examples/image-menu-1.html)
---
> [@Hambil](#):
>
> Most front end web development today seems to focus around YUI or jQuery.
This.
[Try this one](http://roshanbh.com.np/2008/03/image-hover-effect-jquery.html).
\
> \\\
> \
>
> \
>
> \
Here is the css file:
> [@](#):
>
> body
> {
> font-family: Arial, Helvetica, sans-serif;
> background-color:#33aa33;
> }
>
> p
> {
> font-size:20px;
> z-index: 50;
> text-align:left;
> color:#cccc22;
> }
>
> div.picture
> {
> z-index: 70;
> position:absolute;
> left:200px;
> top:300px;
> width:2000px;
> padding:0px;
> border:0px;
> margin:0px;
> }
> div.banner
> {
> z-index: 90;
> position:fixed;
> left:0px;
> top:0px;
> width:2000px;
> padding:0px;
> border:0px;
> margin:0px;
> }
>
> div.links
> {
> z-index: 50;
> position:absolute;
> left:300px;
> width:70%;
> top:800px;
> width:520px;
> }
>
> div.topbox
> {
> background-color:#229922;
> position:absolute;
> left:100px;
> top:700px;
> width:620px;
> padding:10px;
> border:3px solid goldenrod;
> margin:0px;
> }
> }
---
Or does the code go in the .css file for the div description.
/not exactly a beginner, just with javascript and css
//worked with Radio Shack Level II Basic and a lot of other programming languages up to SQL
---
In the HTML, place inside the “div.banner” one div per menu item, each called “button.” Put the text of the links inside each div.
Then place my code in the CSS file.
It’s far from complete, it was just an example of how to use the “background” CSS option. There’d be a lot more required to make it work the way you want.
---
> [@GuanoLad](#):
>
> In the HTML, place inside the “div.banner” one div per menu item, each called “button.” Put the text of the links inside each div.
>
> Then place my code in the CSS file.
>
> It’s far from complete, it was just an example of how to use the “background” CSS option. There’d be a lot more required to make it work the way you want.
The thing is, I used to be able to do it so easily in javascript, but I am rusty and can’t make any of this stuff work.
I am all for CSS, and am trying to learn it. Perhaps you know an online tutorial that can step me through this. I am doing this site for a friend, not getting anything monetary out of it. I just want to help her promote her farming.
---
Let’s take this offsite, we can get through this via email because it would take half a day for me to go through the best way to achieve all you want.
I’ve sent you a PM.
---
Quick version…
For each “button”:
```auto
```
---
[Here’s my example](http://guanolad.com/websites/organic/) of how to use CSS and png transparency to get a rollover effect on top of another image.
There are many different, and arguably better, methods.
---
> [@ZipperJJ](#):
>
> Quick version…
>
> For each “button”:
>
> ```auto
>
>
>
> ```
This seems to work. But it doesn’t seem to be javascript. Some new part of HTML? Very simple. So far so good, but this looks like exactly what I want. If I can stick these in a \ | ||||
 |
 |
 |
 |
 |