Custom navigation Bar and DIV

[pacificblue03]

so i have created a custom navigation bar and with hover using css

test pasted the code onto my index page the Buttons are there but they look like this:



tested through dreamwever (f12)



if anyone thinks my directory of the images in the css is wrong i dont think it is here is the folder structure



i have uploaded my page containing the code and my css for examination

Antonio.

[Synewave]

Have you uploaded the contents of the buttons folder to your website? I've just checked and it doesn't look like it.

[pacificblue03]

no i haven't because img src is not from a website but from the buttons folder as above if i do need to put them on my site where would i?

Antonio.

[pacificblue03]

YOU are a god it worked but i have a glitch

please check my index page you will see that when you mouse over for a intermittent second the button dissapears.

Antonio.

[mcrossley]

I think that is the delay while the browser downloads the mouse-over image for the first time. You could pre-cache the image to avoid this.

[pacificblue03]

ok would you be so kind and tell me how i can pre cashe?

will this stop it from happening for all users?

Antonio.

[mcrossley]

Sorry Antonio, there are a number of ways of doing it, either via HTML, JavaScript or CSS.

Here is one method: http://www.yourhtmlsource.com/images/preloading.html

Google "HTML pre-load images" for lots more.

[pacificblue03]

Ok i will give this a wirl now

be back soon

Antonio.

[pacificblue03]

So before i post now would this be my code?

___________________________________________________

<script type="text/javascript">
<!-- hide from non JavaScript Browsers

Image1= new Image(139,41)
Image1.src = "buttons/homenormal.png"

Image2 = new Image(139,41)
Image2.src = "buttons/homehover.png"

Image3 = new Image(139,41)
Image3.src = "buttons/todaynormal.png"

Image3 = new Image(139,41)
Image3.src = "buttons/todayhover.png"

Image3 = new Image(139,41)
Image3.src = "buttons/yesterdaynormal.png"

Image3 = new Image(139,41)
Image3.src = "buttons/yesterdayhover"

Image3 = new Image(139,41)
Image3.src = "buttons/gaugesnormal.png"

Image3 = new Image(139,41)
Image3.src = "buttons/gaugeshover.png"

Image3 = new Image(139,41)
Image3.src = "buttons/livedatanormal.png"

Image3 = new Image(139,41)
Image3.src = "livedatahover.png"

Image3 = new Image(139,41)
Image3.src = "buttons/recordsnormal.png"

Image3 = new Image(139,41)
Image3.src = "buttons/recordshover.png"

Image3 = new Image(139,41)
Image3.src = "buttons/graphsnormal.png"

Image3 = new Image(139,41)
Image3.src = "buttons/graphshover.png"

Image3 = new Image(10,10)
Image3.src = "buttons/invisible.png"

// End Hiding -->
</script>

________________________________________________________

Antonio.

[mcrossley]

I think you only need to do the 'hover' images, the normal images will be downloaded as part of the page anyway.

[pacificblue03]

EDIT: yess it works

Can i have feedback please and is there another way of doing the hover effect in css then how i did it?

[daj]

Can i have feedback please

I assume you will incorporate the tabs into each page? That being the case you should look to highlight the page the users is on. So for example, if you are on the Home page, the Home tab is always highlighted.

[pacificblue03]

Daj i am allpying the code right now to my other pages i will be done in 10 minutes by the way what do you mean by highlighted?

Antonio.

[daj]

by the way what do you mean by highlighted?

In this example, my mouse is not on the tab, but I can still see what page I am on as the tab is a different color

highlight.png

[captzero]

Antonio, well done. You have come a long way in a few weeks.

Also.....for what its worth..... I think your welcome message is a bit too long and a little confusing.