Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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. 😞
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Can you show the action triggered by the button which increases/decreases the size, please?
Copy link to clipboard
Copied
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);
}
}
};
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Remember: click boxes can only be used in a non-responsive project, not in a Fluid Box.
Copy link to clipboard
Copied
I would suggest re-creating this in Adobe Animate and export as an oam file. Which you can then import into captivate.
Because:
You could also build this as a standalone webpage and use webobjects to bring your page into Captivate.
Copy link to clipboard
Copied
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.