Jump to content
  • Checkout
  • Login
  • Get in touch


The e-commerce.

how to change an image by moving your mouse


Recommended Posts


I'd like to know how to change an image when I moving my mouse

on that image.


What I've seen is this.


Let's say there is clickable link image buttons like "Checkout", "Buy Now",

"Reviews" and etc. When I move my mouse on these clickable

link buttons, such images will be changed into a different image like "Click Now"


Or bascially you design the same identical image button such as "Buy Now".

One image is just a regular "Buy Now" button image file, but on the other identical

image button, light and shadow will be added on that image.(it should be done by Photoship.)


How can I do this? I guess I may change sytlesheet.css flie using a 'hover"

or "OnMouse" fuction?



Can anyone help me on this issue?



Thanks for any help.

Link to comment
Share on other sites

This is a fairly common javascript feature often built in to paint programs. One program I know that does have it is Namo's excellent Web Editor but I'm sure there are smaller and maybe free packages out there. A google search for "button maker" or even "javascript button maker" should produce interesting results. keep in mind that these little goodies add extra code to your already obese oscommerce package and because of speed issues they could annoy your customers rather than entertain them. Also the code has to be inserted into OSC and some of the code already used for buttons is pretty complex. It may be beyond your abliity to update the code because it's not just a matter of changing pretty pictures on an HTML template.


I'd give it some thought before doing it.

Link to comment
Share on other sites

You could go with this in a different way. I'm just finishing up a new site where I've used images that are (in places) transparent.


I then use a small piece of .css so that when someone mouseover the image, the effect shows through the transparent part of it.


Does that make sense?


Imagine an image of a monitor, with the screen portion of it transparent. When someone mouseover the monitor image the screen then shows a picture, or colour or whatever.


Look up background effects at http://www.w3schools.com/css/default.asp


Due to forum rules I'm not able to post up the site in question - so I can't show a working example :(

Link to comment
Share on other sites

  • 4 weeks later...


This topic is now archived and is closed to further replies.

  • Create New...