Go Back   TechArena Community > Software > Software Development
Become a Member!
Forgot your username/password?
Tags Active Topics RSS Search Mark Forums Read

Reply
 
Thread Tools Search this Thread
  #1  
Old 25-11-2009
Member
 
Join Date: Nov 2009
Posts: 95
Image changing on mouseover

Hey folk,

I am beginner in the technology of the web development and i am developing a website for my Father's business purpose. Everything was going well till that time he asked me to make some change. He want me to create a program which allow the change of image on mouseover, so that when mouse move over the image it will change.

Help me with the solution. A solution is appreciated bye a thanks.
Reply With Quote
  #2  
Old 25-11-2009
Member
 
Join Date: Feb 2008
Posts: 1,848
Re: Image changing on mouseover

Here is the simple solution of your question. This code will allow you to change the image on the mouse movement on the image. Just make the change if necessary


Quote:
  1. <html>
  2. <head>
  3. <title>Change of image with mouse</title>
  4. <meta name="" content="">
  5. <script type="text/javascript">
  6. function mouseover()
  7. {
  8. document.getElementById("id1").src ="Photo.jpg";
  9. }
  10. function mouseout()
  11. {
  12. document.getElementById("id1").src ="photo1.jpg";
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <img border="1" src="photo.jpg" id="id1" onmouseover="mouseover()" onmouseout="mouseout()" />
  18. </body>
  19. </html>
Reply With Quote
  #3  
Old 25-11-2009
Member
 
Join Date: Jan 2008
Posts: 1,515
Re: Image changing on mouseover

For changing the image we have to use the onmouseover event handler First take two image and which we will use on the onmouseover event. first image will be put into the image tag i.e. <img> and give the name to it.
Anchor tag will contain the image tag. And when the mouseover event is generated the onmouseover event will listen to it and event handler perform the change of the image.

Code:
<img src="imgchange.gif" NAME="change" width="200" height="100">
Now place the event handler inside the anchor tag
Code:
<a href="some.html" onmouseover="document.but.src='imgchange1.gif'"
onmouseout="document.but.src='imgchange.gif'">
<img src="imgchange.gif" name="change" width ="200" height="100">
</A>
Reply With Quote
  #4  
Old 25-11-2009
Member
 
Join Date: May 2008
Posts: 2,008
Re: Image changing on mouseover

Hey,

Thank you for posting this issue, from last week i am looking for this problem and finally got here. I used the javascript query to solve my problem and luckily its working with my web project. Now i can get the change of image on my web page by rolling mouse.

Thanks a lot once again
Reply With Quote
Reply

  TechArena Community > Software > Software Development
Tags: , , , , , , , , , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "Image changing on mouseover"
Thread Thread Starter Forum Replies Last Post
Nautilus is not changing the active window after launching Image Viewer Dipanwita Windows Software 2 06-02-2012 04:46 PM
Personas not changing on mouseover Catawba Operating Systems 3 19-09-2010 06:45 AM
Changing Login Background Image on Windows 7 Starter Edition Indulal Windows Software 5 26-08-2010 05:57 AM
Set a mouseover image effect using jQuery Ektaa Software Development 3 23-05-2009 10:43 AM
CSS : Changing background image and length of a page to 100% Yaropolk Software Development 4 20-05-2009 03:21 PM


All times are GMT +5.5. The time now is 05:17 AM.