Member Avatar for Sjaroow

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
  • 103 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Sjaroow
Member Avatar for Atli

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>
Member Avatar for almostbob

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 because: n/a
Member Avatar for Sjaroow

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

Member Avatar for Sjaroow

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.

Member Avatar for Sjaroow

THNX :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.