help with nav bar code please:)

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Does anyone see anything wrong with these codes? I am using a code generator Boomer pointed out and I believe I have all my files/url's correct now. The last mistake I found in the code was I had put in nav_button instead of Nav_Button as I used caps on that file folder. I thought that would fix the code but still not showing up when entered into my html widget box.
<!--
<SCRIPT LANGUAGE="JavaScript"> <!-- Begin loadImage1 = new Image(); loadImage1.src = "http://www.fromheretoeden.com/resourc... over.jpg"; staticImage1 = new Image(); staticImage1.src = "http://www.fromheretoeden.com/resourc...; // End --> -->

<!-- <a href="http://www.fromheretoeden.com/index.php" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http://www.fromheretoeden.com/resourc..." border=0></a> -->

It's a two-part, mouseover code and I am just working with the "home" button for now til I get the code right. The website URL for the code generator is here ----> http://www.htmlbasix.com/mouseoverima...

Thank you much, Denise
PS My site is updated and all my files are in the filemanager.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
  • nose to the grindstone:)

Posted 9 years ago

  • 1
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
well dern, my second code isn't showing up, one sec.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
<!-- <a href="http://www.fromheretoeden.com/index.php" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http://www.fromheretoeden.com/resourc..." border=0></a> -->
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
Denise r u putting a image on the nav_button??

smithy
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
oh my goshhhhhhhhhhhhhhhhhh!!! Bless your heart, no, I didn't, oh thanks, let me go try that, what a dork I am, LOLLLLLLLLLLLL!!! Denise
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
ok come bk if it is still not working!!
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Oh darn, that wasn't it, the path is like so smithy, resources/Nav_button/index_home.php. I have a separate image folder but I had made the Nav_Button folder for these as I just thought separate was better. I have 2 images for each button, lighter and darker for the mouseover effect. Thank you for your help, so much:) It is really stumping me. The only thing I am wondering is this. Do I have to upload the buttons to my page and then enter the code? I thought by putting in the code, it would pull in the images? I know I sound pretty dumb about this but I'm just learning:) denise
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
if u jus hang on for a min i will jus look somthing up and i will get bk 2 u!!
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
no hurry at all smithy, really, I am mostly focused on my new caretaking/animal care job so I am just hit and miss with my website right now. Ty smithy, so appreciate it, denise
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
what 2 colours to u want in the button??
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
I've done some screenshots to guide you through, Denise, but GS won't allow
me to upload them for some strange reason. When I click on "Add an image"
it jumps to the top of the screen.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes




These are the two for just the "home" button named "index_home.jpg and index_home over.jpg Smithy:)

Hope they show up, my first try at using the "add an image" option on post:) denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
ta da!!!
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
one should be lLighter??? I need to go check that out. bbs, denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
oh shoot, no image, I'll try to get it:(
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Denise,

Let's go back a step and get the image URL's first.

1) In the your file manager, right click on one of your menu button images.

Click on view.



2) A new screen will open up with the button image displayed in the
top left corner. Right click on the image and select "Copy Image Location"



3) Next, select only the portion highlighted in red.
Your's should look something like .../resources/Nav_Button.............



Paste that portion here in GS and we'll take it from there.
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
what website have u got the buttons to go to?? if u know what i mean??
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
I think you mean my website, www.fromheretoeden.com smithy?? Maybe I am to direct them to go to the sitebuilder URL??? I have never worked with a sitebuilder so maybe that's it??
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Ok Boomer, will do, /resources/Nav_Buttons/index_home%20button.jpg. Isn't that weird, what is the %20 stuff I wonder? ....scratching head.....
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
it is basicly /resources/nav_button/index_home button.jpg
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
boomer, your idea not working. what i ment about when u press the button, what live site does t fgo 2!!
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
yes except the capitals I used when making the folder "Nav_Button" might be an issue. Denise:)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
The "20%" is the space character. I prefer to have no spaces in filenames.
Instead of "home button.jpg" I would do it like this - "HomeButton.jpg"
I just prefer it that way, but it souldn't be a problem your way.

Ok, so here is what your image looks like if I access your URL for that image.
http://fromheretoeden.com/resources/N...

