Creating Mouseover Effects
- 1
- Add a Comment
Seems like in all of the day to day confusion, I completely forgot to address those of you that are wanting to create a true mouseover technique. Well today is the day. Thanks to Lisa Wollin for doing such a great job at outlining this for all of us.
As you will learn, this process is not that bad once you get your hands wet with the code. Once you get a grip on the basics of how Lisa explains the process, you will be able to create effects like the one she demos on her tutorial.
I know, it’s been awhile since I’ve posted a tip. A couple weeks ago I was in SQL Server training, and last week was taken up with catching up on everything I postponed during training. Now I’m back and my tip for today is creating mouseover effects.
We get frequent questions about how to create mouseover effects, but there are a variety of different mouseover effects, and the scripts that accomplish them are very varied. The tip I’m sharing today is a script that I created for selling a house. The page shows a house plan; the house plan image contains image maps that when a user runs their mouse over, displays an image of the room next to the house plan. Take a look at the finished page so that you can understand the type of mouseover I’m talking about here.
One Comment
Frank van Harreveld
January 23rd, 2008
at 7:22am
Good morning,
I wonder if you could give me some advice on how to solve the following problem in the use of javascript.
I read Lisa Wollin’s very instructive article on Creating Mouseover Effects on MSDN and from there “created” (or should I say copied)
a page http://www.hartool.nl/house.htm which shows my house and 3 floorplans. Going over each room of each floorplan,
it shows a corresponding picture of the room. All picures are in the same place on the page. This works fine, but I would prefer
to have a different place where the pictures show for each of the floorplans. Just copying the javascript code with another
reference picture does not work because apparently javascript uses only the last one if there are more then one identical functions.
I tried to find a solution on the web, but only found that I should put part of the javascript code in .
Regretfully I have not succeeded in making this work. Could you please let me know how I can solve this problem ?
The only javascript code I use is:
function ShowPic(sImage){document.huis.src = sImage}
The mouseover lines are:
etc
(repeated for each floorplan with FPMap1 and FPMap2)
and
Your answer would me most appreciated.
Best regards,
Frank van Harreveld
Wilhelminastraat 39
2011VK Haarlem
Holland
hartool@worldmail.nl