If...Else If help - Webmaster Forum - Web Design, Programming and SEO forums

08-31-2008, 09:08 AM

Normo

Status: Member
Join date: Aug 2008
Location: Hampshire, UK
Expertise:
Software:

Posts: 202

iTrader: 1 / 100%

Normo is on a distinguished road

If...Else If help

Ok so I have an image replacement code I'm working on, but I can't seem to get it working. Can anyone find the problem with this code:

Code:

function ShowImg() {
 if (document.getElementById("1")) {
  document.getElementById("background").src = "images/banner.png";
} else if (document.getElementById("2")) {
  document.getElementById("background").src = "images/text.png";
} else {
  document.getElementById("background").src = "images/bannerthin.png";
}};

Code:

<a href="#" id="1" onmouseover="ShowImg()" onmouseout="Backstep()">1</a>
<a href="#" id="2" onmouseover="ShowImg()" onmouseout="Backstep()">2</a>

What happens is it shows the first image (banner.png) but when you hover over the second link, instead of it showing text.png it shows banner again.
Any help is appreciated.

08-31-2008, 03:09 PM

xdoomx

Status: Member
Join date: Feb 2005
Location: Quebec, Canada
Expertise:
Software:

Posts: 441

iTrader: 1 / 100%

xdoomx is on a distinguished road

PHP Code:


			
function ShowImg(a) {

    var background = document.getElementById("background");

    if (a.id=='1'){

        background.style.backgroundImage="url(images/banner.png)";

    }

    else if(a.id=='2') {

        background.style.backgroundImage="url(images/text.png)";

    }

    else{

        background.style.backgroundImage="url(images/bannerthin.png)";

    }

};

HTML Code:

<a href="#" id="1" onmouseover="ShowImg(this)" onmouseout="Backstep()">1</a>
<a href="#" id="2" onmouseover="ShowImg(this)" onmouseout="Backstep()">2</a>

This should make it working using your code, but I would suggest something like this instead :

PHP Code:


			
function ShowImg(img) {

    var background = document.getElementById("background");

    background.style.backgroundImage="url(images/" + img + ".png)";

};

HTML Code:

<a href="#" id="1" onmouseover="ShowImg('banner')" onmouseout="Backstep()">1</a>
<a href="#" id="2" onmouseover="ShowImg('text')" onmouseout="Backstep()">2</a>
<a href="#" id="3" onmouseover="ShowImg('bannerthin')" onmouseout="Backstep()">3</a>

Basically give the name of the image you want to appear as a parameter to the function, and do the replace.

Hope this helps

09-01-2008, 02:30 PM

Normo

Status: Member
Join date: Aug 2008
Location: Hampshire, UK
Expertise:
Software:

Posts: 202

iTrader: 1 / 100%

Normo is on a distinguished road

Thanks, your way is a much improved version.

09-13-2008, 02:05 PM

Normo

Status: Member
Join date: Aug 2008
Location: Hampshire, UK
Expertise:
Software:

Posts: 202

iTrader: 1 / 100%

Normo is on a distinguished road

Having a few problems on the backstep part of the same code:

Code:

function Backstep() {
 var back = document.getElementById("background");
 if (back.src != "images/bannerthin.png"){
  back.src = "images/bannerthin.png";
}};

Code:

<a href="#" id="1" onmouseover="ShowImg('text')" onmouseout="Backstep()">1</a>

I'm not great shakes at Javascript, just getting to grips with it really. :P
Any help is appreciated.

09-13-2008, 03:34 PM

derek lapp

Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:

Posts: 2,246

iTrader: 0 / 0%

derek lapp is on a distinguished road

Code:

var back = document.getElementById("background");

Code:

<a href="#" id="1"...

based on the code provided, you don't have an element with the id [i]background[/b].

i don't know exactly how this is supposed to work but i'm assuming there's probably a simpler way to do this.

09-13-2008, 04:57 PM

xdoomx

Status: Member
Join date: Feb 2005
Location: Quebec, Canada
Expertise:
Software:

Posts: 441

iTrader: 1 / 100%

xdoomx is on a distinguished road

This is what I would do :

PHP Code:


			
ShowImg = function(img){

    var background = document.getElementById('background').style;

    var backstep = 'url(images/bannerthin.png)';

    if(img) background.backgroundImage='url(images/' + img + '.png)';

    else background.backgroundImage=backstep;

};

HTML Code:

<div id="background"></div>
<a href="#" id="1" onmouseover="ShowImg('banner')" onmouseout="ShowImg(null)">1</a>
<a href="#" id="2" onmouseover="ShowImg('text')" onmouseout="ShowImg(null)">2</a>
<a href="#" id="3" onmouseover="ShowImg('bannerthin')" onmouseout="ShowImg(null)">3</a>

One function that does it all, swaps the image if the parameter isn't null, resets it to default if it is.

09-13-2008, 05:22 PM

Normo

Status: Member
Join date: Aug 2008
Location: Hampshire, UK
Expertise:
Software:

Posts: 202

iTrader: 1 / 100%

Normo is on a distinguished road

ok thanks for your help, I mixed a few of the suggestions together to get my end result. cheers ^_^