And here's the image:



Next step:
Give me the rest of the images. (static and mouseover)
If they are all in the same folder, I just need the IMAGENAME.jpg
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
OH youre kidding on the png?? I sware I tried to upload png's and it said no go. That would have been so much easier, duh!! Yes on the mouseover question, just a light version I used Brightness and Contrast to change:) I think I will go and do the buttons again and save them as png's like normal. Or what would you suggest boomer? Do you think the code is going to work eventually?
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
I see what happened, because when I upload a png, it doesn't show a graphic, just the name of the file, I thought I should not use png. It's not Yola that told me I couldn't, I assumed, oh boy:( I make more work for myself, LOL, always learning the hard way. Denise
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
If the mouseovers are just lighter shades of the static buttons, there is a
much easier way to do this. Give me a few minutes and I'll demonstrate.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Ok, as I said Boomer, really no hurry on this but I am right here as I am working on some other things as well;) denise PS by the way, I do have to get that home button to match up but I think you are just going to give me a demo using probably one button, then I can apply it to all my new png's which won't take me long to make;) denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
hey Boomer, I need to go to the bank real quick. I will be back in about an hour. I am so sorry I need to run out on you when you are sharing your time with me. I just can't avoid doing the errand. I will get back as soon as possible and if you are no longer around, I will see you next time, thank you again, so much, denise
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
boomer over to u cos i am lost lol
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
hey smithy, Im sorry if I confused you but I sure appreciate you trying, have a great day!! Denise:)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hey Denise,
Have a look here and tell me what you think.
You can change the shading of the moseover up or down if you want.
http://hindsite.synthasite.com/denise...
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
perfect!! I just need to get that extra button in there!! So shall I make them all again so they match and do I make an extra set with a lighter shade? ty ty, so much!!
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
You don't need to make them again, Denise.
The way I'm doing it now it only needs one image per button.
I'll post the code below. You can easily play around with the shading in the code.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Paste this code in an HTML widget at the top of your page. (first HTML widget)

<style type="text/css">

a.linkopacity img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;}

a.linkopacity:hover img {
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;}

</style>

Paste this code where you would like your buttons to go.

<a class="linkopacity" href="http://YOURLINK">
<img src="h ttp://fromheretoeden.com/resources/Nav_Buttons/index_home%20button.jpg" border="0"</a>

<a class="linkopacity" href="http://YOURLINK">
<img src="h ttp://fromheretoeden.com/resources/Nav_Buttons/dest%20button.jpg" border="0"</a>

<a class="linkopacity" href="http://YOURLINK">
<img src="h ttp://fromheretoeden.com/resources/Nav_Buttons/store%20button.jpg" border="0"</a>

<a class="linkopacity" href="http://YOURLINK">
<img src="h ttp://fromheretoeden.com/resources/Nav_Buttons/forum%20button.jpg" border="0"</a>

You can play around with the "moz-opacity" percentages if you like.

P.S. I've placed a "space" between the http as in (h ttp)
on all of your image links. That is so GS does not abreviate the link.
You must remove them for the code to work.
Also you need to change the YOURLINK with your own.
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
nice work boomer and wish i was that good of doing the nav_buttons or what ever u call them lol
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Wow, please let me know if I can ever do anything to help you out. Wonderful!!! Denise:) PS If nothing else I would be proud to display your link on my site. Mine is on traveling Oregon but I would sure put in a plug for your beautiful part of the world;)
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
where did u ghet those buttons??
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
you mean mine smithy? If you do I made them in a program called Fireworks. It is part of the Adobe CS4 Master Collection. The only reason I used it though was because it allows you to make the image "active" with different tools like slicing and changing the "states" of the button. Photoshop is part of Adobe also but you can make cool buttons in there as well. I use Paintnet sometimes, a free program I got at cnet downloads.

I would be happy to make someone buttons if they gave me an idea of what they wanted? I can do all shapes, sizes, colors, textures etc. And put the text on the button as well for you. The only thing as you can see, is I have a bit of trouble figuring out code, LOL!!! Let me know if you would like a set though;) Be so glad to give something back on here;) denise PS Also oodles of background options.