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 3 of 3 FirstFirst 1 2 3
Results 21 to 29 of 29
  1. #21
    Junior Member
    Join Date
    Mar 2012
    Location
    Melbourne, Australia
    Posts
    14
    Member #
    31178
    Quote Originally Posted by Ronald Roe, post: 232662
    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>
    Ronald, I think you were tired, it should be .click, not .mouseover and .mouseout if I want to click to grow and shrink, is that right? I changed this and it works just how I wanted, thanks very much. But I now have a weird problem - as soon as I insert that code, any links that I try to set up on the page don't work. How would this code effect links?

  2.  

  3. #22
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    Ok, stuck it in a JSFiddle, simplified the code, and it works how I believe you're wanting it to. Now, it uses a class so you can select only the images you want. On the first click, it increases the size. On the second, it returns it to original. Here's the link to the fiddle: http://jsfiddle.net/XhfM8/9/

    Not sure what your link issue is, but I suspect it has to do with either .click, or the fact that the previous code selects all images on the page.
    littlepig likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #23
    Junior Member
    Join Date
    Mar 2012
    Location
    Melbourne, Australia
    Posts
    14
    Member #
    31178
    Quote Originally Posted by Ronald Roe, post: 232833
    Ok, stuck it in a JSFiddle, simplified the code, and it works how I believe you're wanting it to. Now, it uses a class so you can select only the images you want. On the first click, it increases the size. On the second, it returns it to original. Here's the link to the fiddle: http://jsfiddle.net/XhfM8/9/

    Not sure what your link issue is, but I suspect it has to do with either .click, or the fact that the previous code selects all images on the page.
    Hi Rodney it must be really late or early where you are. Thanks for this help. Actually, no I rather not have to select the images. Or at least, not usually. This code is great, but how would I change it so all images are included? To explain:

    I am creating a website as a gallery for my photographs, but want a really simple way of posting photos on a page (so I can delete some, add new ones easily, change the layout etc) so that no matter, a simple code will always mean that when people click on a photo they get a larger image (I load the images at 900px wide and set the image size down to 300px, so when enlarged to 900px the quality is good). (I have used lightbox, hoverbox etc but these are not flexible enough for me).

    I have taught myself to create a website using Kompozer, plus what I can pick up from forums like this. Simon

  5. #24
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    It is about 6:00 am where I am right now, about 1/2 way thru my work day(or night, if you like). With this code, you'll be able to target the photos you want by adding a class to them called "grow". This function exists in Kompozer. I'm not sure what you're wanting, because before you made it sound like you wanted to click it, but now, not so much. Could you please clarify?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #25
    Junior Member
    Join Date
    Mar 2012
    Location
    Melbourne, Australia
    Posts
    14
    Member #
    31178
    Quote Originally Posted by Ronald Roe, post: 232837
    It is about 6:00 am where I am right now, about 1/2 way thru my work day(or night, if you like). With this code, you'll be able to target the photos you want by adding a class to them called "grow". This function exists in Kompozer. I'm not sure what you're wanting, because before you made it sound like you wanted to click it, but now, not so much. Could you please clarify?
    Sorry for the confusion, your latest code does do just what I want (in the JSFiddle). If it also solves that link problem then I have exactly what I need. However I haven't learned yet how to apply a class to elements in Kompozer so I can't try it on my page until I learn to do that. If I am not asking too much, is it just a matter of pasting this code into my page? What do you do that has long night shifts?

  7. #26
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    Currently deployed in support of Operation Enduring Freedom.

    You can paste the JS code in the head (or right before the </body> tag) within a <script> element. You'll have to add the class to the images you want to react to the code. In Kompozer's code view, you can just add

    class="grow"

    to the <img> tags, like in the HTML block of the JSFiddle page. Off the top of my head (it's been a good many years since I used Kompozer), you can probably right-click the image and click properties, then add the class somewhere in the dialog that pops up. It should be labeled class. Check the help file, or maybe someone else around here can help you with it.
    littlepig likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #27
    Junior Member
    Join Date
    Mar 2012
    Location
    Melbourne, Australia
    Posts
    14
    Member #
    31178
    Quote Originally Posted by Ronald Roe, post: 232840
    Currently deployed in support of Operation Enduring Freedom.

    You can paste the JS code in the head (or right before the </body> tag) within a <script> element. You'll have to add the class to the images you want to react to the code. In Kompozer's code view, you can just add

    class="grow"

    to the <img> tags, like in the HTML block of the JSFiddle page. Off the top of my head (it's been a good many years since I used Kompozer), you can probably right-click the image and click properties, then add the class somewhere in the dialog that pops up. It should be labeled class. Check the help file, or maybe someone else around here can help you with it.
    OK no more questions; good luck to you.
    I found its quite easy to create the class and assign elements to it in Kompozer, so I got your code to work fine. However, it still creates that problem where links (text and image) fail to work. The little hand comes up, the name of the target, everything but nothing happens when I click. Maybe someone else has some ideas? I am trialling on Firefox.

    cheers.

  9. #28
    Junior Member
    Join Date
    Apr 2012
    Posts
    1
    Member #
    31569
    Hi Ronald
    Quote Originally Posted by Ronald Roe, post: 232833
    Not sure what your....issue is, but I suspect it has to do with....the fact that the previous code selects all images on the page.
    I think this is certainly the case for my issue, which is driving me insane!
    I just learned yesterday how to include images in paragraphs, which I have successfully done using:

    IMG {padding-left:7px; padding-right:7px; padding-top:7px; }

    and

    <img src="myimg.jpg" align="left" width="150" height="230" /> (within <p> tags)

    But not content with that (although it looks good) I now want to learn how to make the images enlargen upon mouseover (not click)

    Each image is a different size though, and I only want specific pictures to grow, and not others.

    I have tried to use the JS code you put in first (before the jsfiddle) but it doesn't seem to do anything - is it being over-ridden by the IMG styling?

    If so, could you advise how I get it to use the grow and shrink code instead (without deleting the original as this still applies for some pictures on the page)? Also I will need the padding or the image just ends up on top of the paragraph text!

    BTW will the mouseover grow function affect the alignment of the paragraph or does the image pop-out so to speak over the text behind?

    Sorry if any of this is obvious, I'm literally working it all out from scratch, generally successfully, but this one has me stumped!

    Thanks for any help in advance

  10. #29
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    For a simple mouse over effect like you're wanting, you can just use the CSS :hover pseudo-class. Just make sure to use z-index (with appropriate positioning) to make it jump in front of other elements, otherwise, it'll just push other elements around. To select only specific images, use a class to select them.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Page 3 of 3 FirstFirst 1 2 3

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 09:16 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com