Software to magnify images in html pages

Discussion in 'Graphics & Multimedia' started by cmcash, Dec 27, 2007.

0
  1. #1
    Hi all,

    Do you know any software (if it is free it would be good) to magnify images in html pages?
    i.e. if a have a small image in my webpage when user puts the mouse over that image it opens automatically a new windows with that image zoomed (bigger in size).

    Thanks in advance for your help

    Have a nice 2008.

    Regards
     
    cmcash, Dec 27, 2007 IP
  2. ZeiLOFT

    ZeiLOFT Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    .
    Hello CMcAsh,

    You may simply add the following to your HTML WebPage; the details are as follows -

    NOTE - Please read the entire tutorial; before -

    [a] backing up your original webpage; &
    [b] proceeding to install any aspect of the Script with Code Tags (below), into
    your webpage.
    __________________________________________________________________________________________

    [SIZE=-1]CRIQETZ[/SIZE] [[SIZE=-2]@[/SIZE]Y!] - TUTORIAl OUTLINE

    of |:Image Magnification Effect - (for HTML WebPages)

    This is an Image Magnification Effect, (that is similar to the Javascript variety);
    but written in CSS & HTML.

    OVERVIEW -
    • A mouse hovered over the thumbnail image; pops-up a 4x enlargement, of the
      (formerly hidden) image.
    • A mouse moved off the same thumbnail image; pops-down the 4x enlargement,
      of the image (allowing it to be hidden).
    NOTE - The enlarged image is set originally, to display at 1px by 1px dimensions,
    (so small, it's not invisible); then on mouse-over, enlarges to it's full size 'instantly'.
    __________________________________________________________________________________________

    1.) Between the -head- tags; add the following -

    <Head>

    <style type="text/css">

    #menu {position:relative; top:10px; left:100px; width:75px; background-color:#fff; z-index:100;}
    #menu a.p1, #menu a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
    #menu a img {border:0;}
    #menu a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
    #menu a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
    #menu a.p1:hover .large {display:block; position:absolute; top:-65px; left:150px; width:300px; height:300px; border:10px solid #ccc;}

    #info {z-index:100; height:22em;}

    </style>

    </Head>

    NOTE (for #1) -
    [1a] Play around adjusting the settings
    (above) for the -header- CSS Script; to
    display the large image, as you prefer.
    __________________________________________________________________________________________

    2.) Between the -body- tags; add the following -

    <Body>

    <h2>Magnify an image</h2>

    <div id="menu">
    <a class="p1" href="#nogo" title="thumbnail image">
    <img src="../img/thmbnl-car.jpg" title="Thumbnail of Example Car Image" alt="Thumbnail Car Image View, Example" />
    <img class="large" src="../img/enlrgd-car.jpg" title="Enlargement of Example Car image" alt="Enlarged Car Image View, Example" />
    </a>
    </div>

    </Body>

    NOTE (for #2) -
    [2a] Adjust the location of the -body- tag;
    to position the small image, wherever you
    prefer;
    [2b] Update the -title- & -alt- descriptions;
    [2c] Update the -img src- (above); with a
    (full or partial) image weblink address, you
    prefer.

    ==

    SIDE NOTE (Final) -
    #nogo -
    ... pertains to a Link Tag Blocker, (basically
    a filler); which can be switched to be a
    website address link, if preferred.
    __________________________________________________________________________________________

    If you or anyone else; ...
    • has any difficulties with using the - CriQetz Tutorial (above); to create
      the - Image Magnification Effect, on your HTML WebPage (utilizing
      the (CSS Script with HTML Code Tags); &/or
    • simply have - questions, comments &/or wish to let me know how it went;
      please feel free to contact me via - pm or email.
    Best of luck, utilizing it with your website project(s)!
    __________________________________________________________________________________________

    May you all have a Merry Christmas, 2007; & a Happy New Year, 2008!

    Sincerely,

    *Zei~
    (aka. - ZeiLOFT)
    .
     
    ZeiLOFT, Dec 28, 2007 IP
  3. diri

    diri Peon

    Messages:
    71
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I know something here is what it says on the page about it:

    What is this?
    As you may have realized, this is an image magnifier. It's a completely rewritten version of my script tjpzoom, but still is in JavaScript / DOM :). If you move your mouse over the picture, you can see a little zoom window with a magnified version of a part of the picture in it. But there is more:

    * If you click and DRAG UPWARDS your mouse, the zoom ratio increases,
    * if you click and DRAG DOWNWARDS your mouse, the zoom ratio decreases,
    * NEW! if you click and DRAG TO THE RIGHT your mouse, the zoom window increases,
    * NEW! and if you click and DRAG TO THE LEFT your mouse, the zoom window decreases.

    And since this is a new version, there are some new features:

    * Has transparent drop shadow! Wow! (Works in IE6 too!)
    * Faster! (a bit)
    * Works on IE7 (and on every major browser)
    * Much cleaner code for you to insert
    * You can change the relative position of your zoom box


    Link: valid.tjp.hu/tjpzoom/
     
    diri, Dec 28, 2007 IP