mm_swapimage doesn't work

[raoulm26744459]

I have created an HTML page using Dreamweaver. In this page, there is a thumbnail, and I would like a larger image to appear when the mouse hovers over the thumbnail. No hover image appears. This does not work in MS Edge and in Google Chrome. None of the other posts to this forum appear to have answered this question.

The URL of the page is Friends of Calligraphy Alphabet Back Issues - Carl Rohrs, Editor

Thank you

[WolfShade]

Personally, I detest "hover" actions that make something magnified, or appear with other options.  Best left to a click event as opposed to hover.  Honestly.

As far as the MM swap image function, if you can write your own you'd be better off.  The mm_swapimage function is out of date for modern browsers.  OR, you could bring it into the 21st century and go with a CSS solution, no javascript.  That'd be the better way to go, IMHO.

HTH,

^ _ ^

PS:  "hover" doesn't exist in the mobile/tablet world, anyway.

[osgood_]

I agree with Wolf.

At the moment you CAN click on the images and they enlarge in their own external window. A Modal window, one which opens up within the parent browser window would be better, but an extrenal window is better than nothing.

I would just add a little magnifying glass icon as part of the image or over the image, near  the image so users know to click on them if they require to view a larger version.

[WolfShade]

osgood_  wrote

A Modal window, one which opens up within the parent browser window would be better, but an extrenal window is better than nothing.

Agreed, but an external window (aka popup) will be defeated if anyone is using a browsers popup blocker.

V/r,

^ _ ^

[Nancy OShea]

WolfShade  wrote

osgood_   wrote

A Modal window, one which opens up within the parent browser window would be better, but an extrenal window is better than nothing.

Agreed, but an external window (aka popup) will be defeated if anyone is using a browsers popup blocker.

V/r,

^ _ ^

I have pop-up blockers enabled.  The onlckick event is not blocked if user initiates it.   But yes,  I think a Modal window would look nicer. 

[osgood_]

WolfShade  wrote

osgood_   wrote

A Modal window, one which opens up within the parent browser window would be better, but an extrenal window is better than nothing.

Agreed, but an external window (aka popup) will be defeated if anyone is using a browsers popup blocker.

V/r,

^ _ ^

Is a long time since I used such practices..........so I wouldn't know........but its something to consider along with the page not being mobile 'friendly'.

It looks to me like the whole concept might need re-working but that is up to the OP to decide if they have the time or the client has the budget, eventually every website which is more than about 3-4 years old becomes something of a hack as you begin to add and remove content and newer techniques arrive.

[Nancy OShea]

I see the large image on CLICK in Firefox, MS Edge & Chrome.

Mouseover behaviors don't do anything on touch screen devices because there is no mouse.

[Nancy OShea · Accepted solution]

This site looks like it was built quite a while ago with old HTML and table-based layouts.  Just so you know,  having a mobile friendly web site is not just practical, it's essential because there are more mobile device users now than ever before.

https://search.google.com/test/mobile-friendly

[pziecina]

first - I am very surprised Dw still has such behaviours. They got rid of the Spry framework because it was outdated, yet kept these!!

On a touch screen all the user has to do to enlarge an image is double tap or pinch to zoom, so for touch screen users the only fallback is a message saying 'pinch to zoom'.

[Nancy OShea]

pziecina  wrote

On a touch screen all the user has to do to enlarge an image is double tap or pinch to zoom, so for touch screen users the only fallback is a message saying 'pinch to zoom'.

The trouble is a  low res thumbnail image won't look good when zoomed.

[pziecina]

https://forums.adobe.com/people/Nancy+OShea  wrote

The trouble is a  low res thumbnail image won't look good when zoomed.

Depends on how the image was optimised for web, and the zoom factor applied.

One could always use the browsers built in css image optimization routines, which are probably being applied by most mobile browsers anyway, if only 1x or 2x images are being used.

[pziecina]

Instead of using outdated Dw javascript behaviours you could use -

#imageincrease {

    -webkit-transition: all 3s ease-in-out;

    -webkit-transform-origin: -2em -2em;

    -moz-transition: all 3s ease-in-out;

    -moz-transform-origin: -0.3em -0.2em;

    -ms-transition: all 3s ease-in-out;

    -ms-transform-origin: -0.3em -0.2em;

    transition: all 3s ease-in-out;

    transform-origin: -0.3em -0.2em;

}

#imageincrease:hover {

    -webkit-transform: scale(2.0, 2.0);

    -moz-transform: scale(2.0, 2.0);

    -ms-transform: scale(2.0, 2.0);

    transform:: scale(2.0, 2.0);

}

Give the image an id of imageincrease, and copy the css to your css file. The image will double in size on hover over a 3 second time period.