1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Javascript Rollover.

Discussion in 'Software Development' started by llckll, Feb 9, 2005.

Thread Status:
Not open for further replies.
  1. llckll

    llckll Thread Starter

    Joined:
    Apr 8, 2004
    Messages:
    70
    I'm sorry about the previous post. let me be more specific.

    Here is the javascript source code i am calling in my html page:

    function initRollovers() {
    if (!document.getElementById) return

    var aPreLoad = new Array();
    var sTempSrc;
    var aImages = document.getElementsByTagName('img');

    for (var i = 0; i < aImages.length; i++) {
    if (aImages.className == 'imgover') {
    var src = aImages.getAttribute('src');
    var ftype = src.substring(src.lastIndexOf('.'), src.length);
    var hsrc = src.replace(ftype, '_o'+ftype);

    aImages.setAttribute('hsrc', hsrc);

    aPreLoad = new Image();
    aPreLoad.src = hsrc;

    aImages.onmouseover = function() {
    sTempSrc = this.getAttribute('src');
    this.setAttribute('src', this.getAttribute('hsrc'));
    }

    aImages.onmouseout = function() {
    if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype);
    this.setAttribute('src', sTempSrc);
    }
    }
    }
    }

    window.onload = initRollovers;

    here is the html code i currently have up:

    <html>
    <head>
    <title>Luxury Travel</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script src="js/rollover.js" type="text/javascript"></script>
    </head>
    <body bgcolor="#FFFFFF" text="#000000">
    <table width="740" cellspacing="0" cellpadding="0" border="0" align="center">
    <tr>
    <td><img src="images/logo.gif"></td>
    </tr>
    </table>
    <table width="740" height="2" cellspacing="0" cellpadding="0" border="0" align="center">
    <tr>
    <td><img src="images/spacer.gif"></td>
    </tr>
    </table>
    <table width="740" height="306" cellspacing="0" cellpadding="0" border="0" align="center">
    <tr>
    <td style="padding-left: 10px" bgcolor="000000"><img src="images/default_pic.gif" vspace="10"></td>
    <td width="240" height="306" valign="top" align="center" bgcolor="000000" style="padding-right: 10px; padding-top: 10px">
    <table width="240" cellspacing="0" cellpadding="0">
    <tr>
    <td align="center" bgcolor="434343"><img src="images/new_york.gif" vspace="10"></td>
    </tr>
    <tr>
    <td align="center" bgcolor="434343"><img src="images/las_vegas.gif"></td>
    </tr>
    <tr>
    <td bgcolor="434343" align="center"> <br>
    <img src="images/image1.gif" vspace="4" hspace="4" class="imgover"><img src="images/image2.gif" vspace="4" hspace="4" class="imgover"><img src="images/image3.gif" vspace="4" hspace="4" class="imgover"></td>
    </tr>
    <tr>
    <td bgcolor="434343" align="center"><img src="images/image4.gif" vspace="4" hspace="4" class="imgover"><img src="images/image5.gif" vspace="4" hspace="4" class="imgover"><img src="images/image6.gif" vspace="4" hspace="4" class="imgover"></td>
    </tr>
    <tr>
    <td bgcolor="434343" height="21"></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <table width="740" height="2" cellspacing="0" cellpadding="0" border="0" align="center">
    <tr>
    <td><img src="images/spacer.gif"></td>
    </tr>
    </table>
    <table width="740" cellspacing="0" cellpadding="0" border="0" align="center">
    <tr>
    <td><img src="images/footer.gif"></td>
    </tr>
    </table>
    </body>
    </html>


    So basically, this is the situation. Images 1-6 are all black and white images. When I rollover those images, i have those same 6 images named the same, except i added '_o' to the image names which are in color.

    so when i roll over any of the images, it works fine.

    But this is where i face the problem.....

    is there a way when i rollover the first image so that it changes to the color version named image1_o, but at the same time, in another table where default_pic is located, that pic, which is much bigger, also change?

    so whichever image i'm on, the image in the other td will change at the same time the image1-6 is changing to image1-6_o?

    Great, this is very confusing.. :confused:
     
As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Similar Threads - Javascript Rollover
  1. avaisali
    Replies:
    1
    Views:
    431
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/328619

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice