Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Odd js problem?


  • Please log in to reply
12 replies to this topic

#1 Wolfy87

Wolfy87

  • Members
  • 414 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:England
  • Local time:12:27 PM

Posted 18 April 2009 - 01:13 PM

Hi, i am making a website for someone at the moment and i have some js onmouseover and onmouseout images, it all works in IE but when i use my fire fox it dose not work atall :S
here is the site, can somone with firefox check it out too because it might just be mine, here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="icon" href="./image/icon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="format.css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="en-gb">
<!--Descriptions and keywords START-->
<meta name="description" content="Description">
<meta name="keywords" content="Meta tags">
<!--Descriptions and keywords END-->
<title>Martin day entertainments</title>
</head>
<body style="background:black;">
<script type="text/javascript">
function aboutusover()
{
aboutus.src="./image/aboutusin.png";
}

function aboutusout()
{
aboutus.src="./image/aboutusout.png";
}

function enquiryover()
{
enquiry.src="./image/enquiryin.png";
}

function enquiryout()
{
enquiry.src="./image/enquiryout.png";
}

function photosover()
{
photos.src="./image/photosin.png";
}

function photosout()
{
photos.src="./image/photosout.png";
}

function contactover()
{
contact.src="./image/contactin.png";
}

function contactout()
{
contact.src="./image/contactout.png";
}
</script>
<!--Box containing all of the links to the pages START-->
<table style="width:20%;padding:0px;float:left;"><tr><td style="width:20%;border-style:solid;border-color:#ffffff;">
<a href="aboutus.htm"><img src="./image/aboutusout.png" alt="About us" style="margin: 1px;" id="aboutus" onmouseover="aboutusover()" onmouseout="aboutusout()"></a>
<br>
<a href="enquiry.htm"><img src="./image/enquiryout.png" alt="Enquiry" style="margin: 1px;" id="enquiry" onmouseover="enquiryover()" onmouseout="enquiryout()"></a>
<br>
<a href="photos.htm"><img src="./image/photosout.png" alt="Photos" style="margin: 1px;" id="photos" onmouseover="photosover()" onmouseout="photosout()"></a>
<br>
<a href="contact.htm"><img src="./image/contactout.png" alt="Contact" style="margin: 1px;" id="contact" onmouseover="contactover()" onmouseout="contactout()"></a>
<br>
<a href="http://www.essexfm.co.uk/"><img src="./image/essexfmlogo.png" alt="Essex fm" style="margin: 1px;"></a>
<br>
<p>Website by <a href="http://www.flowwebdesign.co.uk/" style="color:white;">Flow web design</a></p>
</td></table>
<!--Box containing all of the links to the pages END-->
<!--Content START-->
<table style="width:59%;border-style:none;float:left;"><tr><td><p>
This is the main content of the first page you will see, you can get back to this page by clicking on the logo, to get to any of the other pages you can click on any of the buttons to the left. 
The four navigation buttons that link to pages in this site are not active yet but Essex fm and mine work, if you like this design 
I will proceed to create this into a real page (Instead of the writing intended for you), 
and I will create the rest as well as any others you want on here.<br><br> 
I can easily insert images into this main block of writing and to the right underneath 
the button box I am thinking of adding a scrolling news box, it would scroll upwards and 
I could update it for you or I might 
be able to create a really simple way of updating it that even my dad could understand, this way you could add in any up and coming events etc to it. 
</p></td></tr></table>
<!--Content END-->
<!--MDEnts logo START-->
<table style="width:20%;border-style:none;float:right;"><tr><td><img src="./image/logo.png" alt="MDELogo" style="width:275px;height:287px;"></td></tr></table>
<!--MDEnts logo END-->
</body>

Thanks, Wolfy87.

BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:06:27 AM

Posted 18 April 2009 - 01:51 PM

You are missing a closing HTML tag. It would be much easier to read your code if you took the time to format it properly.

There are a couple of plugins for Firefox that may help. One is the web developers toolbar. The other one is called Firebug. You should use them. :thumbsup:

#3 Wolfy87

Wolfy87
  • Topic Starter

  • Members
  • 414 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:England
  • Local time:12:27 PM

Posted 18 April 2009 - 02:59 PM

I have the web developers tool bar and sorry for the missing tag, cant beli8ve i missed it :thumbsup: but this still has not fixed it...

#4 Romeo29

Romeo29

    Learning To Bleep


  • BC Advisor
  • 3,194 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:127.0.0.1
  • Local time:07:27 AM

Posted 18 April 2009 - 03:43 PM

You forgot the javascript bit. Do something like:

<img src="blah.jpg" onMouseOver="java script:aboutusover();">

EDIT: BC automatically adds a space between java and script :thumbsup:
I guess it is done from a safety point of view. You should remove that space in your code. :flowers:

Edited by Romeo29, 18 April 2009 - 03:48 PM.


#5 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:06:27 AM

