Announcement

Collapse
No announcement yet.

yet another mouseover question

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    yet another mouseover question

    Hello again...

    OK, I've read just about everything which this forum contains concerning rollover images - and at one point, I even thought I had it!
    However, I've been playing about for the last six hours, trying to hard-code java into my html templates, and well... I'm ashamed to say... with tragic consequences.

    so, I'm currently restoring a recent backup, and am now forced to pick the brains of the Actinic crew once again.

    the page I've been working on is this one:
    http://www.newtrecords.co.uk/acatalo...s_Catalog.html

    the links you see... I want them to rollover.
    is there a way of doing this using the custom properties? - I've tried various examples of java code, it actually worked at one point!! - but truth is, I'm outa my depth and I really haven't got a clue what I'm doing.. LOL

    thanks & sorry for the unnecessary length of this post...
    still thinking of one...
    Tags: None
    #2
    Which links are you referring to? The navigation buttons on the left side all have the mouse over turning to blue in both Firefox and Explorer.

    The links at the bottom of the homepage are calling from "newtrecords,co.uk" - there is an errant comma in there - note the EXCEL mouseover is also calling the same image for both states "exel-catalog-1.jpg"


    Bikster
    SellerDeck Designs and Responsive Themes

    Comment

      #3
      yeah, it's those links down at the bottom. I'm having to update the site at the minute, and cos I needed to import a backup, the updates taking it's time.
      for now, I've just left the links as they were, without any rollover images.

      see, it's all this java code - I'm sure I'd be able to work it all out eventually, but from what I've learned from reading everything here, I'm guessing there's probably a much safer, and easier way to go about rollover images?

      this is pretty much how I figure it works:

      <script>
      <!--
      first=new Image
      first.src="images/exel-catalog-1.jpg"

      second=new Image
      second.src="images/exel-catalog-2.jpg"
      // -->
      </script>

      </head>
      <body bgcolor="#000000" text="#FFFFFF" link="3333FF" vlink="3333FF" alink="3333CC">

      <center>

      <a href="http://newtrecords.co.uk/catweb/newtcata105.xls"
      OnMouseOut="monitor.src=first.src"
      OnMouseOver="monitor.src=second.src">
      <img src="images/exel-catalog-1.jpg" name="monitor" border="0"></a>

      </center>
      </body>
      </html>
      see, I've been attempting to intergrate that with my templates - and quite frankly, it worries me - LOL
      still thinking of one...

      Comment

        #4
        Hi Paul,

        you may want to consider the following code as generated by DreamWeaver - this makes adding new "over" images much easier and also takes into account slight difference in the way Internet Explorer and Netscape browsers handle the image names - it is also a good idea to specify the actual size of the images:

        into the head copy (between the *********):

        *************

        <script language="JavaScript" type="text/JavaScript">
        <!--
        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_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_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>

        ****************************

        The above handles the mouseover routine - next in the <body> tag add your "over" version 2 images:

        <body onLoad="MM_preloadImages('images/OVER1.jpg','images/OVER2.jpg)">

        to add more "over" images to the pre-load simply add and seperate with a comma between single quote marks as above

        The image and the link to the page should look like:

        <a href="index.htm"><img src="images/OUT1.jpg" name="Image1" width="100" height="374" border="0" id="Image1" onMouseOver="MM_swapImage('Image1','','images/OVER1.jpg',1)" onMouseOut="MM_swapImgRestore()"></a>

        this swaps the image called Image1 (file OUT1.jpg) for OVER1.jpg - repeat for Image2, Image3 etc - you can call the "name" and "id" soemthing more suitable so you can remember which is which - obviously the width and height values will change to your image sizes and you should use the same size image for both states.


        Bikster
        SellerDeck Designs and Responsive Themes

        Comment

        Previous template Next
        Working...
        X