Highlighted

Image Re-Sizes On Mouse Over

Community Beginner ,
Oct 14, 2019

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.

Views

208

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Image Re-Sizes On Mouse Over

Community Beginner ,
Oct 14, 2019

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.

Views

209

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 14, 2019 0
Adobe Community Professional ,
Oct 14, 2019

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.

Paul Wilson, CTDP | https://captivateteacher.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2019 0
Community Beginner ,
Oct 14, 2019

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2019 0
Advocate ,
Oct 14, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2019 0
Community Beginner ,
Oct 15, 2019

Copy link to clipboard

Copied

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 😞

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 15, 2019 0
Most Valuable Participant ,
Oct 15, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 15, 2019 0
Community Beginner ,
Oct 15, 2019

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

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 15, 2019 0
Most Valuable Participant ,
Oct 15, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 15, 2019 0
Community Beginner ,
Oct 15, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 15, 2019 0
Advocate ,
Oct 15, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 15, 2019 0
Community Beginner ,
Oct 15, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 15, 2019 0
Community Beginner ,
Oct 20, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 20, 2019 0
Advocate ,
Nov 01, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2019 0
Most Valuable Participant ,
Nov 01, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2019 0