Jump to content

Nav bars


Rackie
 Share

Recommended Posts

I've been trying to make a nav. bar using HTML (I'm new to this, and it's all I can manage at the moment!)I've been trying to make the bar so that when you mouse-over the image (hyperlinked) it changes. Hope that makes sense.I've tried using this code -

<html><head><title>Symphony Rats - About Us</title></head><body><body bgcolor="#DBDDF3"><font size="6" face="Verdana"><a href="http://www.symphony-rats.co.uk/about.html" onMouseOver="document.the_image.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/about_embedded.jpg';" onMouseOut="document.the_image.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/about_button.jpg';"> <img src="http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/about_button.jpg" name="the_image" border="1"></a> <br></font></body></html>

(sorry, hope that's the right way to put the code in!!! :) )and that seems to work fine.However, when I add more than one image, it the image doesn't change when moused over?!Why is this?!The whole html with all the images (that doesn't seem to work?) looks like this -

<html><head><title>Symphony Rats - Menu</title></head><body><body bgcolor="#DBDDF3"><font size="6" face="Verdana"><a href="http://www.symphony-rats.co.uk/main.html" onMouseOver="document.the_image.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/home_embedded.jpg';" onMouseOut="document.the_image.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/Home_button.jpg';"> <img src="http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/Home_button.jpg" name="the_image" border="1"></a> <br><a href="http://www.symphony-rats.co.uk/about.html" onMouseOver="document.the_image.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/about_embedded.jpg';" onMouseOut="document.the_image.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/about_button.jpg';"> <img src="http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/about_button.jpg" name="the_image" border="1"></a> <br><a href="http://www.symphony-rats.co.uk/litters.html" onMouseOver="document.the_image.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/litters_embedded.jpg';" onMouseOut="document.the_image.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/Litters_button.jpg';"> <img src="http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/litters_button.jpg" name="the_image" border="1"></a> <br><a href="http://www.symphony-rats.co.uk/my_rats.html" onMouseOver="document.the_image.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/my_rats_embedded.jpg';" onMouseOut="document.the_image.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/my_rats_button.jpg';"> <img src="http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/my_rats_button.jpg" name="the_image" border="1"></a> <br><a href="http://www.symphony-rats.co.uk/contact_me.html" onMouseOver="document.the_image.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/contact_me_embedded.jpg';" onMouseOut="document.the_image.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/Contact_me_button.jpg';"> <img src="http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/Contact_me_button.jpg" name="the_image" border="1"></a> <br> <a href="http://www.symphony-rats.co.uk/links.html" onMouseOver="document.the_image.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/links_embedded.jpg';" onMouseOut="document.the_image.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/links_button.jpg';"> <img src="http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/links_button.jpg" name="the_image" border="1"></a> </font></body></html>

Is there a better way that I can be doing this? Please help, I'm really naf at this HTML lark!!!Thank you,RackieETA - I haven't actually uploaded the pages, so the links won't actually take you anywhere yet :) hope that doesn't matter!

Link to comment
Share on other sites

Yes, there is a lot more simpler way. Use CSS for links and use the :hover pseudo class for the alternative style when the mouse passes over.Read the CSS tutorial for details, and know that :hover is supported only on links in IE6. IE7 supports it on all elements.

Link to comment
Share on other sites

Yes, there is a lot more simpler way. Use CSS for links and use the :hover pseudo class for the alternative style when the mouse passes over.Read the CSS tutorial for details, and know that :hover is supported only on links in IE6. IE7 supports it on all elements.
Thank you for the reply,firstly - can I use CSS on one page, if the rest of my website is done in HTML?And secondly, would it be too much to ask you for an example of what I'm trying to do in HTML? I can't seem to find what I'm looking for in the CSS tutorial, and I've never tried CSS before :)
Link to comment
Share on other sites

Read man... read.CSS is like an "add-on" for HTML, so yes. You can use it if the rest of the site is in HTML. Infact, as you'll see in the tutorial, you can create one CSS file and use it across all pages. When you edit something there, all pages will look the new way.Example?

a {/* Styles for all "normal" links}a:hover {/* Styes for all links when the mouse is over them */}

Read from the start to find out how exactly to declare all you need to and where to place all of this.

Link to comment
Share on other sites

After looking at those examples, I'm very confused :) but can I not use the codes I've already used (above) and modify them, so that they all works hen put on the same page. I mean is there any particular reason why they're not working when together, but are when they are individually? :)

Link to comment
Share on other sites

The reason it doesn't work with more then 1 image is because you have all the images with the same name. Also, it will be better to use 'id' instead of 'name' since you are going through javascript. So this is what 2 buttons would look like:

<a href="http://www.symphony-rats.co.uk/main.html" onMouseOver="document.image1.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/home_embedded.jpg';" onMouseOut="document.image2.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/Home_button.jpg';"> <img src="http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/Home_button.jpg" id="image1" border="1"></a> <br><a href="http://www.symphony-rats.co.uk/about.html" onMouseOver="document.image2.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/about_embedded.jpg';" onMouseOut="document.image2.src='http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/about_button.jpg';"> <img src="http://i145.photobucket.com/albums/r240/symphonyrats/menubuttons/about_button.jpg" id="image2" border="1"></a> <br>

Also, since you have your own webspace to put your site on, you might as well put all your images there too and avoid using photobucket. If you have all your HTML files in one folder, and all your images inside an images subfolder, you would reference the images as src="images/home_button.jpg". It will just save a little file size on the HTML and might be a little quicker.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...