...

View Full Version : Resize image (link) OnMouseOver ?



JaseT
10-06-2012, 08: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.


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

JaseT.

xelawho
10-06-2012, 08: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, 09:32 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...



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, 09:47 PM
:eek: struth, cobber. you really made a dog's breakfast out of that one :D

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



<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, 09: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:



<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, 10:02 PM
It Works. :thumbsup:

Your a legend. :cool:

Thanks !



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum