Image Re-Sizes On Mouse Over

[#1]

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.

[#2]

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.

[#3]

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. 😞

[#4]

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.

[#5]

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 😞

[#6]

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

[#7]

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

[#8]

Was referring to that... since it is triggered by JS, looks like the problem is to be found there.

[#9]

So if the JavaScript is called from An assigned Captivate button the image will remain fixed and not be automatically reverted to the original size?

[#10]

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.

[#11]

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.

[#12]

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.

[#13]

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.

[#14]

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

[#15]

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.

[#16]

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.