...

View Full Version : Resolved Javascript error: 'normal_image' is not defined.



`mishimasan`
08-15-2008, 07:34 AM
I got some rollover buttons that aren't "rolling over". Can you spot the mistake please? I guess it has something to do with the way 'normal_image' has been defined? hrhr. Well, I added one button when I first started the page, and the rollover worked perfectly. Then I added a second and a third and when I went to the page, they all showed up but the rollover didn't work. I'm guessing that I have to differentiate the buttons from each other within the 'normal-image' declaration but I don't know how to. You can see that I tried adding sequential numbering to the end of the 'normal_image' and 'mouseover_image' entries. Didn't work...

The page is located at http://www.easidesigns.co.uk/test.

HTML:


<script language="javascript" type="text/javascript">
normal_image1 = new Image();
normal_image1.src = "images/branding.png";
mouseover_image1 = new Image();
mouseover_image1.src = "images/hover-branding.png";

normal_image2 = new Image();
normal_image2.src = "images/print.png";
mouseover_image2 = new Image();
mouseover_image2.src = "images/hover-print.png";

normal_image3 = new Image();
normal_image3.src = "images/web.png";
mouseover_image3 = new Image();
mouseover_image3.src = "images/hover-web.png";

normal_image4 = new Image();
normal_image4.src = "images/photography.png";
mouseover_image4 = new Image();
mouseover_image4.src = "images/hover-photography.png";

normal_image5 = new Image();
normal_image5.src = "images/about.png";
mouseover_image5 = new Image();
mouseover_image5.src = "images/hover-about.png";

normal_image6 = new Image();
normal_image6.src = "images/news.png";
mouseover_image6 = new Image();
mouseover_image6.src = "images/hover-news.png";

normal_image7 = new Image();
normal_image7.src = "images/contact.png";
mouseover_image7 = new Image();
mouseover_image7.src = "images/hover-contact.png";

function swap(){
if (document.images){
for (var x=0;
x<swap.arguments.length;
x+=2) {
document[swap.arguments[x]].src = eval(swap.arguments[x+1] + ".src");
}
}
}
</script>

<div id="container">

<div id="menu1">

<ol id="line1">

<li class="brand">
<a href="http://www.easidesigns.co.uk" onMouseOver="swap('name_of_img','mouseover_image1')"
onMouseOut="swap('name_of_img','normal_image1')">
<img name="name_of_img" src="images/branding.png" border="0"></a>
</li>
<li class="print">
<a href="http://www.easidesigns.co.uk" onMouseOver="swap('name_of_img','mouseover_image')"
onMouseOut="swap('name_of_img','normal_image')">
<img name="name_of_img" src="images/print.png" border="0"></a>
</li>
<li class="stationery">
<a href="http://www.easidesigns.co.uk" onMouseOver="swap('name_of_img','mouseover_image')"
onMouseOut="swap('name_of_img','normal_image')">
<img name="name_of_img" src="images/stationery.png" border="0"></a>
</li>

</ol>

</div>

<div id="menu2">

<ol id="line2">

<li class="web">
<a href="http://www.easidesigns.co.uk" onMouseOver="swap('name_of_img','mouseover_image')"
onMouseOut="swap('name_of_img','normal_image')">
<img name="name_of_img" src="images/web.png" border="0"></a>
</li>
<li class="photography">
<a href="http://www.easidesigns.co.uk" onMouseOver="swap('name_of_img','mouseover_image')"
onMouseOut="swap('name_of_img','normal_image')">
<img name="name_of_img" src="images/photography.png" border="0"></a>
</li>

</ol>

</div>

<div id="menu3">

<ol id="line3">

<li class="about">
<a href="http://www.easidesigns.co.uk/test/about.html" onMouseOver="swap('name_of_img','mouseover_image')"
onMouseOut="swap('name_of_img','normal_image')">
<img name="name_of_img" src="images/about.png" border="0"></a>
</li>
<li class="news">
<a href="http://www.easidesigns.co.uk" onMouseOver="swap('name_of_img','mouseover_image')"
onMouseOut="swap('name_of_img','normal_image')">
<img name="name_of_img" src="images/news.png" border="0"></a>
</li>
<li class="contact">
<a href="http://www.easidesigns.co.uk" onMouseOver="swap('name_of_img','mouseover_image')"
onMouseOut="swap('name_of_img','normal_image')">
<img name="name_of_img" src="images/contact.png" border="0"></a>
</li>

</ol>

</div>

</div>

CSS:


#container { display:inline-block; width:35em; margin:48.7em 0 0 2.5em; }
#menu1 li, #menu2 li, #menu3 li { display:inline; }
#line1 li.print { margin-left:1.9em; }
#line1 li.stationery { margin-left:1.8em; }
#line2 li.photography { margin-left:1.9em; }
#line3 li.news {margin-left:1.9em; }
#line3 li.contact { margin-left:1.8em; }

Any help would be appreciated very much as I need this code fixed ASAP and I don't really understand Javascript at all!

itsjareds
08-15-2008, 09:31 AM
A better way to use rollover images is with CSS. This is a great tutorial - it works without JavaScript, which means it will work with users who have JS disabled, and it doesn't have a second wait for the browser to load it -- it's already part of the image.

http://www.nerdliness.com/article/2007/08/13/simple-mouseover-buttons-css

`mishimasan`
08-15-2008, 10:41 AM
I don't want to use CSS rollover buttons, I know them very well. In the case of this webpage, javascript is working much better.

Please help.

auslin
08-16-2008, 01:34 AM
Hi,

There's a few problems evident.

1. swap function parameters
The inline swap function calls are all using the same <img> name and the same image object name, so they cannot work. Each list item's <img> name needs to be unique, so it can be properly referenced, e.g. something like img_brand, img_print, etc. And each call needs to carry the corresponding names for the <img> tag and the image object. Like so, for the first two list items:



<li class="brand">
<a href="http://www.easidesigns.co.uk"
onMouseOver="swap('img_brand','mouseover_image1')"
onMouseOut="swap('img_brand','normal_image1')">
<img name="img_brand" src="images/branding.png" border="0"></a>
</li>
<li class="print">
<a href="http://www.easidesigns.co.uk"
onMouseOver="swap('img_print','mouseover_image2')"
onMouseOut="swap('img_print','normal_image2')">
<img name="img_print" src="images/print.png" border="0"></a>
</li>



2. swap function itself
The swap function calls here always have two parameters; no more. Use the following instead:



function swap(imgName, imgObject){
if (document.images) {
document[imgName].src = eval(imgObject + ".src");
}
}


3. Missing image object definitions.
In the html, there is a list item for "stationery", but nothing in the initial script to create its image objects and sources. These will need to be added in.

`mishimasan`
08-16-2008, 11:30 AM
Thanks a lot for that but it still doesn't work.

After making the changes you suggested, I tried it to no avail. I then removed all the other images bar the first one, and refreshed the page. It works, as before. So... what am I missing here? The function must be incorrect, somewhere - since when there's only one image with two states, it works fine. As soon as I add more images, the whole mechanism does not work.

`mishimasan`
08-16-2008, 12:28 PM
I've fixed it!

The way that I did it was to, remove all the clunky code that was unnecessary and replace it along with the function script as so:


<script type="text/javascript">
var revert = new Array();
var inames = new Array('branding','print','stationery','web','photography','about','news','contact');

if (document.images) { // Preload
var flipped = new Array();
for(i=0; i< inames.length; i++) {
flipped[i] = new Image();
flipped[i].src= "images/"+inames[i]+"2.png";
}
}

function over(num) {
if(document.images) {
revert[num]=document.images[inames[num]].src;
document.images[inames[num]].src= flipped[num].src;
}
}
function out(num) {
if(document.images) document.images[inames[num]].src= revert[num];
}
</script>


<div id="container">

<div id="menu1">

<ol id="line1">

<li class="brand">
<a href="http://www.easidesigns.co.uk/" <img src="images/branding.png" name="branding" onMouseOver="over(0)" onMouseOut="out(0)"></a>
</li>
<li class="print">
<a href="http://www.easidesigns.co.uk/" <img src="images/print.png" name="print" onMouseOver="over(1)" onMouseOut="out(1)"></a>
</li>
<li class="stationery">
<a href="http://www.easidesigns.co.uk/" <img src="images/stationery.png" name="stationery" onMouseOver="over(2)" onMouseOut="out(2)"></a>
</li>

</ol>

</div>

<div id="menu2">

<ol id="line2">

<li class="web">
<a href="http://www.easidesigns.co.uk/" <img src="images/web.png" name="web" onMouseOver="over(3)" onMouseOut="out(3)"></a>
</li>
<li class="photography">
<a href="http://www.easidesigns.co.uk/" <img src="images/photography.png" name="photography" onMouseOver="over(4)" onMouseOut="out(4)"></a>
</li>

</ol>

</div>

<div id="menu3">

<ol id="line3">

<li class="about">
<a href="http://www.easidesigns.co.uk/" <img src="images/about.png" name="about" onMouseOver="over(5)" onMouseOut="out(5)"></a>
</li>
<li class="news">
<a href="http://www.easidesigns.co.uk/" <img src="images/news.png" name="news" onMouseOver="over(6)" onMouseOut="out(6)"></a>
</li>
<li class="contact">
<a href="http://www.easidesigns.co.uk/" <img src="images/contact.png" name="contact" onMouseOver="over(7)" onMouseOut="out(7)"></a>
</li>

</ol>

</div>

</div>

For multiple rollover images, this is optimal. It also preloads the image.

@ Auslin, thank you for your input. I believe that you are correct when you say that a swap function parameter should have no more than two codes, IF the swap function is only meant for a single, double-sided rollover image. However, in this case where 8 images are used, a more complex function is needed.

You can see the page working here: http://www.easidesigns.co.uk/test



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum