SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rollover not working in IE

    Hi

    Please could you tell me what idiot thing I'm doing wrong? My rollovers don't seem to be working in IE8 but work perfectly in Chrome and Firefox. The previous version of the site worked beautifully, but now I'm updating it, it's fallen apart.

    To save you trawling through pages of code on the full site, I've simplified the problem in a test page:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    </head>

    <body onload="MM_preloadImages('images/buttons/home_hov.jpg')">
    <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/buttons/home_hov.jpg',1)"><img src="images/buttons/home_up.jpg" name="home" width="35" height="20" border="0" id="home" /></a>
    </body>
    </html>

    The HOME button should darken on rollover. But sadly it just sits there, looking at me!

    If it helps, the original site, where everything was working, is at www.lickens.co.uk

    Many thanks!

    13adger

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what error messages are you getting

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok this is embarrassing! But I'll admit to it to help any other newbies out there. The problem was actually in the Dreamweaver preview system. Once I actually posted the site online, it worked perfectly!

    Der

    Thanks Webdev, it was your question that triggered me to upload it to get the correct error message, so in a way you solved it!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You don't need that mass of outdated code and javascript to do a simple rollover.

    Here's an example using css only:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Image Rollover</title>
    <style type="text/css">
    a { text-decoration:none; }
    .roll img { border:none; }
    a.roll:hover { visibility:visible }
    a.roll:hover img {
    	width:0;
    	height:0;
    	overflow:hidden;
    	padding:20px 0 0 35px;/* height and width of image */
    	background: url(images/buttons/home_hov.jpg) no-repeat 0 0;/* your rollover image */
    }
    </style>
    </head>
    <body>
    <p><a class="roll" href="index.html"><img  src="images/buttons/home_up.jpg" width="35" height="20" alt="Home" id="home" /></a></p>
    </div>
    </body>
    </html>

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh that's so much nicer!

    Thank you


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
  •