Rackie Posted October 22, 2006 Share Posted October 22, 2006 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 More sharing options...
boen_robot Posted October 22, 2006 Share Posted October 22, 2006 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 More sharing options...
Rackie Posted October 22, 2006 Author Share Posted October 22, 2006 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 More sharing options...
boen_robot Posted October 22, 2006 Share Posted October 22, 2006 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 More sharing options...
Rackie Posted October 22, 2006 Author Share Posted October 22, 2006 Read man... read. Sorry I will! (and it's woman btw )Also, if I'm using frames on my website, whereabouts would I put the target="main" inside the tag? I've tried putting it in various places, but it doesn't seem to work? Link to comment Share on other sites More sharing options...
Chocolate570 Posted October 22, 2006 Share Posted October 22, 2006 Target=main can be put anywhere inside the tag. Link to comment Share on other sites More sharing options...
croatiankid Posted October 22, 2006 Share Posted October 22, 2006 if you want to learn on examples, see http://css.maxdesign.com.au/listamatic/, they have dozens of examples (i modified one of them to make the navbar in my site) Link to comment Share on other sites More sharing options...
Rackie Posted October 22, 2006 Author Share Posted October 22, 2006 ok thanks for the help guys.If you want to see my awful attempt of a website I've tried uploading it even though it doesn't all work yet - I haven't added the target=main thingy yet :)It's here Link to comment Share on other sites More sharing options...
Rackie Posted October 22, 2006 Author Share Posted October 22, 2006 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 More sharing options...
croatiankid Posted October 23, 2006 Share Posted October 23, 2006 i don't know, i see at your link that they're not working. can you upload an example of them working? Link to comment Share on other sites More sharing options...
Rackie Posted October 23, 2006 Author Share Posted October 23, 2006 Ok, I've uploaded an example of what it should look like (with the coding I posted originally)here Link to comment Share on other sites More sharing options...
justsomeguy Posted October 23, 2006 Share Posted October 23, 2006 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 More sharing options...
Rackie Posted October 26, 2006 Author Share Posted October 26, 2006 ok, I will do that thank you :)ETA I've tried that on the Tryit editor, and it's still not working Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now