Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2012
    Location
    Melbourne, Australia.
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Resize image (link) OnMouseOver ?

    Hi,

    I am trying to slightly increase the size of an image (link) on-mouse-over, but the resize function only fires on-mouse-click (of the image/link). Can anyone please help? Thank you.

    Code:
    <a id="html5_position" href="" onmouseover="html5_hover()" >
            <img src="Images/HTML5_Logo.jpg" alt="HTML5 logo" />   
    </a>
    JaseT.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,762
    Thanks
    55
    Thanked 517 Times in 514 Posts
    can we have a look at the html5_hover() function? if it works with a click it should work with a mouseover, but who knows...

  • #3
    New Coder
    Join Date
    Oct 2012
    Location
    Melbourne, Australia.
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    can we have a look at the html5_hover() function? if it works with a click it should work with a mouseover, but who knows...

    Code:
    function html5_hover()
    {
     document.getElementById("html5_position").image.style.width='125%'
     document.getElementById("html5_position").image.style.height='auto'
    }
    Sorry for the misunderstanding, it seems that the resize does not work onClick either. The reason I said "it worked" on mouse click was because FireBug debugger correctly goes to the html5_hover() function on mouse click, but that's all. (I'm a newbie).

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,762
    Thanks
    55
    Thanked 517 Times in 514 Posts
    struth, cobber. you really made a dog's breakfast out of that one

    - document.getElementById should refer to the id of the element you are trying to manipulate, in this case the image, not the link.

    - you don't need to add image.style - just access it's style attribute directly (unless you had something else in mind)

    - be careful with setting things to percentages - 125% of what, exactly?

    Code:
    <body>
    <a href="" onmouseover="html5_hover()" >
            <img id="html5_position" src="Images/HTML5_Logo.jpg" alt="HTML5 logo" />   
    </a><script>
    function html5_hover()
    {
     document.getElementById("html5_position").style.width='125%'
     document.getElementById("html5_position").style.height='auto'
    }
    </script>
    </body>

  • Users who have thanked xelawho for this post:

    JaseT (10-08-2012)

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,762
    Thanks
    55
    Thanked 517 Times in 514 Posts
    although you could make life easier on yourself by getting rid of (what seems to be) the useless a tag and applying the onmouseover directly to the image - that way you can pass the element to the function with the "this" keyword and do away with getElementById:

    Code:
    <body>
    <img onmouseover="html5_hover(this)" src="Images/HTML5_Logo.jpg" alt="HTML5 logo" />   
    <script>
    function html5_hover(pic)
    {
    pic.style.width='125%';
    pic.style.height='auto';
    }
    </script>
    </body>

  • #6
    New Coder
    Join Date
    Oct 2012
    Location
    Melbourne, Australia.
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It Works.

    Your a legend.

    Thanks !


  •  

    Posting Permissions

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