PDA

View Full Version : Rollover Problem


DJoe
July 30th, 2005, 08:08 PM
OK, I put in a rollover image, then I put in a second one, suddenly both rollover images don't work, but the parts that link to sites work?

I'm using Geocities

HERE'S THE JAVASCRIPT:

<html>

<head>

<title></title>

<script language="javascript">

<!-- This script works in: Navigator 3 - 4, Opera 3.1, and Explorer 4

if (document.images) {

teston = new Image(); // Active images

teston.src = "http://www.geocities.com/pureliveweb/purefm_purefm_music_off.jpg";

testoff = new Image(); // Inactive images

testoff.src = "http://www.geocities.com/pureliveweb/purefm_music_on.jpg";

}

function imgOn(imgName) {

if (document.images) {

document[imgName].src = eval(imgName + "on.src");

}

}

function imgOff(imgName) {

if (document.images) {

document[imgName].src = eval(imgName + "off.src");

}

}

// -->

</script>

</head>

<body>

<p><a href="index.html" onMouseOver="imgOn('test')" onMouseOut="imgOff('test')"><img src="http://www.geocities.com/pureliveweb/purefm_music_off.jpg" width="83" height="34" border="0" name="test"></a>

degsy
July 31st, 2005, 02:49 AM
it seems that in your code you are referencing the images, so you would not be able to have more than one rollover.

You need a script that will allow you to dynamically specify the image to change an what to change it to.

DJoe
August 2nd, 2005, 12:53 AM
I'm not sure if you know what I'm talking about so here's a website, it shows 2 images that I wanted to have a rollover. News I wanted to have a rollover for, Home I wanted to have a rollover for, & several others. Click Here To See The Page (http://www.geocities.com/pureliveweb/imagebuttons)

