Solved

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

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

Industry Leaders: 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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

739 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