Jump to content
Questions Related to HTML
Asked by D.S.S.
Posted Jan 30 2013 03:58 AM
create a web page using two image files which switch
between one to another as the mouse painter mouseover
the images .use the mouse
over and onmouseout event handlers
Answered by Rick001
Posted Jan 30 2013 02:06 PM
It would help greatly if you were to state your question in complete sentences.
I think I understand the gist, which is how does someone fade an image in/out based on cursor movement? Is that it?
The most popular tool for this type of thing is jQuery. jQuery has 2 methods of interest, they are:
See this page for more information:
You will need to construct your page such that your images are positioned on top of each other. Use HTML/CSS to do the layering.
I am assuming that we really just need the top-most layered image to fade in/out. We need to give both images a unique id. As this is an ultra-simplistic example you could define the events to respond to in-line along with the calls to the necessary jQuery methods, like so:
<div id="image0" class="box" onmouseout="$('#image1').clearQueue().fadeIn()"></div> <div id="image1" class="box" onmouseover="$(this).clearQueue().fadeOut()"></div>
When the image fades out it wont respond to any more events, so we need to add a mouseout to the image beneath it.
See this jsFiddle for a working example:
Al lot of assumptions are made here due to how poorly the question has been asked. The above is overly simplified and not how I personally would code a solution to something like this but should at the very least demonstrate the core concepts.
If you want to do something that is relative to the mouse position over the image then you would use the jQuery fadeTo() method, which is also explained at the jQuery link provided above. There is also the animate() method which you may want to look into.
Lastly... there has to be thousands of examples of things similar to this online, a google search should yield plenty of resources to look at.