Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Image Change on MO


Guest

Recommended Posts

Hi all,

 

This has been driving me a little bit nuts this afternoon, with apparantly loads of conflicting options on how to do it and nothing categorically clear on how to do it OSC (at least that I can find). What I need to happen is for one image to switch to another one on mouse hover.

 

This will be on my main front page www.mysite.com/catalog/index.php and I want the /images/img1.jpg to switch to /images/img2.jpg when the mouse move over the top (not clicking).

 

From what I have read, I can either use javascript or CSS and put some html into the head code, but as this is in php I'm not so sure what to do. Does anyone have a simple solution please?

 

Thanks

Link to comment
Share on other sites

Right, I've tried putting some script code in the <head> of index.php then putting <a tags in includes/languages/english/index.php but this crashed the site. Does anyone know what to do please?

 

A lot of info that I've seen is on how to do this for text and backgrounds, but I want to change an image that is inserted in the text of my home page, I simply want another picture to appear in place of it when someone hovers over it. Thanks

Link to comment
Share on other sites

I have made some progress. I have put some test code in, to and have managed to get the first image to show up, only it won't change on hover.

 

The head code is:

 

<script language="JavaScript">

if (document.images)
{
 img1on= new Image(100,100);
 img1on.src="img2.jpg";  

 img1off= new Image(100,100);
 img1off.src="img1.jpg";
}

function change(imgName)
{
  if (document.images)
  {
	 imgOn=eval(imgName + "on.src");
	 document[imgName].src= imgOn;
  }
}

function changeback(imgName)
{
  if (document.images)
  {
	imgOff=eval(imgName + "off.src");
	document[imgName].src= imgOff;
  }
}

</SCRIPT>

 

 

And I have the following code in the body, which is the bit that is managing to call up img1, but it won't change to img2:

 

<A onMouseover="change("img1")" onMouseout="changeback("img1")">
<IMG SRC="/images/img1.jpg" name="img1" width="100" height="100"></A>

 

Any ideas folks?

Link to comment
Share on other sites

Thanks for this, however, having followed the instructions I still have the problem from before ie img1 is showing nicely but doesn't change on hover. Am really confused now. I have added the code for the <head> into index, is that right? It is showing as being there when viewing source.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...