View Full Version : Simple question about javascript rollover images

11-18-2010, 09:44 PM
I'm trying to do some rollover images for a webpage I need to design, for class. I have them set up, and they work.. but the issue is that I set it up in such a way that the .js file is dynamic, and works for each page. You know, so that I don't actually have to specify the images within the .js file. The problem with THAT is that it doesn't automatically load the rollover version of each image, when the page loads.. so it's a bit sluggish.

Here's my .js file

function swap_image(name,source) {
var argv=swap_image.arguments;
if(argv[2] && argv[3] && document.getElementById) {

Here's how I have it in the HTML

<a href="gallery" onmouseover="swap_image('gallery','/images/galleryro.jpg')" onmouseout="swap_image('gallery','/images/gallery.jpg')">
<img style = "top:150px; left:100px;" border="0" id="gallery" src="/images/gallery.jpg"/> </a>

Is there anything I can do to force it to load the rollover image, without sacrificing my dynamic .js code?

Old Pedant
11-18-2010, 09:57 PM
Ummm...I don't think you'll get lots of points for writing a swap_image that (a) looks like its trying to worry about MSIE version *4* and (b) looks to me like its taken from DreamWeaver code.

On top of that, it's kind of ugly that you have to write the onmouseover and onmouseout code into each <a> tag by hand. On top of that, you are using <a href="gallery"> so that if the user clicks on the image it's going to try to *go* to that href, which I strongly suspect doesn't exist.


The short answer is "Yes". The longer answer is maybe you should rewrite it all so that all you have to do in your pages is create images with a particular tag or classname and it all happens automatically. Such as

<img class="gallery" src="/images/gallery.jpg" alt="one gallery image" />

And that class, alone, is enough to trigger
(a) the style that you are applying individually
(b) the addition of the onmouseover and onmouseout event handlers
(c) the pre-load of corresponding rollover images. Assuming that all rollover image names are the same as image names other than the "ro" part. (And even that we could get around, if you needed to.)

11-18-2010, 10:08 PM
Oh, yeah.. the "gallery" is just a placeholder for a file that doesn't exist, yet. These are rollover images that run across the bar, and link to various different html files.

11-18-2010, 10:18 PM
I don't want to have to reference each image in my css file, though. I'd rather do it dynamically through the java code. Is there anything I can amend to my existing code, so that it automatically preloads the rollover image, as well?

Honestly, I'm not used to web coding. My background is in C. So I'm not aware of the various differences between older methods of doing things, and what people use, these days. I got that code from various places over the web.

Old Pedant
11-18-2010, 10:25 PM
Okay, so leave the <a> in there. But same thing obtains:

<a href="xxx.html" class="rolloverLink"><img src="/images/gallery.jpg" alt="one gallery image" /></a>

And all the rest is done at page load time and by the style sheet.

<style type="text/css">
a.rolloverLink {
text-decoration: none;
a.rolloverLink img {
top:150px; left:100px;
border: none;
<script type="text/javascript">
var rolloverImages = [];

function pageSetup( )
var links = document.getElementsByTagName("a");
for ( var n = 0; n < links.length; ++n )
var link = links[n];
if ( link.className == "rolloverLink" )
var image = link.getElementsByTagName("img")[0];
var roi = new Image();
roi.src = image.src.replace(".jpg","ro.jpg"); // xxx.jpg ==>> xxxro.jpg
rolloverImages.push( roi ); // preloads here

// now attach the onmouseover and onmouseout events to the link:
link.onmouseover = function() { ... };
link.onmouseout = function() { .... };
... etc ...

11-18-2010, 10:33 PM
So, the second code segment should go entirely in my css file?

Old Pedant
11-18-2010, 10:52 PM

Of course not. ONLY css goes in a CSS file.

The JS would go in a ".js" file.

It's just less messy and easier to see in the forum if it's all inline. In fact, that's typically how I code: Put it all inline in an HTML file and then, after its working, put the various pieces in separate files. Much easier to follow along with one file than a half dozen.

11-18-2010, 11:16 PM
No need to react, like that. It seemed odd, which is why I asked you to clarify.

Again, I am NOT a web programmer. My background is in various forms of C, Java, as well as X86 assembly. So, it should be understandable as to why I'd ask a question, like that.

Old Pedant
11-18-2010, 11:25 PM
Sorry. But I was surprised by the question.

Since you had clearly already created separate CSS and JS files. I just figured you'd keep adding to/editing them.

Hey, it's your fault, for writing code that looks like you already know what you are doing. <grin style="sickly" />