Help this stupid Scripter with Mousover!!! [Archive]

View Full Version : Help this stupid Scripter with Mousover!!!

finnstone

02-20-2003, 06:47 PM

I have a simple mouseover effect. The buttons that I am maniupulating have 2 instances, one where they are off, and one where they are on. When the user puts the mouse over the button, the on picture comes up perfect on the web. Whats the problem.....

I want the on picture to stay on if the page corresponding to the button is open ! It will not . In other words imagine this scenario with the follwoing menu

CONTACTS SERVICES PRODUCTS SCHLIZ

The person puts the mouse over products, PRODUCTS lights up, the user clicks products, the user is directed to the products page, NOW.... the user decides he wants to learn more about products on the page so he moves the mouse above a product on the page. The instant the mouse leaves the PRODUCTS button, it turns off to the off instance.

I am ovbviously missing some code or didnt include somthing because this function is not happening. PLEASE HELP!!

HERE IS THE BASIC CODE that you need to know to solve this problme

<script language="JavaScript">

if (document.images) {
var quality_Depton = new Image();
quality_Depton.src="images/about_us_on.gif";

var quality_Deptoff = new Image();
quality_Deptoff.src = "images/about_us_off1.gif";

var our_teamon = new Image();
our_teamon.src="images/our_team_on.gif";

var our_teamoff = new Image();
our_teamoff.src = "images/our_team_off2.gif";

var six_sigmaon = new Image();
six_sigmaon.src="images/six_sigma_on.gif";

var six_sigmaoff = new Image();
six_sigmaoff.src = "images/six_sigma_off.gif";

var Projectson = new Image();
Projectson.src="images/projects_on.gif";

var Projectsoff = new Image();
Projectsoff.src = "images/projects_off.gif";

var linkson = new Image();
linkson.src="images/links_on.gif";

var linksoff = new Image();
linksoff.src = "images/links_off.gif";

var contact_uson = new Image();
contact_uson.src="images/contact_us_on.gif";

var contact_usoff = new Image();
contact_usoff.src = "images/contact_us_off1.gif";

}

function imgOn(imageName) {
if (document.images) {
document[imageName].src = eval(imageName + "on.src");
}
}

function imgOff(imageName) {
if (document.images) {
document[imageName].src = eval(imageName + "off.src");
}
}

// -->
</script>
</HEAD>

NOW THE BUTTON CALLING CODE

<TD><IMG SRC="images/blank.gif" WIDTH="335" HEIGHT="20" BORDER="0"><A HREF="Quality Dep't.html"><IMG SRC="images/about_us_off1.gif" WIDTH="68" HEIGHT="20" BORDER="0" ALT="Quality Dep't" NAME="quality_Dept" onMouseOver="imgOn('quality_Dept')" ONMOUSEOUT="imgOff('quality_Dept')"></A><IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="our_team.html"><IMG SRC="images/our_team_off2.gif" WIDTH="98" HEIGHT="20" BORDER="0" ALT="Our Team" NAME="our_team" onMouseOver="imgOn('our_team')" ONMOUSEOUT="imgOff('our_team')"></A><IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="six sigma.html"><IMG SRC="images/six_sigma_on.gif" WIDTH="94" HEIGHT="20" BORDER="0" ALT="Six sigma" NAME="six_sigma" onMouseOver="imgOn('six_sigma')" ONMOUSEOUT="imgOff('six_sigma')"></A><IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="projects.html"><IMG SRC="images/projects_off.gif" WIDTH="89" HEIGHT="20" BORDER="0" ALT="Projects" NAME="Projects" onMouseOver="imgOn('Projects')" ONMOUSEOUT="imgOff('Projects')"></A><IMG SRC="images/blank.gif" WIDTH="30" HEIGHT="20" BORDER="0"><A HREF="links.html"><IMG SRC="images/links_off.gif" WIDTH="57" HEIGHT="20" BORDER="0" ALT="links" NAME="links" onMouseOver="imgOn('links')" ONMOUSEOUT="imgOff('links')"></A><IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="contact_us.html"><IMG SRC="images/contact_us_off1.gif" WIDTH=90" HEIGHT="20" BORDER="0" ALT="Contact Us" NAME="contact_us" onMouseOver="imgOn('contact_us')" ONMOUSEOUT="imgOff('contact_us')"></A></TD>

Mr J

02-20-2003, 07:09 PM

You need a different script.

This works for IE5.5

<script language="JavaScript">
var Images = new Array("on.gif","off.gif") // list images to preload
var preloadImages=new Array() // preloads images
for (i=0;i<=Images.length-1;i++) {
preloadImages[i]=new Image()
preloadImages[i].src=Images[i]
}

LastID = ""

function ON(id){
(LastID != id?document.getElementById(id).src = "on.gif":"")
}

function OFF(id){
(LastID != id?document.getElementById(id).src = "off.gif":"")
}

function ACTIVE(id){
document.getElementById(id).src = "on.gif"
if (LastID != ""){
(LastID != id?document.getElementById(LastID).src = "off.gif":"")
}
LastID = id
}
// -->
</script>

<a href="yourpage.htm" onMouseOver="ON('image1');" onMouseOut="OFF('image1')" onClick="ACTIVE('image1')"><img src="off.gif" border="0" name="image1"></a>

<a href="yourpage.htm" onMouseOver="ON('image2');" onMouseOut="OFF('image2')" onClick="ACTIVE('image2')"><img src="off.gif" border="0" name="image2"></a>

<a href="yourpage.htm" onMouseOver="ON('image3');" onMouseOut="OFF('image3')" onClick="ACTIVE('image3')"><img src="off.gif" border="0" name="image3"></a>

<a href="yourpage.htm" onMouseOver="ON('image4');" onMouseOut="OFF('image4')" onClick="ACTIVE('image4')"><img src="off.gif" border="0" name="image4"></a>

<a href="yourpage.htm" onMouseOver="ON('image5');" onMouseOut="OFF('image5')" onClick="ACTIVE('image5')"><img src="off.gif" border="0" name="image5"></a>

<a href="yourpage.htm" onMouseOver="ON('image6');" onMouseOut="OFF('image6')" onClick="ACTIVE('image6')"><img src="off.gif" border="0" name="image6"></a>

finnstone

02-20-2003, 07:38 PM

where do i load the names of my pictures. for example one of my picture names is quality_department_on.gif , the other name for this is quality_department_off.gif

Mr J

02-20-2003, 09:30 PM

Change all instances of

on.gif

to

quality_department_on.gif

and all instances of

off.gif

to

quality_department_off.gif

er ..... does each link have its own image .... if so you want my other script.

If they are separate images, list the image names and I will enter them in the script when I repost

finnstone

02-20-2003, 09:42 PM

i have 2 pictures for every one link.

the following is the list of all my pictures

our_team_off2
our_team_on
projects_on
projects_off
links_on
links_off
six_sigma_on
six_sigma_off
contact_us_on
contact_us_off1
about_us_on
about_us_off1

Does this answer your question, can you address mine, I cannot replace every instance of on and off because I have multiple images?

Mr J

02-21-2003, 06:13 PM

Try this.

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script language="JavaScript">

</script>

</HEAD>
<BODY>
<a href="#null" onclick="active('mypic1','our_team_on.gif','our_team_off2.gif');this.blur()" onmouseover="ON('mypic1','our_team_on.gif' )" onmouseout="OFF('mypic1','our_team_off2.gif')"><img src="our_team_off2.gif" border="0" name="mypic1" ALT= "Your Choice"></a> <BR>

<a href="#null" onclick="active('mypic2','projects_on.gif','projects_off.gif');this.blur()" onmouseover="ON('mypic2','projects_on.gif' )" onmouseout="OFF('mypic2','projects_off.gif')"><img src="projects_off.gif" border="0" name="mypic2" ALT= "Your Choice"></a><BR>

<a href="#null" onclick="active('mypic3','links_off_on.gif','links_off.gif');this.blur()" onmouseover="ON('mypic3','links_off.gif' )" onmouseout="OFF('mypic3','links_off.gif')"><img src="links_off.gif" border="0" name="mypic3" ALT= "Your Choice"></a><BR>

<a href="#null" onclick="active('mypic4','six_sigma_on.gif','six_sigma_off.gif');this.blur()" onmouseover="ON('mypic4','six_sigma_on.gif' )" onmouseout="OFF('mypic4','six_sigma_off.gif')"><img src="six_sigma_off.gif" border="0" name="mypic4" ALT= "Your Choice"></a><BR>

<a href="#null" onclick="active('mypic5','contact_us_on.gif','contact_us_off.gif');this.blur()" onmouseover="ON('mypic5','contact_us_on.gif' )" onmouseout="OFF('mypic5','contact_us_off.gif')"><img src="contact_us_off.gif" border="0" name="mypic5" ALT= "Your Choice"></a><BR>

<a href="#null" onclick="active('mypic6','about_us_on.gif','about_us_off1.gif');this.blur()" onmouseover="ON('mypic6','about_us_on.gif' )" onmouseout="OFF('mypic6','about_us_off1.gif')"><img src="about_us_off1.gif" border="0" name="mypic6" ALT= "Your Choice"></a>

</BODY>
</HTML>

finnstone

02-21-2003, 09:09 PM

This is what I have following your recommendation (NOTE THIS IS JUST ONE BUTTONS CODE). However , when I put my mouse over the picture it completely disappears! Instead of seeing the on picture , I see the text of the picture (probably cominf from the code) when i roll my mousover it. it does seem to stay on if it is the active page button.

<TD><IMG SRC="images/blank.gif" WIDTH="335" HEIGHT="20" BORDER="0"><A HREF="Quality Dep't.html" onclick="active('mypic6','about_us_on.gif','about_us_off1.gif');this.blur()" onMouseOver="ON('mypic6','about_us_on.gif')" onMouseout="OFF('mypic6','about_us_off1.gif')"> <IMG SRC="images/about_us_on.gif" WIDTH="68" HEIGHT="20" BORDER="0" ALT="Quality Dep't" NAME="mypic6"> </A>

