Guest Posted March 19, 2009 Share Posted March 19, 2009 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 More sharing options...
Guest Posted March 20, 2009 Share Posted March 20, 2009 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 More sharing options...
Guest Posted March 20, 2009 Share Posted March 20, 2009 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 More sharing options...
burt Posted March 20, 2009 Share Posted March 20, 2009 Use jQuery and a Plug In: http://code.google.com/p/jquery-swapimage/ Examples: http://labs.xddnet.com/jquery-swapimage/example/example.html Link to comment Share on other sites More sharing options...
Guest Posted March 20, 2009 Share Posted March 20, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.