HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
Image change code...HELP
Post new topic   Reply to topic    HTML Help Forum Index -> General HTML
View previous topic :: View next topic  
Author Message
speedster



Joined: 09 May 2008
Posts: 1

PostPosted: Fri May 09, 2008 3:10 am     Image change code...HELP Reply with quote

Hi All,

I am looking for a code which i can apply to an image.
Upon mouse over i would like the image to change and then change again on mouse click. but when another image is clicked within the same page i would like the image to reset.
Any help please?

regards

Imran
Straystudio



Joined: 14 Apr 2008
Posts: 255
Location: Nord Italy

PostPosted: Sat May 10, 2008 8:28 pm     Reply with quote

What onMouseOut ?
beginner.html



Joined: 02 Aug 2007
Posts: 365

PostPosted: Mon May 12, 2008 7:21 am     Reply with quote

Here are some codes:

Code:

onMouseOver
onMouseOut
onMouseClick


You should use these with JavaScript code. I think with plain HTML coding, it won't work.
PayneLess Designs



Joined: 28 Feb 2007
Posts: 1199
Location: Biloxi, MS

PostPosted: Wed May 14, 2008 10:44 pm     Reply with quote

Try this:

Code:
<head>
<script type="text/javascript">
function mouseoverImage(image)
 {
 var s = image.id;
 var ssrc = image.src;
 
 if (ssrc.match(/[Oo]ff/))
 {
 image.src = "graphics/" + s + "on.gif"
 }
 else
 {
 image.src = "graphics/" + s + "off.gif"
 }
 }
</script>
</head>
<body>

<img src="graphics/ImageOff.gif" id="image"
 onmouseover="javascript:mouseoverImage(this)"
 onmouseout="javascript:mouseoverImage(this)">

</body>


This code assumes that you have two images: one named "imageOff.gif" and one named "imageOn.gif." You should be able to easily modify the filenaming for your own images; however, your images should have a base string that is the same.

Or use this simple Mouseover Image Generator.

Ron
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> General HTML All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 

 
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial