SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot Emma's Avatar
    Join Date
    Sep 2004
    Location
    atlanta
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript rollover issues

    Can you guys take a look at this? Im not sure why it's not working, I think i've just been looking at it too long perhaps:

    Code JavaScript:
     
    <script language="JavaScript" type="text/javascript">
    <!--
    if (document.images) {
     
    // "On" images
    img1on = new Image ();
    img1on.src = "images/menu/on_02.gif";
    img2on = new Image ();
    img2on.src = "images/menu/on_03.gif";
    img3on = new Image ();
    img3on.src = "images/menu/on_04.gif";
    img4on = new Image ();
    img4on.src = "images/menu/on_05.gif";
    img5on = new Image ();
    img5on.src = "images/menu/on_06.gif";
    img6on = new Image ();
    img6on.src = "images/menu/on_07.gif";
     
     
    // "Off" images
    img1off = new Image ();
    img1off.src = "images/menu/off_02.gif";
    img2off = new Image ();
    img2off.src = "images/menu/off_03.gif";
    img3off = new Image ();
    img3off.src = "images/menu/off_04.gif";
    img4off = new Image ();
    img4off.src = "images/menu/off_05.gif";
    img5off = new Image ();
    img5off.src = "images/menu/off_06.gif";
    img6off = new Image ();
    img6off.src = "images/menu/off_07.gif";
     
     
    function imgon(imgname) {
    document.images[imgname].src = eval(imgname + "on.src");
    }
     
    function imgoff(imgname) {
    if (document.images) {
    document.images[imgname].src = eval(imgname + "off.src");
    }
    }
     
    //-->
    </script>


    and here's the html that calls it:

    Code HTML4Strict:
    <div class="table2">
                            <img id="menu_01" src="images/menu_01.gif" width="243" height="26" alt="filler" /><br />
                            <a href="cpas.php" onmouseover="imgon('img2')" onmouseout="imgoff('img2')"><img name="img2" id="img2" src="images/menu_02.gif" alt="Meet The CPAs" /></a>
    <br />
                            <a href="supportstaff.php" onmouseover="imgon('img3')" onmouseout="imgoff('img3')"><img name="img3" id="img3" src="images/menu_03.gif" alt="Meet The Support Staff" /></a>
    <br />
                            <a href="services.php" onmouseover="imgon('img4')" onmouseout="imgoff('img4')"><img name="img4" id="img4" src="images/menu_04.gif" alt="Services" /></a>
    <br />
                            <a href="clients.php" onmouseover="imgon('img5')" onmouseout="imgoff('img5')"><img name="img5" id="img5" src="images/menu_05.gif" alt="Clients" /></a>
    <br />
                            <a href="contact.php" onmouseover="imgon('img6')" onmouseout="imgoff('img6')"><img name="img6" id="img6" src="images/menu_06.gif" alt="Contact Information" /></a>
    <br />
                            <a href="helpfullinks.php" onmouseover="imgon('img7')" onmouseout="imgoff('img7')"><img name="img7" id="img7" src="images/menu_07.gif" alt="Helpful Links" /></a>
    <br />
                            <img id="menu_08" src="images/menu_08.gif" width="243" height="30" alt="filler" />
    </div>



    The rollovers aren't working at all. And all the id states on the links in the css is border equals zero and the corresponding size of the image.

  2. #2
    SitePoint Guru babyboy808's Avatar
    Join Date
    Nov 2004
    Location
    dublin
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Why are using javascript for such an easy solution in css?

  3. #3
    SitePoint Zealot Emma's Avatar
    Join Date
    Sep 2004
    Location
    atlanta
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's part of a school project, we have to use javascript in at least 4 different uses on the site.

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Emma View Post

    img1off = new Image ();
    img1off.src = "images/menu/off_02.gif";

    <img name="img2" id="img2" src="images/menu_02.gif" alt="Meet The CPAs" />
    Are you sure your image names and paths are correct? Presumably on mouseout you want to replace the original image, but there appears to be a pathname inconsistency between the 'off' images you're preloading and the default images.

    Code:
    eval(imgname + "on.src");
    There's no need to use eval here:
    Code:
    document.images[imgname].src = window[imgname + "on"].src;
    Tab-indentation is a crime against humanity.

  5. #5
    SitePoint Member
    Join Date
    Sep 2007
    Location
    SF & LA & Hawaii
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    babyboy. what was ur suggested approach using CSS???

    do you mean through psuedo-classes? if so, would you change the the image using a new background for the .a:link and .a:hover options; and if that's the case what are you clicking on?


    thanks
    Last edited by eataylor; Sep 22, 2007 at 10:13.
    taylormade


Bookmarks

Posting Permissions

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