SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Dec 2001
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 events for Mouse over?

    I would like to make the onMouseOver event for an IMG swap 2 images. I currently have a javascript function for this (I didnt write it) which just inputs which image you want to swap and what with. I want to swap 2 images and not just one.

    <IMG SRC="themes/$thename/images/bottomnav_02.gif" WIDTH="82" HEIGHT="23" name="home" border="0" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('topics','','themes/$thename/images/bottomnav_02on.gif',1)">

    There is the code for the IMG tag, now the part where it does the onMouseOver it changes out the image of my choice. It calls the MM_swapImage. I want to call that function twice with diffrent parameters. I tried adding another onMouseOver line after the first one, but didnt work. Is there a way to do this in HTML? Hope that made sense .

    Thanks.

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is very similar to the code that Dreamweaver produces.
    By quickly putting together something I found that DW puts multiple rollovers together like this:


    onMouseOver="MM_swapImage('firstimgname','','firstimgsrc.gif','secondimagename','','secondimagesrc.gif',1)"



    Note:
    All the quotes between the parentheses ( ) are single-quotes/apostrophes.


    As you can see DW handles multiple image swaps by simply separating them with two single-quotes and a comma then repeating the format of the first image swap command.

    Just swap 'firstimgname' and 'secondimgname' to the names of the two images on your page that you want to have changed by the event.

    Then just swap 'firstimgsrc.gif' and 'secondimgsrc.gif' for the urls of the two images on your page that you want to the event to change them to.

    From tests I can say that the number 1 at the end of the command never changes no matter how many image swaps you attach to the event.


    Not the most pragmatic approach, but I hope it proves just as helpful to you.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    SitePoint Member
    Join Date
    Dec 2001
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I couldnt get it to work. The MM_swapImage is a custom function. Just wondering if there is a way in HTML or DHTML code to do 2 mouse over events so I can call the function twice.

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as I can tell attaching an event twice to the same item causes the second instance to be ignored.
    It will also probably throw up a Javascript error alert (if you have alerts switched on).

    Are you using a hand-coded function?
    Or are you using a wysiwyg app like Dreamweaver?

    How is the 'custom' code you are using different from the many brief varieties of rollover code available?
    What is making it 'custom'?

    ---

    Fwiw...

    The swap image function that Dreamweaver uses/creates is:

    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];}
    }


    The restore function is:

    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;
    }


    ...both of which rely in part on the function...

    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;
    }


    The onMouseOver event is used as in my previous post and can be used for multiples by expanding it as I described.
    The restore (swap back) function is called on the onMouseOut event like so:

    onMouseOut="MM_swapImgRestore()"

    Perhaps if man-handling all this code is bending your head a bit it may be simpler for you to use something like Dreamweaver to get the thing working for now.
    Alternatively, there are rollover script on many javascript script download sites many of which show you how to use them on multiple images.

    Sorry I couldn't be more help.
    (Maybe a real javascript whiz will decide to pop by and answer your prayers)
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can call as many functions as you want in an event handler, just put semi-colons between them.

    such as onmouseover = "blahblah(); hahah();"
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  6. #6
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem here Aspen is that tibbs doesn't want to call two different functions on one event.
    S/he wants to call the same function (by name) but with different specifics (i.e. the same image swap function, but used twice to change two different images at the same time)

    What s/he's looking for is a way to compound the script.

    If thesame function name is called more than once in an onMouseOver it can often 'break' some of the other functions called by onMouseOut events (such as a restore function which may only restore one of the images changed by the onMouseOver event)

    Fwiw, in my previous post I meant that attaching more than one instance of an event to an item (i.e. <a href="#" onClick="myFunction()" onClick="myOtherFunction()">) creates errors.

    Tibbs claims to be using a custom script and has yet to show us, so it's hard to give advice about tweaking the script to handle multiple image swaps.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  7. #7
    SitePoint Member
    Join Date
    Dec 2001
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I checked the script I am using and its the same as the dreamweaver code. Sorry I didnt realize this was a common function (was part of a theme I am modifying). Heres the code again:

    <!--
    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.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);
    if(!x && document.getElementById) x=document.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];}
    }
    //-->

    Thanks for taking a look!

  8. #8
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do I take it that the problem is solved?

    If you have the opportunity to use Dreamweaver then I'd say let it do the work for you.

    I have used DW to produce the kind of rollovers you are seeking without problem.

    Doing it in DW is really straight-forward.
    You just set up all the images to be swapped in the same dialog box rather than set up one then repeat the process.

    The code I posted in my first response should work perfectly with the function code that you are using and will be structurally identical to DW's.

    Be sure that you are changing the image names and source files to the correct ones.
    It should all work perfectly then.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


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
  •