Jump to content

Archived

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

TOGSUK DC

Image Change on MO

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

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

×