Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    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.

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    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.

  • #6
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So, the second code segment should go entirely in my css file?

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    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.

  • #8
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •