Jump to content

Rollover Images


36pixels
 Share

Recommended Posts

HiI am trying to create a webpage using two image files,which switch between one another as the mouse pointer moves over the images.I am using the onMouseover and onMouseout event handlers.I tried the following code but it is not working!!Please tell me how can I make this code work.Please dont tell me about jquery or anything else.

<HTML><HEAD>  <TITLE> New Document </TITLE><script type="text/JavaScript">ch(img1){  document.getElementById(a).src=2.jpg;}ch1(img1){  document.getElementById(a).src=3.jpg;}</SCRIPT></HEAD><BODY>  <A   onmouseover="ch(img1)" onmouseout="ch1(img1)"><IMG SRC="1.jpg" WIDTH="140" HEIGHT="160" BORDER="0" ALT="" id=a></A></BODY></HTML>

Link to comment
Share on other sites

The strings "2.jpg" and "3.jpg" need to be delimited by quotation marks.The string "a" in document.getElementById(a) needs to be delimited by quotation marks as well. The syntaxch(img1) {} isn't valid. A function needs to be declared like this:

function name(param1, param2) {    // Code}

I think you need to read the Javascript tutorial from the beginning.

  • Like 1
Link to comment
Share on other sites

Hi Ingolme,Thanks for the reply but I tried this code as per your suggestions and it still donot work!!Code:

<HTML><HEAD>  <TITLE> New Document </TITLE><script type="text/JavaScript">function ch(img1){  document.getElementById('a').src="2.jpg";}function ch1(img1){  document.getElementById('a').src="3.jpg";}</SCRIPT></HEAD><BODY>  <A   onmouseover="ch(img1)" onmouseout="ch1(img1)"><IMG SRC="1.jpg" WIDTH="140" HEIGHT="160" BORDER="0"  id='a'></A></BODY></HTML>

BTW, "a" here is id name and not string name!!

Edited by 36pixels
Link to comment
Share on other sites

you can't have the functions called the same name. you need to give them different names. and if you want to pass a string in a function call, you need to do that correctly too.

onmouseover="ch('img')"

although you aren't even using it, so I don't even see the point.

  • Like 1
Link to comment
Share on other sites

aside from reading the JS tutorials, you should learn how to use your browsers console and looking for errors and debugging your code.

Link to comment
Share on other sites

The ID is a string, just like every other attribute value. You might need to learn about the string data type in Javascript. Images may take a few seconds to load. Put the mouse over the image and wait to see if it loads. If it doesn't, open the error console (Control+shift+J in Firefox).

Link to comment
Share on other sites

Hi :)Thanks Everybody for their helpful answers.I tried the Error Console as per Ingolme's advice, and here is what i get-"Error: img1 is not definedLine: 1" Now the effect is coming but I dont know why the " img1 is not defined" error is given! Can anyone pls tell me? Also,I dont understand what Line 1 is because the code is not in line no 1 of my program!!Can anyone tell me what line number in the error console indicates?

Edited by 36pixels
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...