AJAX

Javascript image swap on rollover.

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Mar 2008

Posts: 78

Reputation: rickya100 is an unknown quantity at this point

Solved Threads: 1

rickya100

Offline

Junior Poster in Training

Javascript image swap on rollover.

Apr 6th, 2008

Hi and thanks for looking.

The problem i'm having is simply getting an image to swap on a mouseover. Well I sort of had it working but then I cahnged the function to try and accomodate for more images and it just fell over dead.

Let me show you the function I have for it. Bear in mind I'm used to coding but more PHP and VB rather than JavaScript so the code ain't going to be pretty, sorry.

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
 
<script language="javascript1.5">
Rollimage = new Array()
 
Rollimage[0] = new Image(244,244) 
Rollimage[0].src = "images/personal_up.png" 
Rollimage[1] = new Image(244,244)
Rollimage[1].src = "images/personal_over.png"
 
Rollimage[2] = new Image(244,244) 
Rollimage[2].src = "images/thoughts_up.png" 
Rollimage[3] = new Image(244,244)
Rollimage[3].src = "images/thoughts_over.png"
 
Rollimage[4] = new Image(244,244) 
Rollimage[4].src = "images/work_up.png" 
Rollimage[5] = new Image(244,244)
Rollimage[5].src = "images/work_over.png"
 
function SwapBack(image, number){
  document.[image].src = Rollimage[number].src;
  return true;
}
function SwapOut(image, number) {
  document.[image].src = Rollimage[number].src;
  return true;
} 
 
</script>
<script language="javascript1.5">
Rollimage = new Array()
   
Rollimage[0] = new Image(244,244) 
Rollimage[0].src = "images/personal_up.png" 
Rollimage[1] = new Image(244,244)
Rollimage[1].src = "images/personal_over.png"

Rollimage[2] = new Image(244,244) 
Rollimage[2].src = "images/thoughts_up.png" 
Rollimage[3] = new Image(244,244)
Rollimage[3].src = "images/thoughts_over.png"

Rollimage[4] = new Image(244,244) 
Rollimage[4].src = "images/work_up.png" 
Rollimage[5] = new Image(244,244)
Rollimage[5].src = "images/work_over.png"

function SwapBack(image, number){
  document.[image].src = Rollimage[number].src;
  return true;
}
function SwapOut(image, number) {
  document.[image].src = Rollimage[number].src;
  return true;
} 

</script>

Thats my function which i have placed in a PHP file which I then include on everypage.
Now the 3 image links that I am calling the function from.

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
 
<div class="icons">
<a href="#" onmouseover="SwapOut(personal, 0)" onmouseout="SwapBack(personal, 1)"><img name="personal" alt="logo" src="images/personal_up.png" /></a>
<a href="#" onmouseover="SwapOut(thoughts, 2)" onmouseout="SwapBack(thoughts, 3)"><img name="thoughts" alt="logo" src="images/thoughts_up.png" /></a>
<a href="#" onmouseover="SwapOut(work, 4)" onmouseout="SwapBack(work, 5)"><img name="work" alt="logo" src="images/work_up.png" /></a>
</div>
<div class="icons">
<a href="#" onmouseover="SwapOut(personal, 0)" onmouseout="SwapBack(personal, 1)"><img name="personal" alt="logo" src="images/personal_up.png" /></a>
<a href="#" onmouseover="SwapOut(thoughts, 2)" onmouseout="SwapBack(thoughts, 3)"><img name="thoughts" alt="logo" src="images/thoughts_up.png" /></a>
<a href="#" onmouseover="SwapOut(work, 4)" onmouseout="SwapBack(work, 5)"><img name="work" alt="logo" src="images/work_up.png" /></a>
</div>

So that's it. As i say I had it working with only one image but trying to expand upon the example i found hasn't worked.

Any tips or help that you could post would be great.

Thanks for looking.

BTW I have searched google and read many articles on this but still can't get it to work. Also I have searched previous articles on DaniWeb and again none solve the problem.

The address of the page is www.richardjohnashe.com/portfolio.

Last edited by rickya100; Apr 6th, 2008 at 12:10 am.

•

Join Date: Mar 2008

Posts: 21

Reputation: HenryGR is an unknown quantity at this point

Solved Threads: 3

HenryGR

Offline

Newbie Poster

Re: Javascript image swap on rollover.

Apr 6th, 2008

At a first glance, I can see that on your calling code:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<div class="icons"> <a href="#" onmouseover="SwapOut(personal, 0)" onmouseout="SwapBack(personal, 1)"><img name="personal" alt="logo" src="images/personal_up.png" /></a>.... </div>
<div class="icons"> <a href="#" onmouseover="SwapOut(personal, 0)" onmouseout="SwapBack(personal, 1)"><img name="personal" alt="logo" src="images/personal_up.png" /></a>.... </div>

you are referencing undefined variables. Have you tried to replace the call for:

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

onmouseover="SwapOut(personal, 0)"

with

onmouseover="SwapOut('personal', 0)"

as I guess you want to address the object with name 'personal' instead the object contained in personal variable.

Hope this helps.

You keep going, have a Nice day!
Henry.

Before printing this message, make sure is necessary.

•

Join Date: Dec 2007

Posts: 31

Reputation: AaronASterling is an unknown quantity at this point

Solved Threads: 5

AaronASterling AaronASterling is offline

Offline

Light Poster

Re: Javascript image swap on rollover.

Apr 6th, 2008

Also you seem to be relying on the javascript semi-colon insertion "feature". the language does require semi-colons at the end of every statement. It's just that it will supply them for you if you omit them. This can cause bugs when it gets it wrong. they can be very hard bugs to figure out. Don't rely on it and supply all semicolons yourself. And also you might want to consider using Rollimage = []; instead of Rollimage=new Array(); . This is (i believe) faster. Because Array is a built in class, you do not need to call its constructor.

Aaron Sterling

•

Join Date: Mar 2008

Posts: 78

Reputation: rickya100 is an unknown quantity at this point

Solved Threads: 1

rickya100

Offline

Junior Poster in Training

Re: Javascript image swap on rollover.

Apr 6th, 2008

HenryGR and AaronASterling, thanks both for the advice, unfortunately it still doesn't work when I enclose the variables in quotation marks, when I add a semi colon to the end of lines or when I replace the 'new array' text with just the square brackets [].

If there is anything else you think is posibly wrong, however small it would be great if you could post it.

And i assume that in the code I don't have to actually explicitly create the variables 'image' and 'number'. Or do I?

•

Join Date: Dec 2007

Posts: 31

Reputation: AaronASterling is an unknown quantity at this point

Solved Threads: 5

AaronASterling AaronASterling is offline

Offline

Light Poster

Re: Javascript image swap on rollover.

Apr 6th, 2008

Sorry mate, my earlier comments would have nothing to do with why your script fails. I was just pointing out general coding style. never rely on semi-colen insertion. as to your problem...

in your event handlers try document[image].src instead of document.[image].src
i haven't actually tried it but at least the syntax is correct

Last edited by AaronASterling; Apr 6th, 2008 at 11:37 am. Reason: fix code tags

Aaron Sterling

•

Join Date: Mar 2008

Posts: 78

Reputation: rickya100 is an unknown quantity at this point

Solved Threads: 1

rickya100

Offline

Junior Poster in Training

Re: Javascript image swap on rollover.

Apr 6th, 2008

AaronASterling u got it!

GREAT!!!

Removing the .from between the document and square brackets got it. I also had to swap my numbers that I'm passing around bit to get the right order of swaps but you got it.

Man thanks very much for the time you spent. Fantastic. O and also thanks to henryGR as well, thanks man.