• Locked
2 replies [Last post]
Mon, 2009-09-28 05:21
jimLeum
Offline
newbie
New Zealand
Last seen: 13 years 36 weeks ago
New Zealand
Timezone: GMT+10
Joined: 2009-09-28
Posts: 2
Points: 2

Hi

I have stumbled across this Article and i'm having difficulties understanding how to apply this due to my lack of knowledge with jsquery and forms.

This is the jquery posted on the article

$(document).ready(function() {
	$('input[type="image"]').hover(
		function () { $(this).attr("src", $(this).attr("src").split('-off').join('-on')); },
		function () { $(this).attr("src", $(this).attr("src").split('-on').join('-off')); }
	);
});

and this is the form button to which i'd like to have the hover over effect but also keeping in mind that i want the *alt text for those users who have images off*

<input type="image" src="http://www.tyssendesign.com.au/examples/images/submit-button-off.gif" alt="submit test" />

Am i suppose to change something in the jquery for this to work?

The image is taken directly from the website.

Does the problem lie with the way the image was put together? from the above i can only see one file being called and that is the submit-button-off.gif [not sure how the jquery works and / or if i need to make any changes to that or the image itself]

Thanks
Jiom

//moved to off topic --gt

Top
Tags:
Mon, 2009-09-28 07:31
#1
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 21 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

And have you run this

And have you run this example? if images are off does the alt text not appear?

There is only one image as likely glancing quickly at the script Tyssen swaps to a different portion of the one image for the on state.

btw Tyssen is a member here so better to wait for him to respond on queries about his own examples and as regards the image that you are using? bear in mind that it will be his copyright.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Top
Mon, 2009-09-28 12:42
#2
jimLeum
Offline
newbie
New Zealand
Last seen: 13 years 36 weeks ago
New Zealand
Timezone: GMT+10
Joined: 2009-09-28
Posts: 2
Points: 2

Hi Yes i posted on his blog

Hi

Yes i posted on his blog and he is the one that told me to post here! LOL sorry for the image.. i didn't have one to upload..

and now going through all the documentation in jsquery website! soooooo much to read and grasp.

All i want is a simple image button that rolls over and when images are off you can still see the *submit link text* as the way i have it now only my rollover works fine but when images are off there is no text and the user doesn't know that there is a button there Wink

I've added this to 

<script type="text/javascript">
$(document).ready(function() {
	$('input[type="image"]').hover(
		function () { $(this).attr("src", $(this).attr("src").split('-off').join('-on')); },
		function () { $(this).attr("src", $(this).attr("src").split('-on').join('-off')); }
	);
});
</script>

and this is my markup

<input type="image" src="mydomain/styleImages/buttons/submit-off.gif" alt="my new button" />

I've checked it and the *hover doesn't work*
am i missing something? should i be styling it through css also and adding something to the jquery?

Thanks
Jim

Top
  • Locked