__________________________________________________ __________________
To find out a little more about me & pc, all you have to be is a existing member of CyberTechHelp & signed in, click on djoe then view public profile.
My Most Suggested Anti-Virus: Norton (http://www.download.com/Norton-AntiVirus/3000-2239_4-10321099.html?tag=lst-0-2), Panda (http://www.pandasoftware.com/download/) & PCcillin (http://www.download.com/Trend-Micro-PC-cillin-Internet-Security-2005/3000-2239_4-10326786.html?tag=lst-0-1).
"To Auto-Search Anti-Virus Click Here (http://www.download.com/3120-20_4-0.html?qt=Anti-Virus&tg=dl-20&search.x=26&search.y=7)" (reminds me of Tim Nortons)
My Most Suggested Anti-Spyware: Microsoft Anti-Spyware (http://www.download.com/Microsoft-Windows-AntiSpyware/3000-8022_4-10418686.html?tag=lst-0-1), SpySweeper (http://www.download.com/Webroot-Spy-Sweeper/3000-8022_4-10405877.html) & Spybot (http://www.download.com/Spybot-Search-Destroy/3000-8022_4-10401314.html?tag=lst-0-1).
"To Auto-Search Spyware Click Here (http://www.download.com/3120-20_4-0.html?qt=Anti-Spyware&tg=dl-20&search.x=18&search.y=15)"
My Most Suggested Anti-Hijacker: Hijack This (use at your own risk).
"To Auto-Search Anti-Hijacker Click Here (http://www.download.com/3120-20_4-0.html?qt=hijack&tg=dl-20)"

degsy
August 2nd, 2005, 01:54 AM
Yes, but your current script is purely designed for only one rollover.

You need to change your script.
Here are a few examples of rollover techniques
http://www.degs.co.uk/test/javascript/rollover/rollover1.htm

DJoe
August 3rd, 2005, 03:41 AM
Oh I see, are there ones with links.

Is the bottom of your forum like a auto-signature because I'm a lil tired of cutting & pasting, the part that starts with "Cheers".

Is that your own personal website, You must live in the UK ".co.uk". Does CyberTech give staff Web Space, What does the "co" stand for anyway?

__________________________________________________ ______________
To find out a little more about me & pc, all you have to be is a existing member of CyberTechHelp & signed in, click on djoe then view public profile.
My Most Suggested Anti-Virus: Norton (http://www.download.com/Norton-AntiVirus/3000-2239_4-10321099.html?tag=lst-0-2), Panda (http://www.pandasoftware.com/download/) & PCcillin (http://www.download.com/Trend-Micro-PC-cillin-Internet-Security-2005/3000-2239_4-10326786.html?tag=lst-0-1).
"To Auto-Search Anti-Virus Click Here (http://www.download.com/3120-20_4-0.html?qt=Anti-Virus&tg=dl-20&search.x=26&search.y=7)"
(reminds me of Tim Hortons "NORTON" "NOR-BITS")
My Most Suggested Anti-Spyware: Microsoft Anti-Spyware (http://www.download.com/Microsoft-Windows-AntiSpyware/3000-8022_4-10418686.html?tag=lst-0-1), SpySweeper (http://www.download.com/Webroot-Spy-Sweeper/3000-8022_4-10405877.html) & Spybot (http://www.download.com/Spybot-Search-Destroy/3000-8022_4-10401314.html?tag=lst-0-1).
"To Auto-Search Spyware Click Here (http://www.download.com/3120-20_4-0.html?qt=Anti-Spyware&tg=dl-20&search.x=18&search.y=15)"
My Most Suggested Anti-Hijacker: Hijack This (http://www.download.com/HijackThis/3000-8022_4-10379544.html?tag=lst-0-1) (use at your own risk).
"To Auto-Search Anti-Hijacker Click Here (http://www.download.com/3120-20_4-0.html?qt=hijack&tg=dl-20)"

MishY
August 3rd, 2005, 12:30 PM
Oh I see, are there ones with links.

Is the bottom of your forum like a auto-signature because I'm a lil tired of cutting & pasting, the part that starts with "Cheers".

Is that your own personal website, You must live in the UK ".co.uk". Does CyberTech give staff Web Space, What does the "co" stand for anyway?

__________________________________________________ ______________
To find out a little more about me & pc, all you have to be is a existing member of CyberTechHelp & signed in, click on djoe then view public profile.
My Most Suggested Anti-Virus: Norton (http://www.download.com/Norton-AntiVirus/3000-2239_4-10321099.html?tag=lst-0-2), Panda (http://www.pandasoftware.com/download/) & PCcillin (http://www.download.com/Trend-Micro-PC-cillin-Internet-Security-2005/3000-2239_4-10326786.html?tag=lst-0-1).
"To Auto-Search Anti-Virus Click Here (http://www.download.com/3120-20_4-0.html?qt=Anti-Virus&tg=dl-20&search.x=26&search.y=7)"
(reminds me of Tim Hortons "NORTON" "NOR-BITS")
My Most Suggested Anti-Spyware: Microsoft Anti-Spyware (http://www.download.com/Microsoft-Windows-AntiSpyware/3000-8022_4-10418686.html?tag=lst-0-1), SpySweeper (http://www.download.com/Webroot-Spy-Sweeper/3000-8022_4-10405877.html) & Spybot (http://www.download.com/Spybot-Search-Destroy/3000-8022_4-10401314.html?tag=lst-0-1).
"To Auto-Search Spyware Click Here (http://www.download.com/3120-20_4-0.html?qt=Anti-Spyware&tg=dl-20&search.x=18&search.y=15)"
My Most Suggested Anti-Hijacker: Hijack This (http://www.download.com/HijackThis/3000-8022_4-10379544.html?tag=lst-0-1) (use at your own risk).
"To Auto-Search Anti-Hijacker Click Here (http://www.download.com/3120-20_4-0.html?qt=hijack&tg=dl-20)"

Hi,

You can setup your own signature by clicking on the "Quick Links" in the forum menu bar then "Edit my signature".

Re: does CTH give staff webspace - yes I do thanks for asking. However if you were on degsys .co.uk website then that was his own.

degsy
August 3rd, 2005, 06:39 PM
.co.uk indicates a UK Company domain, but nobody takes any notice of that.

I also have a .com domain and i'm not a company or based in the US ;)

DJoe
August 5th, 2005, 05:59 AM
So is there a way to add links on to the ones I saw @ http://www.degs.co.uk/test/javascript/rollover/rollover1.htm

degsy
August 5th, 2005, 02:05 PM
You simply wrap the Hyperlink code around the image code


<a href="http://www.google.com"><img src=http://www.google.co.uk/logos/Logo_40wht.gif alt="google"></a>

DJoe
August 5th, 2005, 11:23 PM
Whats causing that blue border to show up? I couldn't seem to get rid of it?

degsy
August 5th, 2005, 11:51 PM
There are a few ways to get rid of the border.

one is to add border="0" to the image tag.

the other is to use CSS and there are a few different methods there.
http://www.w3schools.com/css/default.asp

http://www.w3schools.com/html/html_links.asp

DJoe
August 6th, 2005, 12:58 AM
OK, I have messed something up this time? Interesting mess up
click here (http://www.geocities.com/chwfm/roll)

rockboy
August 6th, 2005, 04:55 AM
You have no end (</a>) tags on your links. You've also added some incomplete and unneeded <img border="0" code. The border="0" should be added into the existing img tag to get rid of the blue border.

DJoe
August 7th, 2005, 03:12 AM
gees I can't seem to get it to work? could you give me a full proper javascript. The sites Ive shown are still up & running as long as they are needed.

RECAP: Looking for a rollover image that can support multiple rollovers, including linking to a site for each of those images.

DJoe
August 22nd, 2005, 06:46 AM
--- :upset: ---

Spider
August 22nd, 2005, 08:03 PM
<html>
<head>
<title>Computer Help Computer Problems Solved Easiest Help Free Support</title>
<script language="JavaScript">
function MM_displayStatusMsg(msgStr) { //v3.0
status=msgStr; document.MM_returnValue = true;
}

function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

</script>
</head>
<body bgcolor="#666666" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('2home.gif','2about.gif','2pict.g if','2friends.gif','2links.gif','2guest.gif','2reg i.gif');">
<table width="120" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="images/back004.gif" valign="top"><table border="0" cellpadding="0" cellspacing="0" width="137">
<tr>
<td colspan="3"><img name="navi_r1_c1" src="images/navi_r1_c1.gif" width="137" height="11" border="0"></td>
</tr>
<tr>
<td rowspan="14"><img name="navi_r2_c1" src="images/navi_r2_c1.gif" width="12" height="241" border="0"></td>
<td><a href="start.htm" target="mainFrame" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_displayStatusMsg('Computer T.V. the easiest computer help on the Web ');MM_swapImage('navi_r2_c2','','images/2home.gif',1);return document.MM_returnValue" ><img name="navi_r2_c2" src="images/navi_r2_c2.gif" width="104" height="17" border="0"></a></td>
<td rowspan="14"><img name="navi_r2_c3" src="images/navi_r2_c3.gif" width="21" height="241" border="0"></td>
</tr>
<tr>
<td><img name="navi_r3_c2" src="images/navi_r3_c2.gif" width="104" height="6" border="0"></td>
</tr>
<tr>
<td><a href="about.htm" target="mainFrame" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_displayStatusMsg('What Computer T.V. help is all about!');MM_swapImage('navi_r4_c2','','images/2about.gif',1);return document.MM_returnValue" ><img name="navi_r4_c2" src="images/navi_r4_c2.gif" width="104" height="17" border="0"></a></td>
</tr>
<tr>
<td><img name="navi_r5_c2" src="images/navi_r5_c2.gif" width="104" height="6" border="0"></td>
</tr>
<tr>
<td><a href="pictures.htm" target="mainFrame" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_displayStatusMsg('Ask your questions about how Computer T.V. works');MM_swapImage('navi_r6_c2','','images/2pict.gif',1);return document.MM_returnValue" ><img name="navi_r6_c2" src="images/navi_r6_c2.gif" width="104" height="17" border="0"></a></td>
</tr>
<tr>
<td><img name="navi_r7_c2" src="images/navi_r7_c2.gif" width="104" height="6" border="0"></td>
</tr>
<tr>
<td><a href="friends.htm" target="mainFrame" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_displayStatusMsg('Here is how it all works at Computer T.V.');MM_swapImage('navi_r8_c2','','images/2friends.gif',1);return document.MM_returnValue" ><img name="navi_r8_c2" src="images/navi_r8_c2.gif" width="104" height="17" border="0"></a></td>
</tr>
<tr>
<td><img name="navi_r9_c2" src="images/navi_r9_c2.gif" width="104" height="6" border="0"></td>
</tr>
<tr>
<td><a href="links.htm" target="mainFrame" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_displayStatusMsg('The best free tools on the Net');MM_swapImage('navi_r10_c2','','images/2links.gif',1);return document.MM_returnValue" ><img name="navi_r10_c2" src="images/navi_r10_c2.gif" width="104" height="17" border="0"></a></td>
</tr>
<tr>
<td><img name="navi_r11_c2" src="images/navi_r11_c2.gif" width="104" height="6" border="0"></td>
</tr>
<tr>
<td><a href="guest.htm" target="mainFrame" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_displayStatusMsg('Our members area');MM_swapImage('navi_r12_c2','','images/2guest.gif',1);return document.MM_returnValue" ><img name="navi_r12_c2" src="images/navi_r12_c2.gif" width="104" height="17" border="0"></a></td>
</tr>
<tr>
<td><img name="navi_r13_c2" src="images/navi_r13_c2.gif" width="104" height="6" border="0"></td>
</tr>
<tr>
<td><a href="http://www.google.com" target="_blank" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_displayStatusMsg('Contact us here');MM_swapImage('navi_r14_c2','','images/2regi.gif',1);return document.MM_returnValue"><img name="navi_r14_c2" src="images/navi_r14_c2.gif" width="104" height="17" border="0"></a></td>
</tr>
<tr>
<td><img name="navi_r15_c2" src="images/navi_r15_c2.gif" width="104" height="86" border="0"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>


Above is the code for the menu buttons here...
http://home.graffiti.net/praetorians:graffiti.net/tv/index.htm

They are rolling over and restoring the original picture after the mouse is rolled-off. This should be what your after.

The JavaScript goes between <head> and </head> and the images are below the <body> tag.