Help With Image Flip/Map

The image flip that I have works fine, it's just that when I move my cursor from image to image, the entire image flashes white, so it looks all broken up.

http://www.freewebz.com/idealhealth/products.html

Is there anything I can do to fix this?

Please help an amateur out! Thanks!


Comments

  • Try this:

    in each of the -tags you have the eventhandler
    onMouseOut="original()"

    Remove all those and place the onMouseOut="original()"
    in the image tag instead.
    That way the inner circle will only blank when you move the mouse outside of the whole center area.
    /Chris
  • : Try this:
    :
    : in each of the -tags you have the eventhandler
    : onMouseOut="original()"
    :
    : Remove all those and place the onMouseOut="original()"
    : in the image tag instead.
    : That way the inner circle will only blank when you move the mouse outside of the whole center area.
    : /Chris
    :

    Hey man! Thanks so much for replying so quickly! I understand what you are talking about- except I don't know what image tag to put the onMouseOut="original()"

    Thanks again,
    Christina
  • : : Try this:
    : :
    : : in each of the -tags you have the eventhandler
    : : onMouseOut="original()"
    : :
    : : Remove all those and place the onMouseOut="original()"
    : : in the image tag instead.
    : : That way the inner circle will only blank when you move the mouse outside of the whole center area.
    : : /Chris
    : :
    :
    : Hey man! Thanks so much for replying so quickly! I understand what you are talking about- except I don't know what image tag to put the onMouseOut="original()"
    :
    : Thanks again,
    : Christina
    :
    Also, I have 3 other images that I need to go outside of the circle (image map) that also have mouse overs- but I am not sure how to add the functions to the page. Every time I try, things mess up. Do you have a quick pointer for that as well?

  • Put the ONMOUSE inside this IMG tag
    image

    As to your other question i don't really understand what you mean, so please elaborate your question and I'll help you.

    /Chris
  • : Put the ONMOUSE inside this IMG tag
    : image
    :
    : As to your other question i don't really understand what you mean, so please elaborate your question and I'll help you.
    :
    : /Chris
    :


    Hey thanks again! I have 3 separate single images that I want to display on the page. I want them each to have a roll over (image flip) as well. These images are completely separate from the ImageMap circle. I have tried adding the functions for the 3 individual images, but it screws things up with the ImageMap and/or the roll overs won't work for the 3 images. I am looking for a way to add the functions in there so all the roll overs for the page will work.

    I hope that makes more sense.

  • So the rollovers of these three new pics, should they also present a gif in the circle?
    In that case, for each of the new images, just create a new entry of the following

    Image11 = new Image(618,612)
    Image11.src = "picToShow.gif"
    function zoomout10() {
    document.circle.src = Image11.src; return true;
    }
    and put Onmouseover="zoomout10();" onmouseout="original" in the new pic
    But maybe I am still misunderstanding you?

  • : So the rollovers of these three new pics, should they also present a gif in the circle?
    : In that case, for each of the new images, just create a new entry of the following
    :
    : Image11 = new Image(618,612)
    : Image11.src = "picToShow.gif"
    : function zoomout10() {
    : document.circle.src = Image11.src; return true;
    : }
    : and put Onmouseover="zoomout10();" onmouseout="original" in the new pic
    : But maybe I am still misunderstanding you?
    :
    :
    Well, if you could, please take a look at the page now. I have the 3 images up. I want the roll over image to display in place of the image where it is, outside the circle. For instance, CUSTOM.GIF is there, and when I put my mouse over it, in place of it, I want CUSTOM1.GIF to display- which is the same size as CUSTOM.GIF. I want to do this for the other 2 images as well.

    If you view the source, you can kind of see where I am having problems. I tried to mess around with the custom, and it's just not coming out right. But I don't see where I went wrong.

    http://www.freewebz.com/idealhealth/products.html

    I can't thank you enough for helping me!

  • Short explanation. In the funtion zoomout10(), document.Image11 refers to a tag named "Image11" and Image12 refers to an object of type Image

    But you havent named your new image-tag, so to solve the problem, just put NAME="image11" in it, like this:

    image

    Try it now
    /Chris
  • : Short explanation. In the funtion zoomout10(), document.Image11 refers to a tag named "Image11" and Image12 refers to an object of type Image
    :
    : But you havent named your new image-tag, so to solve the problem, just put NAME="image11" in it, like this:
    :
    : image
    :
    : Try it now
    : /Chris
    :

    I tried it but it's still not working? Could I have messed up somewhere else?

  • My mistake.

    First name the image with ID= instead of NAME=
    Also, give another name than image11, since that will be confused with the image-object that is named the same. Name it img11 instead.

    image

    And furthermore, instead of document.image11
    use document.all.img11

  • : My mistake.
    :
    : First name the image with ID= instead of NAME=
    : Also, give another name than image11, since that will be confused with the image-object that is named the same. Name it img11 instead.
    :
    : image
    :
    : And furthermore, instead of document.image11
    : use document.all.img11
    :
    :

    YOU ARE THE BEST!!!!!!!!!! Everything works, and that is all the help I needed, THANK YOU SO MUCH! YOU ROCK!

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories