?
Solved

Use of the IE CSS Zoom property .... Getting it to work??

Posted on 2010-08-16
4
Medium Priority
?
535 Views
Last Modified: 2013-12-08
Hi,

I am wanting to put a hyperlinked image on my page that zooms in and out like Ctrl+ and Ctrl-. Internet Explorer is being used in my project. I have a great JS solution for this (Thanks MPlungian), but I have also seen references to a proprietary IE CSS property called Zoom. I have tried it, but without sucess.

Any ideas for some working code greatly appreciated.

Thanks,

Sam
0
Comment
Question by:SamJolly
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 4

Expert Comment

by:Morrisproject
ID: 33444330
The CSS zoom property is yet to be released. It is part of CSS3 I believe, so Internet Explorer will not handle it...

You could try something like:
<P onmouseover="this.style.zoom='200%'"
   onmouseout="this.style.zoom='normal'">

I am not sure what you are trying for, so not sure how much that will help :-)
0
 

Author Comment

by:SamJolly
ID: 33444457
Thanks for the feedback. Basically I am trying to provide a "+" and a "-" graphic icon that users can click on to zoom in and zoom out of a web page that I have which contains a large image... Actually it is a large process diagram. I can do this well with CTRL+ and CTRL- and therefore want an emulation of this. The need is derived from concern that some users would not understand CTRL+ and CTRL-.

Thanks,

Sam
0
 
LVL 4

Accepted Solution

by:
Morrisproject earned 2000 total points
ID: 33445234
I would use a jquery plugin for the effect you wish.

This gives the user the option to zoom on the images. Here are some examples.
http://lab.gianiaz.com/jquery/gzoom/
http://css-tricks.com/anythingzoomer-jquery-plugin/
http://www.mind-projects.it/jqzoom_v10
http://motherrussia.polyester.se/jquery/panview/

Or try re-using my example like
<img onmouseover="this.style.zoom='200%'" src=yourimage.jpg" onmouseout="this.style.zoom='normal'"/>

CSS Zoom would probably not be the best option here. I would recommend the top jquery plugin, nice looking, obvious to use etc.

Thanks
0
 

Author Closing Comment

by:SamJolly
ID: 33506406
thanks. Apologies for the delaying in marking.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question