Posted 18 April 2009 - 03:58 PM

Why would you have to add that before the function call? I have never had to add it, and my js works fine. What are you seeing that I am not?

#6 Wolfy87

Wolfy87
  • Topic Starter

  • Members
  • 414 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:England
  • Local time:12:27 PM

Posted 18 April 2009 - 04:02 PM

Groovicus is right, my javascript on my site works fine and i do not use this, i just dont see why this one dose not work.

Thanks, Wolfy87.

#7 Romeo29

Romeo29

    Learning To Bleep


  • BC Advisor
  • 3,194 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:127.0.0.1
  • Local time:07:27 AM

Posted 18 April 2009 - 04:17 PM

Sorry, I think I mixed up how you invoke js function in <a> and onMouseOver event :thumbsup: I need to sleep I guess

I tested your js code with modified images source (for testing at local computer) like this:

function aboutusover()
{aboutus.src="1.jpg";}
function aboutusout()
{aboutus.src="2.jpg";}

And it works in IE8. But it doesnt work in Firefox.

Then I added a semi-colon after the JS function call like this:
onmouseover="aboutusover();" onmouseout="aboutusout();">

Now it works in both IE8 and Firefox 3.08

#8 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:06:27 AM

Posted 18 April 2009 - 04:36 PM

Oh yep. Obvious now. You can omit the semi-colon for single function calls, but it is not good practice. Here is a perfect example of why.

#9 Wolfy87

Wolfy87
  • Topic Starter

  • Members
  • 414 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:England
  • Local time:12:27 PM

Posted 18 April 2009 - 08:18 PM

Nice one guys, thanks alot :thumbsup:
I'm on my iPod at the moment but tomurro I will test it out tomurro, looks like it will do the trick though.

Thanks, Wolfy87.

#10 Wolfy87

Wolfy87
  • Topic Starter

  • Members
  • 414 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:England
  • Local time:12:27 PM

Posted 19 April 2009 - 05:47 AM

Erm well here is the bit of code now:

<a href="aboutus.htm"><img src="./image/aboutusout.png" alt="About us" style="margin: 1px;" id="aboutus" onmouseover="aboutusover();" onmouseout="aboutusout();"></a>
<br>
<a href="enquiry.htm"><img src="./image/enquiryout.png" alt="Enquiry" style="margin: 1px;" id="enquiry" onmouseover="enquiryover();" onmouseout="enquiryout();"></a>
<br>
<a href="photos.htm"><img src="./image/photosout.png" alt="Photos" style="margin: 1px;" id="photos" onmouseover="photosover();" onmouseout="photosout();"></a>
<br>
<a href="contact.htm"><img src="./image/contactout.png" alt="Contact" style="margin: 1px;" id="contact" onmouseover="contactover();" onmouseout="contactout();"></a>

Even with the added semi colons it still dose not work on firefox.

Thanks, Wolfy87.

#11 Romeo29

Romeo29

    Learning To Bleep


  • BC Advisor
  • 3,194 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:127.0.0.1
  • Local time:07:27 AM

Posted 19 April 2009 - 12:20 PM

I tested a stripped down version of your code thinking what can be wrong with non JS part. I removed similar links and left only one link. Here is what I tested:

<html lang="en">
<head>
<script type="text/javascript">
function aboutusover(){aboutus.src="1.jpg";}
function aboutusout(){aboutus.src="2.jpg";}
</script>
<title>Martin day entertainments</title>
</head>
<body style="background:black;">
<a href="aboutus.htm">
<img src="2.jpg" alt="About us" style="margin: 1px;" id="aboutus" onmouseover="aboutusover();" onmouseout="aboutusout();">
</a>
</body>
</html>

And it works in FF.

In your code you missed one </tr> and one </html>. After correcting them your full code doesnt work in FF :flowers:


It means something is wrong somewhere else. After investigating for half an hour I seem to finally trapped the error.
If you change the <!DOCTYPE to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> it works in FF

Though I know bits and pieces, I don't understand FULLY why this happens. :thumbsup:

#12 Wolfy87

Wolfy87
  • Topic Starter

  • Members
  • 414 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:England
  • Local time:12:27 PM

Posted 19 April 2009 - 02:52 PM

Thats brilliant...yet a little odd :thumbsup:, thank you so much you two, it seems to be fixed now, its reall strange because i dont have that on my site and my js works, oh well atleast it works now.

Thanks so much, Wolfy87.

#13 Romeo29

Romeo29

    Learning To Bleep


  • BC Advisor
  • 3,194 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:127.0.0.1
  • Local time:07:27 AM

Posted 19 April 2009 - 04:06 PM

You're welcome :thumbsup:

As this was puzzling me. I googled and found out that the Internet is full of DOCTYPE in Firefox and Javascript/CSS problems. Though I couldn't find any explanation.

Maybe groovicus can explain this behaviour.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users