Swap image on click. Anyone?

1

Hello everyone. I’m somewhat new to JavaScript and am in need of some assistance. I have a navigation bar that is composed of 8 different images and each image is a link that loads it’s relative html file into an iFrame. What I would like to do is to swap each image on click with another image in order to show that that particular page is active. For example, let’s say your on the home page. The home image is the active home image while all of the other images are inactive images. Then when you click on one of the inactive images, it’s relative active image is swapped in, the iFrame is populated and the home page image is swapped with it’s inactive image and so on. Any help would be greatly appreciated. Thanks!

JPearson311

2

Hi,

Here’s a quick and dirty function that would do what you want:


<html>
    <head>
        <title>Show Active/Inactive</title>
        <script type="text/javascript">
            var curActive;
            function activateSection(section)
            {
                //revert currently active image if it is defined
                if(typeof(curActive) != "undefined")
                {
                    var curImg = document.getElementById(curActive + "_img");
                    curImg.src = "images/" + curActive + "_inactive.png";
                }

                //make new image currently active                
                var img = document.getElementById(section + "_img");
                img.src = "images/" + section + "_active.png";
                
                //put the requested section in the currently active variable
                curActive = section;

                //do other stuff
            }
        </script>
    </head>
    <body>
        <a href="http://www.yourdomain.com/#" target="whatever" onClick="javascript: activateSection('home')">
            <img id="home_img" src="images/home_inactive.png" />
        </a>

        <a href="http://www.yourdomain.com/#" target="whatever" onClick="javascript: activateSection('contact')">
            <img id="contact_img" src="images/contact_inactive.png" />
        </a>

    </body>
</html>

Hope this helps :slight_smile:
Carpo.

3

That’s a good script, but honestly since you are not loading a new page into the browser (you are loading them into the iframe, you could use Selector:active in your css properties to define a new background image for the active link. Not to negate carpo’s script or anything, it’s good. Welcome carpo!

4

Cheers, thanks for the welcome actionAction.

Sometimes I think of a programming solution too quickly :slight_smile: CSS is always best to use when it does the same job.

5

i’m trying to do the same exact thing as the original poster. unfortunately though, i am not familiar with the Selector:active CSS function. is there any way you could give an example?

6

Welcome onyx,

The CSS active state basically defines the styles applied to the “active” link and is very similar to the hover state. Let’s say you have a list of links for your menu:


<div id="menu">
                    <ul id="nav">
                        <li><a href="#" id="menu_link">Home</a></li>
                        <li><a href="#" id="menu_link">Commercial</a></li>
                        <li><a href="#" id="menu_link">Residential</a></li>
                        <li><a href="#" id="menu_link">Services</a></li>
                        <li><a href="#" id="menu_link">News</a></li>
                        <li><a href="#" id="menu_link">Company</a></li>
                    </ul>
                </div>

Your styles so far might be something like:


#menu{
	font-family:Helvetica Neue, Helvetica;
	top:0px;
	height:60px;
	text-align:center;
	color:#fff;
	background:#631618 url(images/menu_bg.png) repeat-x;
}

#menu ul{
	font-size: .9em;
	padding: 0;
	margin: 0;
	list-style: none;
	text-align:center;
}

#menu li {
	padding-top:20px;
	float: left;
	height:40px;
	background:#631618 url(images/menu_bg.png) repeat-x;
	vertical-align:text-top;
	padding-left:5px;
	position: relative;
	width: 11em;
	text-align:center;
}
#menu li a:hover{
	text-decoration:underline;
}

Now, you want to define the style characteristics for your active menu link. You would accomplish this by using the active state:


#menu li a:active{
	font-weight:bold;
        /*further css here*/
}

I hope this explains. I usually resort to something like this though. For each menu item I add an onclick event that assigns the css id to the body tag using document.body.id = “whateverID”, then in my style sheet I have something along these lines:


body#home #menu li a#home,
body#about#menu li a#about,
body#resume #menu li a#resume ,
body#contact #menu li a#contact{
	background-color:#8596AA;
	color:#fff;

Which basically says only in the case that the body has x id, change x menu item (the same id as the menu item) change that menu item.