0

Hi all!

In the following code the Onclick events change the background images. My problem is that after you click on another link i want the previously changed backgrounds to change back to its original background image. I hope i made some sense :P. Help is MUCH apreciated.

Gr,

Jarl

<DIV ID="nav" align="center">
<TABLE border="0" cellpadding="0" cellspacing="0" width="317px" height="23px">
<TR>

<TD width=47px><a href="home.html" class="bhome" OnClick="this.style.backgroundImage='url(gifs/buttons/home2.gif)'" target=myframe></a>

<TD width=80px><a href="werkwijze.html" class="bwerkwijze" OnClick="this.style.backgroundImage='url(gifs/buttons/werkwijze2.gif)'" target=myframe name="werkwijze"></a>

<TD width=65px><a href="diensten.html" class="bdiensten" OnClick="this.style.backgroundImage='url(gifs/buttons/diensten2.gif)'" target=myframe></a>

<TD width=59px><a href="nieuws.html" class="bnieuws" OnClick="this.style.backgroundImage='url(gifs/buttons/nieuws2.gif)'" target=myframe></a>

<TD width=66px><a href="contact.html" class="bcontact" OnClick="this.style.backgroundImage='url(gifs/buttons/contact2.gif)'" target=myframe></a>
</TABLE>
</DIV>
3
Contributors
6
Replies
7
Views
7 Years
Discussion Span
Last Post by Sjaroow
0

Hey.

Easiest way to do that is to just write a function, and have that function change all the pictures.

Like:

function SetLinkBG(pActive)
{
    var links = [
        document.getElementById('Link1'),
        document.getElementById('Link2'),
        document.getElementById('Link3'),
        document.getElementById('Link4')
    ];
    
    for(var i = 0; i < links.length; i++) {
        if(links[i] == pActive) {
            links[i].style.backgroundColor = "url(active.png)";
        }
        else {
            links[i].style.backgroundColor = "url(inactive.png)";
        }
    }
}

Which you would use like so:

<a id="Link1" href="?" onclick="SetLinkBG(this);">Link1</a><br>
<a id="Link2" href="?" onclick="SetLinkBG(this);">Link1</a><br>
<a id="Link3" href="?" onclick="SetLinkBG(this);">Link1</a><br>
<a id="Link4" href="?" onclick="SetLinkBG(this);">Link1</a><br>
0

dont use javascript
use css
the focus or active attributes

<style type='text/css'>
#link1 { background-image: url(Pic11.jpg); }
#link1:active { background-image: url(Pic12.jpg); }
#link1:focus { background-image: url(Pic12.jpg); }
#link2 { background-image: url(Pic21.jpg); }
#link2:active { background-image: url(Pic22.jpg); }
#link2:focus { background-image: url(Pic22.jpg); }
#link3 { background-image: url(Pic31.jpg); }
#link3:active { background-image: url(Pic32.jpg); }
#link3:focus { background-image: url(Pic32.jpg); }
#link4 { background-image: url(Pic41.jpg); }
#link4:active { background-image: url(Pic42.jpg); }
#link4:focus { background-image: url(Pic42.jpg); }
</style></head><body>
<DIV ID="nav" align="center">
<TABLE border="0" cellpadding="0" cellspacing="0" width="317px" height="23px">
<TR>
<TD width=47px><a id='link1' href="home.html" class="bhome"  target='myframe'></a>
<TD width=80px><a id='link2' href="werkwijze.html" class="bwerkwijze" target='myframe' name="werkwijze"></a>
<TD width=65px><a id='link2' href="diensten.html" class="bdiensten" OnClick="this.style.backgroundImage='url(gifs/buttons/diensten2.gif)'" target='myframe'></a>
<TD width=59px><a href="nieuws.html" class="bnieuws" target='myframe'></a>
<TD width=66px><a 'id=link4' href="contact.html" class="bcontact" target='myframe'></a>
</TABLE>
</DIV>

focus and active, IE and Mozilla
I find it simpler, to have a transparent.gif for menu images

<style type='text/css'>
a:focus {background:#de7777;}
a:active {background:#de7777;}
</style>
<a href=menubla target=menu.bla><img src='menuimg.gif' width='33' height='33'></a>

and change the background color of the focused choice
2 code lines, any number of menu choices

Edited by almostbob: n/a

0

Thanx alot I'm gonna try and make it work like that! :D

0

with css only its impossible to achieve what i want....active and focus are only when there is focus on the button/image. So when u click somewhere else on the screen it will lose focus and change back to the original image....but thnx for the reply anyway :) ill stick with the js solution.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.