Larger image on mouseover.

Discuss, ask and suggest about Usability and Accessability with CMS Made Simple
Locked
gully
Forum Members
Forum Members
Posts: 27
Joined: Sun Oct 17, 2010 11:43 am

Larger image on mouseover.

Post by gully »

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!
mrenigma
Forum Members
Forum Members
Posts: 48
Joined: Fri Aug 05, 2011 3:43 pm
Location: London, United Kingdom

Re: Larger image on mouseover.

Post by mrenigma »

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/
~ Life is like water, every movement you make changes the way it flows ~
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: Larger image on mouseover.

Post by Dr.CSS »

That can be done with CSS, it was done like that one the theme site for a while...
gully
Forum Members
Forum Members
Posts: 27
Joined: Sun Oct 17, 2010 11:43 am

Re: Larger image on mouseover.

Post by gully »

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 5907 times
Larrybear
New Member
New Member
Posts: 6
Joined: Tue Feb 12, 2013 5:39 pm

Re: Larger image on mouseover.

Post by Larrybear »

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

Return to “[locked] Accessability and Usability”