Solved

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

Posted on 2010-08-16
4
524 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 500 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.

729 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