Mouseover for Images in DW8

Ask a Question related to Macromedia Dynamic HTML, Design and Development.

  1. #1

    Default Mouseover for Images in DW8

    I use the mouseover feature of DW8 on an XP Pro platform to create mouseovers
    of thumbnails that change a larger image on the page to an enlargement of the
    thumbnail. Alas, it does not seem to be working, so I have clearly done
    somwthing wrong.

    Below the closing head tag, I have:

    <body
    onLoad="MM_preloadImages('Photos/F16ToGoSunset3426012Th.jpg','Photos/F16ToGoSuns
    et3426012.jpg','Photos/Cockpit2492025Th.jpg','Photos/Cockpit2492025.jpg','Photos
    /ApacheMoon2492058Th.jpg','Photos/ApacheMoon2492058.jpg','Photos/SunsetSMJetA203
    122013Th.jpg','Photos/SunsetSMJetA203122013.jpg','Photos/CargoPlane2492036Th.jpg
    ','Photos/CargoPlane2492036.jpg','Photos/LiquidGold2492053Th.jpg','Photos/Liquid
    Gold2492053.jpg','Photos/CobraMissiles2492028Th.jpg','Photos/CobraMissiles249202
    8.jpg','Photos/Blimp2492038Th.jpg','Photos/Blimp2492038.jpg','Photos/F15Generals
    Spot2492031Th.jpg','Photos/F15GeneralsSpot2492031.jpg','Photos/F16Sunset2492056T
    h.jpg','Photos/F16Sunset2492056.jpg')">

    An example of one of the image codes is:

    <img src="Photos/ApacheMoon2492058Th.jpg" alt="apache helicopter military
    missile full moon night aviation [etc.]" name="ApacheMoon" width="120"
    height="80" hspace="9" vspace="9" border="1" align="middle" id="ApacheMoon"
    onMouseOver="MM_swapImage('ApacheMoon','','Photos/ApacheMoon2492058Th.jpg','Imag
    eLg','','Photos/ApacheMoon2492058.jpg',1);MM_swapImage('ApacheMoon ','','Photos/A
    pacheMoon2492058Th.jpg','ImageLg','','Photos/ApacheMoon2492058.jpg',1)"
    onMouseOut="MM_swapImgRestore()">

    My Image place holder is noted as:

    <img src="Photos/SunsetSMJetA203122013&copy;.jpg" name="ImageLg" width="324"
    height="324" id="ImageLg" style="background-color: #990000">

    Thanks for any help anyone can give.

    TBC

    ZAPphoto Guest

  2. Similar Questions and Discussions

    1. Message on mouseover
      Please link to the following for understand the question I have ----> http://www.ca.com/channel/cpp/ Please mouseover OEM or SMB or ESP etc and...
    2. mouseOver not rollOver
      On Flash 5, I want to go to the previous frame when the pointer is over the button. With rollover, it goes one frame at a time as I have to roll...
    3. Swapping images on mouseover - with a fade
      Hello Swapping images on mouseover is simple enough. I can do that. Does anyone know how to do it with a fade in/ fade out? Thanks! ...
    4. Best Mouseover script
      Hi all, A really simple question but that has caused some problem to me: What is the best script to use if I want the cursor to change to a...
    5. mouseOver?
      Hi I would like a movieclip to move when I the mouse is over (just a couple of pixels) and then move back again when the mouse is moved away. I...
  3. #2

    Default Re: Mouseover for Images in DW8

    <img src="Photos/ApacheMoon2492058Th.jpg" alt="apache helicopter military
    missile full moon night aviation [etc.]" name="ApacheMoon" width="120"
    height="80" hspace="9" vspace="9" border="1" align="middle" id="ApacheMoon"
    onMouseOver="MM_swapImage('ApacheMoon','','Photos/ApacheMoon2492058Th.jpg','Imag
    eLg','','Photos/ApacheMoon2492058.jpg',1);MM_swapImage('ApacheMoon ','','Photos/A
    pacheMoon2492058Th.jpg','ImageLg','','Photos/ApacheMoon2492058.jpg',1)"
    onMouseOut="MM_swapImgRestore()">

    Note - the behavior has been applied directly to the <img> tag. Don't do
    that. To make sure that you don't, when you are applying behaviors to
    images, always select the "<A> onMouseOver" event after closing the behavior
    dialog.

    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
    [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
    ==================


    "ZAPphoto" <webforumsuser@macromedia.com> wrote in message
    news:eh311o$nmn$1@forums.macromedia.com...
    >I use the mouseover feature of DW8 on an XP Pro platform to create
    >mouseovers
    > of thumbnails that change a larger image on the page to an enlargement of
    > the
    > thumbnail. Alas, it does not seem to be working, so I have clearly done
    > somwthing wrong.
    >
    > Below the closing head tag, I have:
    >
    > <body
    > onLoad="MM_preloadImages('Photos/F16ToGoSunset3426012Th.jpg','Photos/F16ToGoSuns
    > et3426012.jpg','Photos/Cockpit2492025Th.jpg','Photos/Cockpit2492025.jpg','Photos
    > /ApacheMoon2492058Th.jpg','Photos/ApacheMoon2492058.jpg','Photos/SunsetSMJetA203
    > 122013Th.jpg','Photos/SunsetSMJetA203122013.jpg','Photos/CargoPlane2492036Th.jpg
    > ','Photos/CargoPlane2492036.jpg','Photos/LiquidGold2492053Th.jpg','Photos/Liquid
    > Gold2492053.jpg','Photos/CobraMissiles2492028Th.jpg','Photos/CobraMissiles249202
    > 8.jpg','Photos/Blimp2492038Th.jpg','Photos/Blimp2492038.jpg','Photos/F15Generals
    > Spot2492031Th.jpg','Photos/F15GeneralsSpot2492031.jpg','Photos/F16Sunset2492056T
    > h.jpg','Photos/F16Sunset2492056.jpg')">
    >
    > An example of one of the image codes is:
    >
    > <img src="Photos/ApacheMoon2492058Th.jpg" alt="apache helicopter military
    > missile full moon night aviation [etc.]" name="ApacheMoon" width="120"
    > height="80" hspace="9" vspace="9" border="1" align="middle"
    > id="ApacheMoon"
    > onMouseOver="MM_swapImage('ApacheMoon','','Photos/ApacheMoon2492058Th.jpg','Imag
    > eLg','','Photos/ApacheMoon2492058.jpg',1);MM_swapImage('ApacheMoon ','','Photos/A
    > pacheMoon2492058Th.jpg','ImageLg','','Photos/ApacheMoon2492058.jpg',1)"
    > onMouseOut="MM_swapImgRestore()">
    >
    > My Image place holder is noted as:
    >
    > <img src="Photos/SunsetSMJetA203122013&copy;.jpg" name="ImageLg"
    > width="324"
    > height="324" id="ImageLg" style="background-color: #990000">
    >
    > Thanks for any help anyone can give.
    >
    > TBC
    >

    Murray *ACE* Guest

  4. #3

    Default Re: Mouseover for Images in DW8

    Murray, thanks. However, I appear to be missing a critical step...

    I start by selecting the image, then press the + and Swap Image under
    Behaviors. I go through the dialogue for the thumbnail and large images, then
    try to select <A> onMouseOver. I am not succeeding, so I am not selecting it
    in the proper manner. Sorry to be so dense on this one.

    TBC

    ZAPphoto Guest

  5. #4

    Default Re: Mouseover for Images in DW8

    Apply the behavior and click OK to close the dialog. Then, in the Behaviors
    panel, click on the arrow between the event name and the behavior name, and
    select "<A> onMouseOver" from the list.

    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
    [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
    ==================


    "ZAPphoto" <webforumsuser@macromedia.com> wrote in message
    news:eh33s5$r56$1@forums.macromedia.com...
    > Murray, thanks. However, I appear to be missing a critical step...
    >
    > I start by selecting the image, then press the + and Swap Image under
    > Behaviors. I go through the dialogue for the thumbnail and large images,
    > then
    > try to select <A> onMouseOver. I am not succeeding, so I am not selecting
    > it
    > in the proper manner. Sorry to be so dense on this one.
    >
    > TBC
    >

    Murray *ACE* Guest

  6. #5

    Default Re: Mouseover for Images in DW8

    Hmmm, first, I have no Apply button, only OK. However, I have succeeded in
    getting tha a tag involved:

    <a href="javascript:;"
    onmouseover="MM_swapImage('ApacheMoon','','Photos/ApacheMoon2492058Th.jpg','Imag
    eLg','','Photos/ApacheMoon2492058.jpg',1)"
    onmouseout="MM_swapImgRestore()"><img src="Photos/ApacheMoon2492058Th.jpg"
    alt="apache helicopter military missile full moon night aviation aeronautics
    stock &copy; Zann and Pinkerton/ZAP Photography. All Rights Reserved."
    name="ApacheMoon" width="120" height="80" hspace="9" vspace="9" border="1"
    align="middle" id="ApacheMoon"></a>

    However, it still does not work. MIs it something in the script tag?

    <script 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>

    Hopefully, we are getting closer.

    TBC

    ZAPphoto Guest

  7. #6

    Default Re: Mouseover for Images in DW8

    > I have no Apply button, only OK.

    Didn't say you did. I just said you apply the behavior to the selected
    image.

    Your code looks right. Perhaps you have several images on the page with the
    same name?
    > name="ApacheMoon"
    If that's not it, then post a link to the page, please.

    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
    [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
    ==================


    "ZAPphoto" <webforumsuser@macromedia.com> wrote in message
    news:eh3638$jt$1@forums.macromedia.com...
    > Hmmm, first, I have no Apply button, only OK. However, I have succeeded
    > in
    > getting tha a tag involved:
    >
    > <a href="javascript:;"
    > onmouseover="MM_swapImage('ApacheMoon','','Photos/ApacheMoon2492058Th.jpg','Imag
    > eLg','','Photos/ApacheMoon2492058.jpg',1)"
    > onmouseout="MM_swapImgRestore()"><img src="Photos/ApacheMoon2492058Th.jpg"
    > alt="apache helicopter military missile full moon night aviation
    > aeronautics
    > stock &copy; Zann and Pinkerton/ZAP Photography. All Rights Reserved."
    > name="ApacheMoon" width="120" height="80" hspace="9" vspace="9" border="1"
    > align="middle" id="ApacheMoon"></a>
    >
    > However, it still does not work. MIs it something in the script tag?
    >
    > <script 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>
    >
    > Hopefully, we are getting closer.
    >
    > TBC
    >

    Murray *ACE* Guest

  8. #7

    Default Re: Mouseover for Images in DW8

    Try this:

    [url]http://www.zapphoto.com/Aviation1.shtml[/url]

    Thanks,

    TBC
    ZAPphoto Guest

  9. #8

    Default Re: Mouseover for Images in DW8

    There was a problem with your javascript - not sure what. Try this -

    1. In the head of the page, find the js function called MM_findObj, and
    delete it completely.
    2. Select any of your thumb images, and double click on the "Image Swap" in
    the behaviors panel.
    3. Don't change anything - just click OK. That will force DW to re-write
    the javascript.

    It should work now. See here -

    [url]http://murraytestsite.com/Aviation1.htm[/url]

    It's likely that this was the problem all along, but the good news is that
    now you have a properly orchestrated behavior/event couple on those images.

    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
    [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
    ==================


    "ZAPphoto" <webforumsuser@macromedia.com> wrote in message
    news:eh39fa$4k9$1@forums.macromedia.com...
    > Try this:
    >
    > [url]http://www.zapphoto.com/Aviation1.shtml[/url]
    >
    > Thanks,
    >
    > TBC

    Murray *ACE* Guest

  10. #9

    Default Re: Mouseover for Images in DW8

    Murray,

    Yea and hip, hip, hooray. That did the trick. Muchas gracias, merci, danke, etc., etc.

    TBC
    ZAPphoto Guest

  11. #10

    Default Re: Mouseover for Images in DW8

    You're welcome.

    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
    [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
    ==================


    "ZAPphoto" <webforumsuser@macromedia.com> wrote in message
    news:eh3di2$9i8$1@forums.macromedia.com...
    > Murray,
    >
    > Yea and hip, hip, hooray. That did the trick. Muchas gracias, merci,
    > danke, etc., etc.
    >
    > TBC

    Murray *ACE* Guest

  12. #11

    Default Re: Mouseover for Images in DW8

    One final question, Murray...

    Is there a way to default to the <a> designation for onMouseOver and
    onMouseOut without going through the hassle of having to press the down arrow
    in Behaviors and change from the regular onMouseOver to <A>onMouseOver?

    If not, I think I will suggest it to Adobe.

    Again, many thanks,

    TBC

    ZAPphoto Guest

  13. #12

    Default Re: Mouseover for Images in DW8

    No. The selection of events is a complex algorithm that would be affected
    by this change in a way that might not be optimal. Which is gobbledy gook
    for 'it probably won't happen'! 8)

    You can edit the file that controls which events are selected when you apply
    behaviors - but I don't recommend you do.

    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
    [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
    ==================


    "ZAPphoto" <webforumsuser@macromedia.com> wrote in message
    news:eh52mi$ar3$1@forums.macromedia.com...
    > One final question, Murray...
    >
    > Is there a way to default to the <a> designation for onMouseOver and
    > onMouseOut without going through the hassle of having to press the down
    > arrow
    > in Behaviors and change from the regular onMouseOver to <A>onMouseOver?
    >
    > If not, I think I will suggest it to Adobe.
    >
    > Again, many thanks,
    >
    > TBC
    >

    Murray *ACE* Guest

  14. #13

    Default Re: Mouseover for Images in DW8

    Once again, thank you for your insights. Bummer!

    TBC
    ZAPphoto Guest

  15. #14

    Default Re: Mouseover for Images in DW8

    Good luck!

    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
    [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
    ==================


    "ZAPphoto" <webforumsuser@macromedia.com> wrote in message
    news:eh5pvt$a78$1@forums.macromedia.com...
    > Once again, thank you for your insights. Bummer!
    >
    > TBC

    Murray *ACE* Guest

Posting Permissions

  • You may not post new threads
  • You may post replies
  • You may not post attachments
  • You may not edit your posts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139