SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: image rollovers

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2001
    Location
    London
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image rollovers

    Please help - code is driving me mad!

    I have a rollover script that is supposed to bring up the rollover image in a different cell in a table. But it's not working - when I preview it's not even bringing up any errors! I've pasted the script below:

    <script language="JavaScript">

    <!--

    browserName = navigator.appName;

    browserVer = parseInt ( navigator.appVersion );



    version = "n2";

    if ( browserName == "Netscape" && browserVer >= 3 ) version = "n3";

    if ( browserName == "Microsoft Internet Explorer" && browserVer >=4 )
    version = "e4";



    if ( version == "n3" || version == "e4" )

    { blank = new Image(106, 68);
    blank.src = "../../../images/comms%20news/blank.jpg";
    blank2 = new Image(106, 68);
    blank2.src = "../../../images/comms%20news/blank.jpg";
    about = new Image(106, 68);
    about.src = "../../../images/comms%20news/about1.gif";
    pubs = new Image(106, 68);
    pubs.src = "../../../images/comms%20news/pubs1.gif";
    info = new Image(106, 68);
    info.src = "../../../images/comms%20news/info1.gif";
    press = new Image(106, 68);
    press.src = "../../../images/comms%20news/press1.gif";
    marketing = new Image(106, 68);
    marketing.src = "../../../images/comms%20news/marketing1.gif";
    web = new Image(106, 68);
    web.src = "../../../images/comms%20news/web1.gif";
    ni = new Image(106, 68);
    ni.src = "../../../images/comms%20news/ni1.gif";
    scotland = new Image(106, 68);
    scotland.src = "../../../images/comms%20news/scotland1.gif";
    wales = new Image(106, 68);
    wales.src = "../../../images/comms%20news/wales1.gif";
    }
    function rollover (imgname) {
    if (document.images) {document[imgname].src = eval (imgname + "o.src"); }
    }
    function rolloff (imgname) {
    if (document.images) {document[imgname].src = ".gif"; }
    }
    // -->
    </script>
    <script language="JavaScript">
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage;}}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    function MM_swapImgResotre() { //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_findObj(n, d) { //v3.0
    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); 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 BGCOLOR="000000" link="666666" alink="000000" vlink="999999">

    <TABLE BORDER=0 cellpadding=0 cellspacing=0 width=98% height=98%><tr><td valign=middle align=center>
    <TABLE BORDER=0 cellpadding=0 cellspacing=0 width="455">
    <tr>
    <td width="48"><A HREF="about.htm"
    onMouseOver = "
    blank.src = about.src;
    window.status='about'; return true"
    onMouseOut = "
    blank.src = blank2.src;
    window.status =' ';
    return true"> <img src="../../../images/comms%20news/one.jpg" border=0 width="48" height="34" name="about"></a></td>
    <td width="30"> <A HREF="pubs.html"
    onMouseOver = "
    blank.src = pubs.src;
    window.status='publications'; return true"
    onMouseOut = "
    blank.src = blank2.src;
    window.status =' ';
    return true"> <img src="../../../images/comms%20news/two.jpg" border=0 width="30" height="34" name="pubs"></a></td>
    <td width="30"> <A HREF="info.html"
    onMouseOver = "
    blank.src = info.src;
    window.status='information'; return true"
    onMouseOut = "
    blank.src = blank2.src;
    window.status =' ';
    return true"> <img src="../../../images/comms%20news/three.jpg" border=0 width="30" height="34" name="info"></a></td>
    <td width="30"> <A HREF="press.html"
    onMouseOver = "
    blank.src = press.src;
    window.status='press'; return true"
    onMouseOut = "
    blank.src = blank2.src;
    window.status =' ';
    return true"> <img src="../../../images/comms%20news/four.jpg" border=0 width="30" height="34" name="press"></a></td>
    <td width="30"> <A HREF="marketing.html"
    onMouseOver = "
    blank.src = marketing.src;
    window.status='marketing'; return true"
    onMouseOut = "
    blank.src = blank2.src;
    window.status =' ';
    return true"> <img src="../../../images/comms%20news/five.jpg" border=0 width="30" height="34" name="marketing"></a></td>
    <td width="30"> <A HREF="web.html"
    onMouseOver = "
    blank.src = web.src;
    window.status='web'; return true"
    onMouseOut = "
    blank.src = blank2.src;
    window.status =' ';
    return true"> <img src="../../../images/comms%20news/six.jpg" border=0 width="30" height="34" name="web"></a></td>
    <td width="30"><a href="ni.htm"
    onMouseOver = "
    blank.src = ni.src;
    window.status='northern ireland'; return true"
    onMouseOut = "
    blank.src = blank2.src;
    window.status =' ';
    return true"><img src="../../../images/comms%20news/seven.jpg" width="30" height="34" name="ni" border="0"></a></td>
    <td width="30"><a href="scotland.htm"
    onMouseOver = "
    blank.src = scotland.src;
    window.status='scotland'; return true"
    onMouseOut = "
    blank.src = blank2.src;
    window.status =' ';
    return true"><img src="../../../images/comms%20news/eight.jpg" width="30" height="34" name="scotland" border="0"></a></td>
    <td width="37"><a href="wales.htm"
    onMouseOver = "
    blank.src = wales.src;
    window.status='wales'; return true"
    onMouseOut = "
    blank.src = blank2.src;
    window.status =' ';
    return true"><img src="../../../images/comms%20news/nine.jpg" width="37" height="34" name="wales" border="0"></a></td>
    <td width="163"><img src="../../../images/comms%20news/blank2.jpg" width="163" height="34"></td>
    </tr>
    <tr>
    <td colspan=10><img src="../../../images/comms%20news/phone1.gif" width="460" height="290"></td>
    </tr>
    </table> </td>
    </tr>
    <script language="JavaScript">

  2. #2
    pg for mild peril cow's Avatar
    Join Date
    Mar 2000
    Location
    nevada, usa
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    which image are you trying to swap? i pasted in that code and nothing is happening when i rollover the top menu images.

    you might want to just try using some other rollover code...
    "There's no justice like angry mob justice!" --Seymour Skinner

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2001
    Location
    London
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've tried about 3 different codes now. What's supposed to happen is that when you hover over the images named 'one, two, three' etc, then the about.src etc appear where blank.jpg is.

    Does that make any sense whatsoever?

  4. #4
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi jo,

    I'm going to presume you are a newbie. It's either that or I'm going blind since I do not see where you call any of the oft-duplicated functions (you seem to have 2 or more different sets of rollover functions).

    I would recommend you visit the following sites:

    http://www.htmlgoodies.com search for rollover in the javascript tutorial section -- then go through all of the tutorials

    http://www.javascriptcity.com -- go through the rollover tutorials there.

    a rollover function for what you want to do should look like the following:

    function swapImage(srcName, destName)
    {
    document[srcName].src = destName + '.gif';
    }

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2001
    Location
    London
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Vincent,

    You guessed right, I am a newbie!
    I'll give those tutorials a go!

    Jo


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
  •