Mr J

02-21-2003, 11:33 PM

HI.

I take it you have your images in a folder called "images".

You have not put the full path for the mouse event images.

<TD><IMG SRC="images/blank.gif" WIDTH="335" HEIGHT="20" BORDER="0"><A HREF="Quality Dep't.html" onclick="active('mypic6','about_us_on.gif','about_us_off1.gif');this.blur()" onMouseOver="ON('mypic6','about_us_on.gif')" onMouseout="OFF('mypic6','about_us_off1.gif')"> <IMG SRC=" images/about_us_on.gif " WIDTH="68" HEIGHT="20" BORDER="0" ALT="Quality Dep't" NAME="mypic6"> </A>

If this does not work put your images in a zip file and post them here.

I will then test the script with your images and repost it

finnstone

02-24-2003, 03:15 PM

Now, the old problem is back. The highlight, of the button whos page is open, does not stay on if I move the mouse away.

Here is my code again

<TD><IMG SRC="images/blank.gif" WIDTH="324" HEIGHT="15" BORDER="0"><A HREF="Quality Dep't.html" onclick="active('mypic6','images/about_us_on.gif','images/about_us_off1.gif');this.blur()" onMouseOver="ON('mypic6','images/about_us_on.gif')" onMouseout="OFF('mypic6','images/about_us_off1.gif')"> <IMG SRC="images/about_us_on.gif" WIDTH="68" HEIGHT="20" BORDER="0" ALT="Quality Dep't" NAME="mypic6"> </A> <IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="our_team.html" onclick="active('mypic1','images/our_team_on.gif','images/our_team_off2.gif');this.blur()"onMouseOver="ON('mypic1','images/our_team_on.gif' )" ONMOUSEOUT="OFF('mypic1','images/our_team_off2.gif')"><IMG SRC="images/our_team_off2.gif" WIDTH="98" HEIGHT="20" BORDER="0" ALT="Our Team" NAME="mypic1"> </A> <IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="six sigma.html" onclick="active('mypic4','images/six_sigma_on.gif','images/six_sigma_off.gif');this.blur()" onmouseover="ON('mypic4','images/six_sigma_on.gif' )" onmouseout="OFF('mypic4','images/six_sigma_off.gif')"><IMG SRC="images/six_sigma_off.gif" WIDTH="94" HEIGHT="20" BORDER="0" ALT="Six sigma" NAME="mypic4"> </A><IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="projects.html" onclick="active('mypic2','images/projects_on.gif','images/projects_off.gif');this.blur()" onmouseover="ON('mypic2','images/projects_on.gif' )" onmouseout="OFF('mypic2','images/projects_off.gif')"><IMG SRC="images/projects_off.gif" WIDTH="89" HEIGHT="20" BORDER="0" ALT="Projects" NAME="mypic2"></A><IMG SRC="images/blank.gif" WIDTH="30" HEIGHT="20" BORDER="0"><A HREF="links.html" onclick="active('mypic3','images/links_on.gif','images/links_off.gif');this.blur()" onmouseover="ON('mypic3','images/links_on.gif' )" onmouseout="OFF('mypic3','images/links_off.gif')"> <IMG SRC="images/links_off.gif" WIDTH="57" HEIGHT="20" BORDER="0" ALT="links" NAME="mypic3"></A><IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="contact_us.html" onclick="active('mypic5','images/contact_us_on.gif','images/contact_us_off1.gif');this.blur()"onmouseover="ON('mypic5','images/contact_us_on.gif' )" onmouseout="OFF('mypic5','images/contact_us_off1.gif')"><IMG SRC="images/contact_us_off1.gif" WIDTH=90" HEIGHT="20" BORDER="0" ALT="Contact Us" NAME="mypic5"></A></TD>

Mr J

02-24-2003, 07:22 PM

Download and see what you think.

finnstone

02-24-2003, 07:45 PM

i think its great, however, now the links do not work, i cannot get out of the current page!

finnstone

02-24-2003, 08:15 PM

went back to my old code and cheated, will alter the code for each page so that the onmouseout of JUST the current highlighted button will say imgON

e..g

ONMOUSEOUT="imgOn('six_sigma'

Mr J

02-24-2003, 09:12 PM

Sorry Finnstone.

I forgot to re-enable the links.

I disabled the links so I could test them without them loading.

Delete all instances of

;return false

from the links

Mr J

02-24-2003, 09:16 PM

Here's the amended page.

Is this page going to be used in a frameset?

finnstone

02-24-2003, 10:18 PM

thanks, yes it does work. it is going to be used in a frameset , actually for some reason it does not fit as well - the frame it was in has bceom bigger. but oh well. i am very happy that it works like this, and i also have my other old code working as well.

thanks for sticking with me the whole time, i know it was many iterations, you were very helpful the whole time.

rob