Resize image (link) OnMouseOver ?

JaseT · 10-06-2012, 07:44 PM

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.

xelawho · 10-06-2012, 07:55 PM

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...

JaseT · 10-06-2012, 08:32 PM

Quote:

Originally Posted by xelawho

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).

xelawho · 10-06-2012, 08:47 PM

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>

xelawho · 10-06-2012, 08:50 PM

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>

JaseT · 10-06-2012, 09:02 PM

It Works.

Your a legend.

Thanks !