Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 11-18-2010, 08:44 PM   PM User | #1
lipner12
New Coder

 
Join Date: Nov 2010
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
lipner12 is an unknown quantity at this point
Simple question about javascript rollover images

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];
        }
    }
Here's how I have it in the HTML

Code:
<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?
lipner12 is offline   Reply With Quote
Old 11-18-2010, 08:57 PM   PM User | #2
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,248
Thanks: 59
Thanked 3,998 Times in 3,967 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
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
Code:
<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.)
__________________
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.
Old Pedant is offline   Reply With Quote
Old 11-18-2010, 09:08 PM   PM User | #3
lipner12
New Coder

 
Join Date: Nov 2010
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
lipner12 is an unknown quantity at this point
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.

Last edited by lipner12; 11-18-2010 at 09:11 PM..
lipner12 is offline   Reply With Quote
Old 11-18-2010, 09:18 PM   PM User | #4
lipner12
New Coder

 
Join Date: Nov 2010
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
lipner12 is an unknown quantity at this point
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.

Last edited by lipner12; 11-18-2010 at 09:25 PM..
lipner12 is offline   Reply With Quote
Old 11-18-2010, 09:25 PM   PM User | #5
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,248
Thanks: 59
Thanked 3,998 Times in 3,967 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
Okay, so leave the <a> in there. But same thing obtains:
Code:
<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.
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.
Old Pedant is offline   Reply With Quote
Old 11-18-2010, 09:33 PM   PM User | #6
lipner12
New Coder

 
Join Date: Nov 2010
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
lipner12 is an unknown quantity at this point
So, the second code segment should go entirely in my css file?
lipner12 is offline   Reply With Quote
Old 11-18-2010, 09:52 PM   PM User | #7
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,248
Thanks: 59
Thanked 3,998 Times in 3,967 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
What????

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.
__________________
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.
Old Pedant is offline   Reply With Quote
Old 11-18-2010, 10:16 PM   PM User | #8
lipner12
New Coder

 
Join Date: Nov 2010
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
lipner12 is an unknown quantity at this point
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.
lipner12 is offline   Reply With Quote
Old 11-18-2010, 10:25 PM   PM User | #9
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,248
Thanks: 59
Thanked 3,998 Times in 3,967 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
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" />
__________________
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.
Old Pedant is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 09:05 AM.


Advertisement
Log in to turn off these ads.