Help Creating mouseover on Index page only

Get-Wireless 2 · June 24, 2006

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

Get-Wireless 2 · June 24, 2006

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

Get-Wireless 2 · June 25, 2006

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

Get-Wireless 2 · June 26, 2006

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

Help Creating mouseover on Index page only

Recommended Posts

Get-Wireless 2

Get-Wireless 2

Get-Wireless 2

Get-Wireless 2

Archived

Browse

Activity