PDA

View Full Version : onmouseover issues

gildash2
04-10-2004, 11:18 AM
sorry for the newb question but for some reason the following code is not working :



<SCRIPT language="JavaScript">
<!--

if (document.images)
{
projectson= new Image(100,25);
projectson.src="Projects1.gif";

projectsoff= new Image(100,25);
projectsoff.src="Projects.gif";

infoon= new Image(100,25);
infoon.src="Info1.gif";

infooff= new Image(100,25);
infooff.src="Info.gif";

programson= new Image(100,25);
programson.src="Programs1.gif";

programsoff= new Image(100,25);
programsoff.src="Programs.gif";

contacton= new Image(100,25);
contacton.src="Contact1.gif";

contactoff= new Image(100,25);
contactoff.src="Contact.gif";

infoprojectson= new Image(100,25);
infoprojectson.src="infoprojects.gif";

infoprojectsoff= new Image(100,25);
infoprojectsoff.src="infonormal.gif";

infoabouton= new Image(100,25);
infoabouton.src="infoabout.gif";

infoaboutoff= new Image(100,25);
infoaboutoff.src="infonormal.gif";


infoprogramson= new Image(100,25);
infoprogramson.src="infoprograms.gif";

infoprogramsoff= new Image(100,25);
infoprogramsoff.src="infonormal.gif";

infocontacton= new Image(100,25);
infocontacton.src="infoprograms.gif";

infocontactoff= new Image(100,25);
infocontactoff.src="infonormal.gif";
}

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

}
}

function turnoff(imgName)
{
if (document.images)
{
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}
function projectson()
{
document.getElementById('blank').src=infoprojectson.src;
}
function projectsoff()
{
document.getElementById('blank').src=infoprojectsoff.src;
}
function abouton()
{
document.getElementById('blank').src=infoabouton.src;
}
function aboutoff()
{
document.getElementById('blank').src=infoaboutoff.src;
}
function programson()
{
document.getElementById('blank').src=infoprogramson.src;
}
function programsoff()
{
document.getElementById('blank').src=infoprogramsoff.src;
}
function contacton()
{
document.getElementById('blank').src=infocontacton.src;
}
function contactoff()
{
document.getElementById('blank').src=infocontactoff.src;
}
//-->
</SCRIPT>
<body bgcolor="CCCCCC">
<img style="position:absolute; top:150; left:10" src="Navigator.gif">
<img name="projects" style="position:absolute; top:245; left:30" src="Projects.gif" onMouseOver="lightup('projects'); projectson()" onMouseOut="turnoff('projects'); projectsoff()">
<img name="info" style="position:absolute; top:305; left:30" src="Info.gif" onMouseOver="lightup('info'); abouton()" onMouseOut="turnoff('info'); aboutoff()">
<img name="programs" style="position:absolute; top:365; left:30" src="Programs.gif" onMouseOver="lightup('programs'); programson()" onMouseOut="turnoff('programs'); programsoff()">
<img name="contact" style="position:absolute; top:425; left:30" src="Contact.gif" onMouseOver="lightup('contact'); contacton()" onMouseOut="turnoff('contact'); contactoff()">
<img name="1" style="position:absolute; top:175; left:80" src="Navigation.gif">
<img id="blank" src="infonormal.gif" style="position:absolute; top:500; left:150">
what i want it to do is when u put the mouse over the picture both functions are called, but for some reason it isnt owrking, take a look at http://www.geocities.com/glldash/temporarypreviewfile.html?1081610143209
and for some other odd reason on the about function works while the other one doesnt, please hel me.. im confused!!!
gildash2
04-10-2004, 01:33 PM
help please :):D
gildash2
04-11-2004, 06:33 AM
please help me:confused:
coothead
04-11-2004, 08:27 AM
Hi there gildash2,

Don't panic :supereek:

You had a conflict between var and function...same name :supereek:
This should now work...

<html>
<head>
<script type="text/javascript">
<!--

if (document.images){
Xprojectson= new Image(100,25);
Xprojectson.src="Projects1.gif";
Xprojectsoff= new Image(100,25);
Xprojectsoff.src="Projects.gif";
infoon= new Image(100,25);
infoon.src="Info1.gif";
infooff= new Image(100,25);
infooff.src="Info.gif";
Xprogramson= new Image(100,25);
Xprogramson.src="Programs1.gif";
Xprogramsoff= new Image(100,25);
Xprogramsoff.src="Programs.gif";
Xcontacton= new Image(100,25);
Xcontacton.src="Contact1.gif";
Xcontactoff= new Image(100,25);
Xcontactoff.src="Contact.gif";
infoprojectson= new Image(100,25);
infoprojectson.src="infoprojects.gif";
infoprojectsoff= new Image(100,25);
infoprojectsoff.src="infonormal.gif";
infoabouton= new Image(100,25);
infoabouton.src="infoabout.gif";
infoaboutoff= new Image(100,25);
infoaboutoff.src="infonormal.gif";
infoprogramson= new Image(100,25);
infoprogramson.src="infoprograms.gif";
infoprogramsoff= new Image(100,25);
infoprogramsoff.src="infonormal.gif";
infocontacton= new Image(100,25);
infocontacton.src="infoprograms.gif";
infocontactoff= new Image(100,25);
infocontactoff.src="infonormal.gif";
}

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

function turnoff(imgName){
if (document.images){
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}
function projectson(){
document.getElementById('blank').src=infoprojectson.src;
}
function projectsoff(){
document.getElementById('blank').src=infoprojectsoff.src;
}
function abouton(){
document.getElementById('blank').src=infoabouton.src;
}
function aboutoff(){
document.getElementById('blank').src=infoaboutoff.src;
}
function programson(){
document.getElementById('blank').src=infoprogramson.src;
}
function programsoff(){
document.getElementById('blank').src=infoprogramsoff.src;
}
function contacton(){
document.getElementById('blank').src=infocontacton.src;
}
function contactoff(){
document.getElementById('blank').src=infocontactoff.src;
}
//-->
</script>
</head>
<body bgcolor="cccccc">
<img style="position:absolute; top:150px; left:10px" src="Navigator.gif">

<img name=" Xprojects" style="position:absolute; top:245px; left:30px" src="Projects.gif"
onmouseover="lightup(' Xprojects'); projectson()" onmouseout="turnoff(' Xprojects'); projectsoff()">

<img name="info" style="position:absolute; top:305px; left:30px" src="Info.gif"
onmouseover="lightup('info'); abouton()" onmouseout="turnoff('info'); aboutoff()">

<img name=" Xprograms" style="position:absolute; top:365px; left:30px" src="Programs.gif"
onmouseover="lightup(' Xprograms'); programson()" onmouseout="turnoff(' Xprograms'); programsoff()">

<img name="X[/color]contact" style="position:absolute; top:425px; left:30px" src="Contact.gif"
onmouseover="lightup(' Xcontact'); contacton()" onmouseout="turnoff(' Xcontact'); contactoff()">

<img name="1" style="position:absolute; top:175px; left:80px" src="Navigation.gif">
<img id="blank" src="infonormal.gif" style="position:absolute; top:500; left:150">
</body>
</html>
gildash2
04-11-2004, 08:36 AM
wait so all i gotta do is change the names of th efunctions so that they r different from the variable names?
n8thegreat
04-11-2004, 08:39 AM
yes, thats all you have to do
gildash2
04-11-2004, 09:05 AM
<html>
<head>
<script type="text/javascript">
<!--

if (document.images){
Xprojectson= new Image(100,25);
Xprojectson.src="Projects1.gif";
Xprojectsoff= new Image(100,25);
Xprojectsoff.src="Projects.gif";
infoon= new Image(100,25);
infoon.src="Info1.gif";
infooff= new Image(100,25);
infooff.src="Info.gif";
Xprogramson= new Image(100,25);
Xprogramson.src="Programs1.gif";
Xprogramsoff= new Image(100,25);
Xprogramsoff.src="Programs.gif";
Xcontacton= new Image(100,25);
Xcontacton.src="Contact1.gif";
Xcontactoff= new Image(100,25);
Xcontactoff.src="Contact.gif";
infoprojectson= new Image(100,25);
infoprojectson.src="infoprojects.gif";
infoprojectsoff= new Image(100,25);
infoprojectsoff.src="infonormal.gif";
infoabouton= new Image(100,25);
infoabouton.src="infoabout.gif";
infoaboutoff= new Image(100,25);
infoaboutoff.src="infonormal.gif";
infoprogramson= new Image(100,25);
infoprogramson.src="infoprograms.gif";
infoprogramsoff= new Image(100,25);
infoprogramsoff.src="infonormal.gif";
infocontacton= new Image(100,25);
infocontacton.src="infoprograms.gif";
infocontactoff= new Image(100,25);
infocontactoff.src="infonormal.gif";
}

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

function turnoff(imgName){
if (document.images){
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}
function projectson(){
document.getElementById('blank').src=infoprojectson.src;
}
function projectsoff(){
document.getElementById('blank').src=infoprojectsoff.src;
}
function abouton(){
document.getElementById('blank').src=infoabouton.src;
}
function aboutoff(){
document.getElementById('blank').src=infoaboutoff.src;
}
function programson(){
document.getElementById('blank').src=infoprogramson.src;
}
function programsoff(){
document.getElementById('blank').src=infoprogramsoff.src;
}
function contacton(){
document.getElementById('blank').src=infocontacton.src;
}
function contactoff(){
document.getElementById('blank').src=infocontactoff.src;
}
//-->
</script>
</head>
<body bgcolor="cccccc">
<img style="position:absolute; top:150px; left:10px" src="Navigator.gif">

<img name=" Xprojects" style="position:absolute; top:245px; left:30px" src="Projects.gif"
onmouseover="lightup(' Xprojects'); projectson()" onmouseout="turnoff(' Xprojects'); projectsoff()">

<img name="info" style="position:absolute; top:305px; left:30px" src="Info.gif"
onmouseover="lightup('info'); abouton()" onmouseout="turnoff('info'); aboutoff()">

<img name=" Xprograms" style="position:absolute; top:365px; left:30px" src="Programs.gif"
onmouseover="lightup(' Xprograms'); programson()" onmouseout="turnoff(' Xprograms'); programsoff()">

<img name="Xcontact" style="position:absolute; top:425px; left:30px" src="Contact.gif"
onmouseover="lightup(' Xcontact'); contacton()" onmouseout="turnoff(' Xcontact'); contactoff()">

<img name="1" style="position:absolute; top:175px; left:80px" src="Navigation.gif">
<img id="blank" src="infonormal.gif" style="position:absolute; top:500; left:150">
</body>
</html>
works really well up to the contact picture, it doesnt light up or change the infonormal.gif either... help please :)
gildash2
04-11-2004, 12:38 PM
help when u can please :)
agent002
04-11-2004, 03:36 PM
the names of the images begin with a space, e.g.
<img name=" Xprojects" ....
^
but you've got the space in the onmouseover attributes also, e.g.
onmouseover="lightup(' Xprojects'); projectson()"
^
so that's okay. But in the last image, Contact, the image name doesn't begin with a space... so you could either change the name attribute to
name=" Xcontact"
or then remove the space from the name in the onmouseover and onmouseout attributes. :)
gildash2
04-11-2004, 03:40 PM
phew, ok thats all, thanx man simple error, muito obrigado