Skip to main content
R
romainj
Known Participant
October 14, 2019
Question

Image Re-Sizes On Mouse Over

  • October 14, 2019
  • 6 replies
  • 1034 views

We have a module that makes use of JavaScript to resize an image with user input. The image increases and decreases depending on the button pressed. The only problem that we have is that when testing we found that mousing over the resized image causes it to return to its original size. We can't find where this mouse over behaviour is being controlled or how to stop it from happening. Does anyone have any idea what might be causing this behaviour?

Thanks for any help you can provide.

    This topic has been closed for replies.

    6 replies

    chrismay_at_delta17095116
    chrismay_at_delta17095116
    Inspiring
    November 1, 2019

    I would suggest re-creating this in Adobe Animate and export as an oam file. Which you can then import into captivate. 

     

    Because:

    • It would be easier to program, Animate is a much more robust tool for this level of interactivity.
    • Captivate will re-sample your images when you publish the file. Even if you put a large file on the stage and resize it, Captivate will resize it to the size on the stage, when you zoom in a lot, you will see a lot of pixelization.
    • You can more easily re-use the oam in other sites or lessons.

     

    You could also build this as a standalone webpage and use webobjects to bring your page into Captivate.

    R
    romainjAuthor
    Known Participant
    November 6, 2019

    Thanks for the advice. I ended up not using JavaScript to change the size of the image. Everything was done in Captivate and the image did not resize. Will use Animate the next time. Thanks again for your time and assistance.

    Stagprime2687219
    Stagprime2687219
    Legend
    November 1, 2019

    I have not discovered a code fix for this but I did find a way to prevent the image from snapping back into its original space.

     

    I found that if I take a click box and make sure that it is sized the same or larger than the image and place it over the top of the image in it's original space that the image does not snap back.

     

    I set the success parameter to No Action and remove the hand cursor and click sound.

    Maybe this would work for you as well...

    Perhaps worth a try.

    Lilybiri
    Lilybiri
    Legend
    November 1, 2019

    Remember: click boxes can only be used in a non-responsive project, not in a Fluid Box.

    Stagprime2687219
    Stagprime2687219
    Legend
    October 15, 2019

    That is a lot of code you have there.

    I was able to replicate your issue with a single line of code.

     

    $("#myImagec").animate({height: "+=15px",width: "+=20px"});

     

    I placed this on the increase button and it will increase the size of the image by 15 pixels high and 20 pixels wide each time the button is pressed.

     

    But that is beside the point.

     

    I have not found a workaround yet - but I think it may have something to do with the way Captivate packages up the images. I think we need to find out how to address the image itself rather than the canvas or div elements which carry the name of the image in some way. I will not be able to return to this until evening.

    R
    romainjAuthor
    Known Participant
    October 15, 2019
    Awesome. Think the reason for all the code was it gave ability for continuous sizing that started on mousedown and ended on mouse up. Additionally, threw in listener for touch events. Will have to update. Thanks for all of your help.
    R
    romainjAuthor
    Known Participant
    October 20, 2019

    It would appear that the issue is that because the change to the image size is not part of an action actually completed in Captivate, but is done using JavaScript, it is automatically resized by some code present in Captivate. Using the scale effect in Captivate allows for the resizing of the image without having it snap back to its original size because of a mouse over. This does not allow for continuous resizing, however as the scale effect needs a click each time.

    Lilybiri
    Lilybiri
    Legend
    October 15, 2019

    Can you show the action triggered by the button which increases/decreases the size, please?

    R
    romainjAuthor
    Known Participant
    October 15, 2019

    There is no action in Captivate per se. We set up an event listener and sent a number of parameters. You can see the published module at https://www.infinitygroup.ca/testing/imageanalysis/analysis/ . Once the module has loaded click the play button, then the orange "Start" button. Clicking on the generic gray "Button" will take you to the slide where the zoom in and zoom out buttons are used. The Javascript code used is as follows:

     

    function zoomButtonAction(zoomInButton, zoomOutButton, imageToZoom, imageHeight, imagewidth) {

    document.getElementById(zoomInButton).addEventListener("mousedown", mouseDownZoomInTimer);
    document.getElementById(zoomInButton).addEventListener("mouseup", zoomMouseUpStopTimer);
    document.getElementById(zoomOutButton).addEventListener("mousedown", mouseDownZoomOutTimer);
    document.getElementById(zoomOutButton).addEventListener("mouseup", zoomMouseUpStopTimer);
    document.getElementById(zoomInButton).addEventListener("touchstart", mouseDownZoomInTimer);
    document.getElementById(zoomInButton).addEventListener("touchend", zoomMouseUpStopTimer);
    document.getElementById(zoomOutButton).addEventListener("touchstart", mouseDownZoomOutTimer);
    document.getElementById(zoomOutButton).addEventListener("touchend", zoomMouseUpStopTimer);

    var intervalZoomCount = 10;
    var currentImageSizeW = imagewidth;
    var currentImageSizeH = imageHeight;

    var thisElement = document.getElementById(imageToZoom + "c");


    function mouseDownZoomInTimer() {
    infinityTimer = setInterval(zoomImageIn, 100);
    console.log("Zoom UP Button Down");
    }

    function mouseDownZoomOutTimer() {
    infinityTimer = setInterval(zoomImageOut, 100);
    console.log("Zoom Down Button Down");
    }

    function zoomMouseUpStopTimer() {
    console.log("Left Button Up and Timer Stopped at: " + intervalZoomCount);
    clearInterval(infinityTimer);
    currentImageSizeH = parseInt(thisElement.style.height, 10);
    currentImageSizeW = parseInt(thisElement.style.width, 10);
    console.log("The current Image size is w: " + currentImageSizeW+", "+ currentImageSizeH);
    }

    function zoomImageIn() {
    if (parseInt(thisElement.style.width, 10) >=600) {
    thisElement.style.height = "1297px";
    thisElement.style.width = "600px";
    clearInterval(infinityTimer);

    } else {
    intervalZoomCount=Math.abs(intervalZoomCount);
    thisElement.style.height = currentImageSizeH + (currentImageSizeH/currentImageSizeW)*intervalZoomCount + "px";
    thisElement.style.width = currentImageSizeW + intervalZoomCount + "px";
    intervalZoomCount+10;
    console.log(intervalZoomCount);
    }
    }

    function zoomImageOut() {

    if (parseInt(thisElement.style.width, 10) <= 290) {
    thisElement.style.height = "627px";
    thisElement.style.width = "290px";
    clearInterval(infinityTimer);

    } else {
    intervalZoomCount=Math.abs(intervalZoomCount);
    thisElement.style.height = currentImageSizeH - (currentImageSizeH/currentImageSizeW)*intervalZoomCount + "px";
    thisElement.style.width = currentImageSizeW - intervalZoomCount + "px";
    intervalZoomCount-10;
    console.log(intervalZoomCount);
    }
    }
    };

     

    Lilybiri
    Lilybiri
    Legend
    October 15, 2019
    Was referring to that... since it is triggered by JS, looks like the problem is to be found there.
    Stagprime2687219
    Stagprime2687219
    Legend
    October 15, 2019

    When you say that the image increases or decreases based on the button pressed... 

    Are you referring to a button on the Captivate stage or a button on the keyboard?

     

    Update:  I was able to replicate what you are seeing using buttons on the stage.
    The effect is stable with a smartshape but does not seem to hold with an image.

     

    I will see if I am able to figure anything out.

    R
    romainjAuthor
    Known Participant
    October 15, 2019
    Hi Stagprime. Yes I am using a button on the stage. Thanks for your help. Doesn't seem to be a reason for it that I can figure out 😞
    Paul Wilson CTDP
    Community Expert
    Paul Wilson CTDPCommunity Expert
    Community Expert
    October 15, 2019

    Is the image being used as a button and therefore has rollover and down states in addition to a normal state? This could be resetting the image back to its normal state. Perhaps deleting any rollover and down states (if this is the case) might solve the problem.

    Paul Wilson, CTDP
    R
    romainjAuthor
    Known Participant
    October 15, 2019

    Hey Paul. Thanks for the reply. It is just a regular .jpg image. Not being used as a button or anything else. There is only one state. Although there is a retain state on slide revisit checkbox that is associated with the image. Tried checking that but that had no effect either. 😞

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices