Member Avatar for mattyd

I am currently working on using Javascript arrays to swap images for rollover buttons.

This was working perfectly for one build about a week ago. That is, I am working on something else now and tried to use the same code that worked for this - it's broken now;

-A difference is that I am building this new dev locally. It is not on a live server yet. That really should not matter-- right?

-A broken image icon is displayed. There seems to be a roll-over effect occuring, though. This indicates to me that the path to the image is not linked correctly, something rather simple yet I can't seem to fix it.

I find some of the OO aspects a bit confusing: It seems that an image is turned into an object simply to be able to process it from within an array, programatically. But, HTML is needed to call the actual image for display. I guess I am confused as to why an image must be turned into an object. This I need to understand.

But, I am trying understand this fully, not just hack away at code/mark-up.

Thank you in advance for any points in the right direction(s).

`Inline Code Example Here

<head>
<!--js button swap code part 1--> 
<script type="text/javascript">
<!--
if(document.images)
{
  var image_array = new Array();

  // path to the directory with images
  var path = '/images/';

  // enumeration of the "active" images
  image_array[0] = path + "images/black_menu2.jpg";
  image_array[1] = path + "images/black_history2.jpg";
  image_array[2] = path + "images/black_contact2.jpg";

  var preload_image = new Array ();

  for(var i=0; i<image_array.length; i++)
  {
    preload_image[i]= new Image();
    preload_image[i].src = image_array[i];
  }
}
//-->
</script>
</head>

<body>
<!--js button swap code part 2--> 
<script type="text/javascript">
<!--
function rollover(name, filename)
{
  var fullpath = '/images/' + filename;
  document.images[name].src = fullpath;
}
//-->
</script>

<!--html button swap --> 
<a href="#" onmouseover="rollover('button1','black_menu2.jpg')" onmouseout="rollover('button1','black_menu1.jpg')"><img src="/images/black_menu1.jpg" name="button1" 
width="185" height="30" border="0"></a>
</body>

`
-Matthew

  • 3 Contributors
  • 9 Replies
  • 300 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by mattyd

Recommended Answers

All 9 Replies

Member Avatar for rproffitt

Let me start reading at line 10. OK, line 10 has this path of "/images/" and then in line 13 you write path + "images/black_menu2.jpg"
So that strikes me as an odd path. Are you sure you have /images/images/black_menu2.jpg ?

Member Avatar for mattyd

@ rproffitt

Yes, that may it. No, there are not two "image" folders; this is something I noticed late last night as an obvious issue. It was too late to start changing the code; it breaks and I wake up forgetting the changes.

Actually, the two "images" folder was a mistake, an issue from about 2-weeks ago I had dealt with. This was one of those stupid errors I previously made, fixed and am now dealing with again.

(I really do try to store back-ups of working code on a daily basis locally and to the cloud. Problem is: my OCD behavior with code back-up is actually not as organized as I think and I always go back to wrong saves. I save everything - even broken code. lol. I think I need a new system for storing builds.)

I will look into your suggestion now and repost layer.

Thank you kindly for your help. :)

-Matthew

Member Avatar for rproffitt

Matthew,

If that's it, what I call such lookovers is "fresh eyes." There's nothing that looks blatently wrong with the code itself. So I had to step back and look at it for what seems odd. As I don't know your folder structure, I had to guess.

Member Avatar for mattyd

At this point I am bit confused.

I have a simple, local file structure.

Changes I make just now to the path in the code still displays broken images.

I am not sure why this worked 2-weeks ago but is breaking now.

I still find aspects of the OO a bit complex (for what is actually being done, swapping images);

I admit I do not exacly understand it.

Member Avatar for rproffitt

To me this still reads as a path and filename issue. Code looks fine but I don't know your file system or test rig.

Member Avatar for mattyd

The file structure at this point is basic:

-Project folder: html file, "images" folder, js/jQuery, css files (in seperate folder)

-Rig: I'm running this locally on a laptop (previously most builds were on live server; this worked on previous builds great, but does not now)

I fear I am making a very simple mistake involving the file structure. I fear working late at night and make changes does not help.

One issue I have is that I need a piece of versioning software were I can do auto-save of ALL code, versionied, every 5-Minutes. Depending on my own versioning methods is not proving to work well and is a mess.

Edited by mattyd
Member Avatar for hielo

I find some of the OO aspects a bit confusing: It seems that an image is turned into an object simply to be able to process it from within an array, programatically.

If I am not mistaken, you are referring to lines 17- 23 on your original post. If so, all that it is doing is is pre-loading the images to ensure that the browser caches the images. That way when the rollover effect is triggered, instead of fetching the images from the server, the browser will use the cached images. If you don't cache the images, every time you swap the images, the browser will fetch the image from the server. If you are on a slow internet connection, you will experience a "flicker" effect while the image loads directly from the server.

On your original post I see:

<img src="/images/black_menu1.jpg" name="button1" width="185" height="30" border="0">

which indicates that black_menu1.jpg is the "initial" image that appears where the <img> tag is located. The question is, does it render properly upon initial page load? If so, then that implies that your site has a top-most folder named images, and hopefully all the images you are trying to preload are in that folder.

var path = '/images/';

should be:

var path = '/';
Member Avatar for mattyd

Well, I got (part) of it working. The 2nd and 3rd button in the js array are displaying and swapping images properly. The 1st image is not displaying at all.

That's okay for the moment.

Member Avatar for mattyd

@hielo

I followed your suggestion:

var path = '/images/';
should be
var path = '/';

That worked instantly to fully, correctly display the 1st button. That is, what I referred to above, that I got the 2nd & 3rd button working but not the first button at all, today.

So, altering the path variable to '/': Why did it work now, when before the 2nd & 3rd button were displaying/swapping, but the 1st was not? All buttons function properly now.

Thanks for your help.
-Matthew

Edited by mattyd
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.