Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Help Creating mouseover on Index page only


Get-Wireless 2

Recommended Posts

Hi,

 

I have\am installing the circular layout on my index page

 

(The above is a testing ground and I know the links dont work)

 

What I would like is to make the images a mouse over image, I.E when the mouse is placed over the image a different image is shown, I would also still like the imageto be a link also.

 

I have tried this contrib without success :(

 

I have also tried various varations of the following code in my index.php file

 

<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="/test/includes/languages/english/images/buttons/service_hl.gif"
}
function mouseOut()
{
document.b1.src ="/test/includes/languages/english/images/buttons/service.gif"
}
</script>
</head>



	   <?php echo '<a href="http://get-wireless.co.uk/Shop/index.php/cPath/25?osCsid=89cd39083881f594062c43790e71578e" target="blank"' . tep_href_link('index.php?cPath=', '', 'NONSSL') . '"><img src="' . DIR_WS_INCLUDES . '/languages/english/images/buttons/service.gif"	id="mand1" alt="Home Setup Service" /></a>';?>

 

Can anyone tell me what the correct code should be and where it should go As I said I only want this to work on the main index page.

 

Regards

Shaun

Link to comment
Share on other sites

Ok so I have kinda got this working after several hours playing,

 

Inside the <head> </head> I have

<script type="text/javascript">
function mouseOver()
{
document.b1.src ="/test/includes/languages/english/images/buttons/service_hl.gif" 
}
function mouseOut()
{
document.b1.src ="/test/includes/languages/english/images/buttons/service.gif" 
}
</script>

Then further down the file inside circular layout module I have

<a href="http://get-wireless.co.uk/Shop/index.php/cPath/25?osCsid=b35618657009b9e0d8054676ddad61dc" target="_blank" onmouseover="mouseOver()" onmouseout="mouseOut()"> <img border="0" alt="Visit Get-Wireless For Home Setup Services" src="/test/includes/languages/english/images/buttons/service_hl.gif" id="mand1" name="b1" /></a>

 

My problem is that I need to put in 8 catagories each with their own image and mouse over.

I tried to put a 2nd mouse over image link in there, After much tweaking with it to make it kinda work, even if I go over image one image 2 has the mouse over effect work,

take a look Here to see what I mean

 

The code on the above page can be found In this zip file

Link to comment
Share on other sites

Well I found a Jscript solution to my little problem.

 

<script LANGUAGE = "JavaScript">
<!--

if (document.images) {

img1on = new Image();		   // The onmouseover image
img1on.src = "hairbut1.gif";  
img2on = new Image();
img2on.src = "eyesbut1.gif";  
img3on = new Image();
img3on.src = "earsbut1.gif";
img4on = new Image();
img4on.src = "nosebut1.gif";
img5on = new Image();
img5on.src = "mouthbut1.gif";
img1off = new Image();		  // The normally seen image
img1off.src = "hairbut.gif"; 
img2off = new Image();
img2off.src = "eyesbut.gif"; 
img3off = new Image();
img3off.src = "earsbut.gif";
img4off = new Image();
img4off.src = "nosebut.gif";
img5off = new Image();
img5off.src = "mouthbut.gif";

 }				  //This function changes the image when over.
function imgOn(imgName) {
		if (document.images) {
		document[imgName].src = eval(imgName + "on.src");
		}
}				   //This function changes the image back when off.
function imgOff(imgName) {
		if (document.images) {
		document[imgName].src = eval(imgName + "off.src");		
		}
}
// -->
</SCRIPT>

Here's the part you need to add to your page in order to see it. Shown in table format, though you can use it any way you like. Don't forget to change the #null references to your link URL's. 

<TABLE BORDER=0 cellpadding=0 cellspacing=0>
<TR><TD><A HREF="#null" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')">
<IMG name="img1" BORDER=0 HEIGHT=30 WIDTH=100 SRC="hairbut.gif" ></A></TD>
</TR><TR>
<TD><A HREF="#null" onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')">
<IMG name="img2" BORDER=0 HEIGHT=30 WIDTH=100 SRC="eyesbut.gif" ></A></TD>
</TR><TR>
<TD><A HREF="#null" onMouseOver="imgOn('img3')" onMouseOut="imgOff('img3')">
<IMG name="img3" BORDER=0 HEIGHT=30 WIDTH=100 SRC="earsbut.gif" ></A></TD>
</TR><TR>
<TD><A HREF="#null" onMouseOver="imgOn('img4')" onMouseOut="imgOff('img4')">
<IMG name="img4" BORDER=0 HEIGHT=30 WIDTH=100 SRC="nosebut.gif" ></A></TD>
</TR><TR>
<TD><A HREF="#null" onMouseOver="imgOn('img5')" onMouseOut="imgOff('img5')">
<IMG name="img5" BORDER=0 HEIGHT=30 WIDTH=100 SRC="mouthbut.gif" ></A></TD>
</TR></TABLE>

 

I take absolutley no credit for the above code all credit goes

to

 

I just modded it slightly for my needs

Link to comment
Share on other sites

Well after much tweaking it now works

 

for a sneak preview before it goes live look at My Test Site

 

Only one small issue is the mouse over image sems to appear on load of the screen however it goes to normal after the 1 st mouse over

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...