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 2 of 3 FirstFirst 1 2 3 LastLast
Results 11 to 20 of 29
  1. #11
    Junior Member
    Join Date
    Jun 2011
    Posts
    2
    Member #
    28069
    Hi Folks,

    The jQuery works great for all the images on a page but (there's always a but !) what if there are images you do not want to grow or shrink and you do not want them to be the same size as the others.

    Thanks Clive

  2.  

  3. #12
    Junior Member
    Join Date
    Jun 2011
    Posts
    1
    Member #
    28164
    Quote Originally Posted by Clive, post: 207852
    Hi Folks,

    The jQuery works great for all the images on a page but (there's always a but !) what if there are images you do not want to grow or shrink and you do not want them to be the same size as the others.

    Thanks Clive
    Yeah I'm very interested in this also. www.thatching.net/latestpics.html has this code on it and it's all good, except that it also resizes the top header images on mouse over too.

    Anyone know how these images can be ignored for this feature? Will have to look for an alternative solution if not, but this is ideal for my needs otherwise :S

    Cheers

    Paul

  4. #13
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Whatever images you don't want affected by the mouseover, try putting them in you CSS as background image for whichever div they are in.
    Mouseover should only work on images that are actually coded in the HTML.
    Clive and god father like this.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  5. #14
    Junior Member Mercedes Marie Calayag's Avatar
    Join Date
    Jun 2011
    Location
    Makati
    Posts
    15
    Member #
    28013
    Liked
    4 times
    For your (and everyone else's) reference for future projects, you can try this:

    http://www.sohtanaka.com/web-design/...es/image-zoom/
    George Dolidze and Clive like this.

  6. #15
    Junior Member
    Join Date
    Jun 2011
    Posts
    2
    Member #
    28069
    Thanks Alphamare ccs must be the answer

    Thanks Mercedes, Followed the link, bookmarked it, and I am playing with it now.

  7. #16
    Junior Member Mercedes Marie Calayag's Avatar
    Join Date
    Jun 2011
    Location
    Makati
    Posts
    15
    Member #
    28013
    Liked
    4 times
    No problem! And your welcome!

  8. #17
    Junior Member
    Join Date
    Mar 2012
    Location
    Melbourne, Australia
    Posts
    14
    Member #
    31178
    Quote Originally Posted by smithbh, post: 205451
    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
    Sorry to break into such an old thread. I have tried this code, but all I get is the images grow/shrink in height, but the width stays the same. How do I get the images to grow in height and width? Sorry if this is a dumb question. I am on Firefox. Littlepig

  9. #18
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    Just add the width to the function:

    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');
        $(this).css('width','150');
    
    }
    
    function shrink(){
        $(this).css('height','65px');
        $(this).css('width','100px');
    
    }
    </script>
    littlepig likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  10. #19
    Junior Member
    Join Date
    Mar 2012
    Location
    Melbourne, Australia
    Posts
    14
    Member #
    31178
    Quote Originally Posted by Ronald Roe, post: 232355
    Just add the width to the function:

    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');
        $(this).css('width','150');
    
    }
    
    function shrink(){
        $(this).css('height','65px');
        $(this).css('width','100px');
    
    }
    </script>
    Thanks heaps Ronald, that works great. I have also tried to change the code to work on a click rather than mouseover; I get the image to grow on a click, but is there any way to click again to shrink?

  11. #20
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    Syntax may be a bit off, as I'm on the tail end of a 12-hour shift, but here's the gyst:
    Code:
    <script type="text/javascript">
    $(document).toggle(function(){
        $('img').mouseover(grow);
    }, function(){
        $('img').mouseout(shrink);
    });
    
    function grow(){
        $(this).css('height','240px');
        $(this).css('width','150');
    
    }
    
    function shrink(){
        $(this).css('height','65px');
        $(this).css('width','100px');
    
    }
    </script>
    littlepig likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Page 2 of 3 FirstFirst 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 03:54 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com