CMS Made Simple Forums
https://forum.cmsmadesimple.org/

Larger image on mouseover.
https://forum.cmsmadesimple.org/viewtopic.php?f=23&t=63127
Page 1 of 1

Author:  gully [ Mon Sep 24, 2012 3:07 pm ]
Post subject:  Larger image on mouseover.

Needed for visually impaired visitors.

At
http://www.opensourcecms.com/scripts/de ... scriptid=9

...move your mouse over the CMSMS screen capture and a larger image is presented until mouseout.

Does CMSMS have something (tag or ...) that could replicate this behaviour? Thanks!

Author:  mrenigma [ Mon Sep 24, 2012 7:41 pm ]
Post subject:  Re: Larger image on mouseover.

There isn't a tag really in CMSMS to handle that sort of thing.

You are really looking for a JavaScript solution, for instance this jQuery solution using the magnifier concept:

http://jdbartlett.com/loupe/

Author:  Dr.CSS [ Tue Sep 25, 2012 2:20 am ]
Post subject:  Re: Larger image on mouseover.

That can be done with CSS, it was done like that one the theme site for a while...

Author:  gully [ Tue Sep 25, 2012 11:38 am ]
Post subject:  Re: Larger image on mouseover.

Thanks for your assistance. I'm investigating 'magnify', and some 'lightbox' ideas. ie.: http://leandrovieira.com/projects/jquery/lightbox/

In the meantime, a TinyMCE quick and dirty option came to mind -- NOT elegant for sure. Insert/Edit Image > Advanced > Alternative Image (see attached).

And I found out TinyMCE has some neat plugins. Hoping this might be the route. http://www.tinymce.com

Thanks again. :)

Attachments:
lg-img-onmouseover.png
lg-img-onmouseover.png [ 3.41 KiB | Viewed 4375 times ]

Author:  Larrybear [ Fri Feb 22, 2013 12:35 pm ]
Post subject:  Re: Larger image on mouseover.

You can do this easy with CSS. Here you can find a easy guide:

http://www.webmasterworld.com/css/3742910.htm

Or you can use CSS3, imo CSS3 is easier, but not so great support for older browsers. With CSS3 you use the transition and transform tags.

Page 1 of 1 All times are UTC
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/