Solved

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

Posted on 2010-08-16
4
511 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
  • 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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
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).

831 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