SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    I'm having trouble getting the Suckerfish hover to work in IE6?

    Hello,

    It's supposed to make the portfolio images show a hovered effect in IE6 - but it's not working. Can anyone spot what I'm missing? Thanks a bunch!

    http://www.visibilityinherit.com/test.php

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{ visibility: inherit; } Portfolio</title>
    <link href="screen.css" rel="stylesheet" type="text/css" media="screen">
    <style type="text/css">
    <!--
    #content img {
    padding: 4px;
    background: #666;
    margin: 0 24px 40px;
    border: #CCC solid 1px;
    }
    #content img:hover, #content img.hover {
    background: #444;
    border: #444 solid 1px;
    }
    -->
    </style>
    <!--[if IE 6]>
    <script type="text/javascript">
    // suckerfish menu - js for ie6
    sfHover = function() {
    var sfEls = document.getElementById("content").getElementsByTagName("img");
    for (var i=0; i<sfEls.length; i++) {
    sfEls.onmouseover=function() {
    this.className+=" hover";
    }
    sfEls.onmouseout=function() {
    this.className=this.className.replace(new RegExp(" hover\\b"), "");
    }
    }
    }
    // Run when page loads
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <![endif]-->
    </head>
    
    <body id="portfolio">
    <div id="wrapper">
    <div id="header"><?php include("includes/heading.php"); ?></div>
    <div id="nav">
    <?php include("includes/nav.php"); ?>
    </div>
    <div id="content">
    <a href="http://www.littleaboutalot.com"><img src="images/portfolio1.jpg" alt="portfolio 1"></a>
    <a href="http://www.2614jeffersonst.com"><img src="images/portfolio2.jpg" alt="portfolio 2"></a>
    <a href="http://www.visibilityinherit.com/about.php"><img src="images/portfolio3.jpg" alt="portfolio 3"></a>
    </div>
    <div id="clearfooter"></div>
    </div>
    <div id="footer">
    <div id="footerborder"><!-- --></div>
    <?php include("includes/footer.php"); ?>
    </div>
    </body>
    </html>

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Within the loop you have to reference the current instance of the element:

    Code JavaScript:
    for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" hover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" hover\\b"), "");
    		}
    	}
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    YES Jimmy - your the man! That did it! Thank you very much!

    So all you did was add this twice right? [i]

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep that's all I did.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


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
  •