SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Caryn's Avatar
    Join Date
    Aug 2002
    Location
    Sydney, Australia
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Rollovers & Browser Compatability

    Does any know of a script that will change 2 images on rollover of one of them, and that is also cross-browser compatable?

  2. #2
    SitePoint Addict
    Join Date
    May 2003
    Location
    UK
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Caryn,

    By multiple rollovers, do you mean rolling over one item will change two items ?? If so, I have a sript that a friend created for me, but I will need some time to find it in my chaotic mess of a computer !!

  3. #3
    SitePoint Addict
    Join Date
    May 2003
    Location
    UK
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh and as far as cross compatibility, I have never had any problems reported with it, but that is no guarantee !!

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    UK
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is what I am looking for too! can you post the script or email it to me plz?

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    UK
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    onMouseOut="MM_swapImgRestore();MM_startTimeout();"

    use a ; and it works!

  6. #6
    SitePoint Addict
    Join Date
    May 2003
    Location
    UK
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, it took me a while to find the script, and it is failry old now, so i am not sure how up to date it is, but I know it works fine in most major browsers.

    Javascript :

    Code:
    if (document.images){
    
                 blank = new Image(280,240);
                 blank.src = "comp_descrip.gif";
    
                 menu_a_0 = new Image(150,30);
                 menu_a_0.src = "network.gif";
                 menu_a_1 = new Image(150,30);
                 menu_a_1.src = "network(-).gif";
                 msg_a = new Image(280,240);
                 msg_a.src = "network_d.gif";
    
                 menu_b_0 = new Image(150,30);
                 menu_b_0.src = "hosting.gif";
                 menu_b_1 = new Image(150,30);
                 menu_b_1.src = "hosting(-).gif";
                 msg_b = new Image(280,240);
                 msg_b.src = "hosting_d.gif";
    
    }
    
         function giFlip(imgName, mouseMov){
           if (document.images){
    
             if (mouseMov == "over"){
                document [imgName].src = eval("menu_" + imgName + "_1.src");
                document ['msg_box'].src = eval("msg_" + imgName + ".src");
             }
    
             if (mouseMov == "out"){
                document [imgName].src = eval("menu_" + imgName + "_0.src");
                document ['msg_box'].src = eval("blank.src");
             }
           }
         }
    HTML :

    Code:
    <a href="networks.html" title="Network Installation" onMouseOver="giFlip('a', 'over')" onMouseOut="giFlip('a', 'out')"><img name="a" border=0 src="network.gif" width="150 height="30"></a><a href="hosting.html" title="Internet Hosting" onMouseOver="giFlip('b', 'over')" onMouseOut="giFlip('b', 'out')"><img name="b" border=0 src="hosting.gif" width="150 height="30"></a>
    Wherever you want the related image to appear add the following HTML :

    Code:
    <img src="comp_descrip.gif" width=280 height=240 name="msg_box">
    Feel free to edit the script however you want, this was a script created for me, so use it however you want, but if you resell it, cut me in on the profits !!!!


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
  •