Making a Navigation Bar using Javascript

Question

I have a web page with a navigation bar at the top that I want to appear to change colors when you mouse over it by changing to a different file that is that image in a different color. I want to make a function that will create the HTML code for this bar. I started on it but I am confused as where to go from here.

<html>
<head>
    <script LANGUAGE="JavaScript">
        function NavigationBar() {

            var reg1 = new Image
            var red1 = new Image

            reg1.src = "1.gif"
            red1.src = "1R.gif"

            onMouseOver = "document.thereg1.src=red1.src"
            onMouseOut = "document.thereg1.src=reg1.src"
        }
    </script>
</head>

<body>
    <a href="Home Page.html" NavigationBar(thereg1)>
        <img src="1.gif" Name="thereg1">
    </a>
</body>
</html>

do you mean the bar colour or the link background colour? Regardless, both can be done with CSS, javascript is probably overkill — Matt Lambert
– Matt Lambert, Commented Nov 5, 2013 at 18:20

Diego Claudiu · Accepted Answer · 2013-11-05 18:27:23Z

1

You don't even have to use Javascript for that

Just stick with CSS because it really easier and do like this :

link {

background-image: url ...
}

link:hover{
background-image: ..
transition : background-image 0.5s ease-in-out;
}

this will just change the image on hover

IF you want to have a nice transition use transition

answered Nov 5, 2013 at 18:27

Diego Claudiu

3341 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Making a Navigation Bar using Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related