locked
Can't get image popup on mouseover with EW4 behaviors RRS feed

  • Question

  • I'm trying to mouseover an image, get it to display (pop up) an enlarged version of the image, then close the popup on mouseout. 

    I've tried the behavior script following directions exactly, but it does not work in any browser I try, despite all running java just fine.

    Here's a link to my test page. The code is entirely generated by EW4.

    What am I missing?

    I need to put a series of images on a page and have each one display a larger version on mouseover, so I'm looking for a function that can pass/accept a variable.

    Thanks for any help.

    EdB

    Using Windows 7 and EW4; Chrome, IE8, Firefox.

    Tuesday, November 16, 2010 7:16 PM

Answers

  • Please don't be offended, but I'm laughing. This is one of the more interesting simple problems I've seen. Your image *is* swapping.  But since you explicitly set the height of the image tag , the browser is resizing the image, as instructed, and your larger image is now the same size as (and identical to) your smaller image.  Remove the height.

    Now, your large image is *way* too large.  Resize your images to the size you want to display them at before putting them in your web, and don't tell the browser how big <img> is supposed to be when you are swapping images of different sizes.  Don't forget to realize that the content below the image will move down and back up as the different images are displayed (or, rather, it will unless you do something wrong), so your page will jump quite a bit when you do this.

    • Proposed as answer by fcphdJim Tuesday, November 16, 2010 7:36 PM
    • Marked as answer by ejbSF Tuesday, November 16, 2010 7:39 PM
    Tuesday, November 16, 2010 7:31 PM

All replies

  • Please don't be offended, but I'm laughing. This is one of the more interesting simple problems I've seen. Your image *is* swapping.  But since you explicitly set the height of the image tag , the browser is resizing the image, as instructed, and your larger image is now the same size as (and identical to) your smaller image.  Remove the height.

    Now, your large image is *way* too large.  Resize your images to the size you want to display them at before putting them in your web, and don't tell the browser how big <img> is supposed to be when you are swapping images of different sizes.  Don't forget to realize that the content below the image will move down and back up as the different images are displayed (or, rather, it will unless you do something wrong), so your page will jump quite a bit when you do this.

    • Proposed as answer by fcphdJim Tuesday, November 16, 2010 7:36 PM
    • Marked as answer by ejbSF Tuesday, November 16, 2010 7:39 PM
    Tuesday, November 16, 2010 7:31 PM
  • Oh, I'm not offended, Kathy. I have a stellar ability to stumble over the "simple" (stupid?) stuff and breeze through the hard. A function of the aging brain?  Whatever...

    What you say makes perfect sense, except I didn't add the height attribute. The image was brought into the test page via EW's import->image function and I made no code changes whatever, so it must be defaulting to adding the height. All works as you say when I removed it.

    As to large image size, no worries. Those were two test pics I had available; the actual images will be carefully sized.

    Thanks for pointing out the obvious!

    EdB

    Tuesday, November 16, 2010 7:44 PM
  • Yes, images will by default get their heights/widths added when you drag them onto a page.  In general that's a good thing, not a problem.  This just happens to be an exception.

    Tuesday, November 16, 2010 7:49 PM