Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 3 1 2 3 LastLast
Results 1 to 10 of 29
  1. #1
    Senior Member krystof's Avatar
    Join Date
    Jul 2005
    Posts
    155
    Member #
    10668
    Liked
    6 times
    Hello.

    I am making a vitamin catalog, so all images are about the same size. So, I only specify a "height" depending on whether it is a tall bottle or a short bottle, and allow the "width" to be determined automatically.

    For example:
    <IMG height=65 hspace=6 src="../pix//40814-6.jpg" align=left vspace=1 border=0>

    Is there any simple CSS or any script that can enlarge the images on mouseover? For example it would be nice if it worked just to put this in the CSS but of course it doesn't work:

    img:hover {height: 240px}

    Is there by chance any "mouseover" or "onmouseover" command that would do the job? Every page has dozens of bottle pics, so the simpler the better. Also need to preserve the "align=left" or "align=top" specifications, or whatever. Thank you.

    --Krystof

  2.  

  3. #2
    Senior Member Stylise's Avatar
    Join Date
    Jul 2005
    Location
    Mount Martha, Australia
    Posts
    229
    Member #
    10679
    HTML Code:
    a.rollover img {
    	width: 100px;
    	height: 100px;
    }
    
    a.rollover:hover > img {
    	height: 240px;
    }


    HTML Code:
    <a href="" class="rollover"><img src="blah.jpg" /></a>
    That works in firefox, but not IE. IE only allows for :hover on hyperlinks

  4. #3
    Senior Member krystof's Avatar
    Join Date
    Jul 2005
    Posts
    155
    Member #
    10668
    Liked
    6 times
    Thank you very much for the suggestion, Stylize. (I am sorry I was not able to test it sooner.)

    Unfortunately, HOVER does not seem to work properly in my IE-6 browser. If I click on the image, THEN it responds to the HOVER command. But just for a moment--then of course the page reloads--and back to square 1. I.e., HOVER command responds just like ACTIVE LINK command. I have the same problem with text links.

    If you hold the mouse button down and drag the cursor off the image--then the image will stay large--until you click again on a blank space of the page.

    Well...I am afraid that just won't do for my site.

    Using Google I found a JavaScript that sort of works:

    Problems:

    1. Each image must be given a separate "image ID", and the JavaScript must be repeated for each image. (Not ideal but can do.)
    2. All the images will enlarge and reduce together--not just the one that is hovered. (Not ideal but can do.)
    3. After making the test images "grow" and "shrink" a half dozen times--my browser froze and my computer slowed down. (Uh-oh! Looks like a SERIOUS PROBLEM...? )

    Here is the JavaScript:

    <head><script type="text/javascript">
    var increase, decrease;
    function decreaseSizeImage()
    {
    if(increase != null) {clearTimeout(increase); increase = null;};
    if (document.getElementById("1").height > 72)
    {
    document.getElementById("1").height -= 2;
    document.getElementById("1").width -= 1;
    decrease = setTimeout("decreaseSizeImage()", 6);
    };
    }
    function increaseSizeImage()
    {
    if(decrease != null) {clearTimeout(decrease); decrease = null;};
    if (document.getElementById("1").height < 150)
    {
    document.getElementById("1").height += 2;
    document.getElementById("1").width += 1;
    increase = setTimeout("increaseSizeImage()", 6);
    };
    }
    </script></HEAD>

    <IMG height=65 hspace=6 src="../pix//20472-7.jpg" align=left vspace=1 border=0
    id="1" onmouseover="increaseSizeImage();"
    onmouseout="decreaseSizeImage();">

  5. #4
    Senior Member Jack000's Avatar
    Join Date
    Aug 2004
    Posts
    250
    Member #
    7173
    why not do a simple css or javascript rollover, with the normal state being the smaller image and hover being the larger image?

    something like:

    html:
    <a id="image1"></a>

    css:
    a{
    height: 10px;
    }

    a:hover{
    height: 20px;
    }

    #image1{
    background-image: url("smaller_image_source.jpg");
    }

    #image1:hover{
    background-image: url("larger_image_source.jpg");
    }


    you can resize the images' size with batch processing if there are a great number of them

  6. #5
    Senior Member krystof's Avatar
    Join Date
    Jul 2005
    Posts
    155
    Member #
    10668
    Liked
    6 times
    :classic: Huzzaaah! Perfection!

    I know very little CSS and no JavaScript. But--thanks to you Jacko and Stylize--by putting both suggestions together and experimenting, I achieved eXXXactly what I needed with just CSS!

    1. Do not have to download 2 sets of images. That would not have been feasible.
    2. Do not have to click the image in IE-6. Grows instantly with mouseover.
    3. No complicated JavaScript. Just plain CSS.
    4. By adding "#" in the blank hyperlink, there is no waiting for the page to reload, just in case somebody accidentally clicks.
    5. All my images are either "align=left" or "align=center." So instead of the class "rollover," I will create 2 classes: "grow" with vertial alignment if needed or else blank {} and "growleft" with {float: left}. Therefore, the image remains properly aligned as it grows.
    6. The CSS does not specify the "normal" dimensions. These are specified individually within the HTML, generally from 48 to 72, depending on the needs of each image. So only the "hover" dimension is specified in CSS as {height: 120}.
    7. I do not use {width: auto;}. I found that sometimes "auto" creates serious distortion. So, I just do not specify any width. Obviously, a "blank" width is the same thing as an "auto" width--but for no reason it just seems to work better.
    8. Every image source is actually 120 high. This is just small enough for fast dialup downloading, and just big enough for a nice clear "hover" picture.

    So here is the CSS that does it all, at least in my IE-6 browser:

    .growleft:hover {float: left;}
    a.growleft:hover img {height: 120px;}
    .grow:hover {}
    a.grow:hover img {height: 120px;}

    And here is a typical example of the HTML:

    <a href="#" class="growleft">
    <IMG height=65 hspace=6 src="../pix//NF-3878.jpg" align=left vspace=1 border=0>
    </a>

    Thank you everyone for enabling me to achieve this! Possibly some modification is needed for compatibility with Netscape and Mozilla. However I doubt that will be a serious problem. In any case this is plenty good enough!

    PS--I have decided not to use this gimmick on my current project (VitaminShelf.com). Instead, I just made all the images bigger. However I expect it to come in handy in the future.

  7. #6
    Junior Member
    Join Date
    May 2011
    Location
    Austin, TX
    Posts
    6
    Member #
    27812
    Liked
    2 times
    Using jQuery would make this much easier for you.
    Try adding the following code to your header:
    Code:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('img').mouseover(grow);
        $('img').mouseout(shrink);
    });
    
    function grow(){
        $(this).css('height','240px');
    }
    
    function shrink(){
        $(this).css('height','65px');
    }
    </script>
    and see how that works. Hope this helps


    Brandon

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Unfortunately, HOVER does not seem to work properly in my IE-6 browser.
    Nothing works in IE6. Time to upgrade... 3 versions ago.
    Eis likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    That wouldn't have been true 6 years ago when he posted, though.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Holy crap nuggets. I didn't even realize someone brought this back from the abyss.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  11. #10
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    No probs, dude. It's all Brandon's fault.

    Seriously, it was good advice, so there's no real harm in updating this thread. jQuery wasn't around 6 years ago and someone might stumble upon this thread now.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Page 1 of 3 1 2 3 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

css mouseover enlarge images

,

enlarge image hover

,
how to enlarge image scroll over with html
,
how to hover over an image and it enlarge
,

how to zoom in zoom out tabel cell mouse over hrml

,

html enlarge image on hover

,
html to enlarge a picture on hover
,

onmouseover enlarge photo css

,

program that makes image bigger when cursor move over it

,
zoom or magnify on mouseover
Click on a term to search for related topics.
All times are GMT -6. The time now is 02:44 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com