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
Code:
function swap_image(name,source) {
document.images[name].src=source;
var argv=swap_image.arguments;
if(argv[2] && argv[3] && document.getElementById) {
element=document.getElementById(argv[2]);
element.innerHTML=argv[3];
}
}
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.
So...
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
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.)
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
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.
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.
And all the rest is done at page load time and by the style sheet.
Code:
<style type="text/css">
a.rolloverLink {
text-decoration: none;
}
a.rolloverLink img {
top:150px; left:100px;
border: none;
}
</style>
<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 ...
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
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.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
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.