Solved

Onclick event for IMG

Posted on 2000-04-19
16
331 Views
Last Modified: 2008-03-06
In my small project I have a list i.e. <SELECT>, and two images one for the Up arrow and another for the Down Arrow to shift the options among themselves .

Now the Onclick event for IMG is supported by IE but not by Netscape , so i am using the link object as follows which is  working for both:

<A name="GoUp" HREF="javascript:adjust('GoUp')"><IMG SRC="arrow_up.gif" border=0 ></A>

<script language=javascript>
function adjust(imagename)
{
 .....
 ....
}
</script>

what i want is to call the adjust function as follows :

<A name="GoUp" HREF="javascript:adjust(this.name)"><IMG SRC="arrow_up.gif" border=0 ></A>

but in the adjust function if i write window.alert(imagename) it shows blank

So why it doesn't get the name ? with this.name (i don't want to pass the hardcoded name as 'GoUP')

Please help me ...
0
Comment
Question by:babashri
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 3
  • +1
16 Comments
 
LVL 22

Expert Comment

by:CJ_S
ID: 2729732
try
<a href="javascript:alert(document.pic.src)"><img name='pic' src="arow_up.gif" border=0></a>

oh, btw, you shouldn't pass this.name....but just 'this'...and in the function use this.name.
0
 

Author Comment

by:babashri
ID: 2729838
The following works with this.name

<img src="arrow_up.gif" name="GoUp" onClick="javascript:adjust(this.name)" >

and I am going to handle the shifting of the items in the list itself in the adjust function , Not only alert..

With document.pic.src or document.pic.name , it is certainly going to work , but what i wonder is that for the link object why the this.name doesn't work as it works for the image as above.

Thanks

0
 
LVL 22

Expert Comment

by:CJ_S
ID: 2729885
because with this.name inside an A tag you don't point to the image which you want.
0
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 

Author Comment

by:babashri
ID: 2729906
By the way , i don't want to pass the name of the image , but the name of the object for which i have defined the event handler i.e. i have called adjust function for the onclick event of the link object and i am passing the name of the link object,so for 'this.name', it should pass the name of the link object .

Note:i have mentioned previously that for browser compatibility i had to use the link object and the IMG object within it so that i can use the Onclick event which otherwise is not available for the image object in Netscape.
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 2729953
The way to do this is like:

<script language=javascript>
<!--

   function adjust(Obj)
   {
      Obj.src = "otherpic.gif"
   }
//-->

<A HREF="javascript:adjust('GoUp')"><IMG NAME="goUp" SRC="arrow_up.gif" border=0 ></A>

You PASS the name iof the object you want to change, that's the name of the image. So, now when you click on the image the image'll change.

0
 

Author Comment

by:babashri
ID: 2729973
See CJ_S , you have written the same HTML the way i have written,as follows

<A HREF="javascript:adjust('GoUp')"><IMG NAME="goUp" SRC="arrow_up.gif" border=0 ></A>

but what i am saying , that if i write like this ->

<A name="GoUp" HREF="javascript:adjust(this.name)"><IMG SRC="arrow_up.gif" border=0 ></A>

here 'this' represents the link object so why that is not successful ??




0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2730054
1. The problem is that A NAME and A HREF are two different things.
In all other objects  NAME is an identifier but in the A tag, NAME is a named anchor used as a target for <a href="#target">go to target</a>

2. do not use href=javascript unless clicking on the link results in a page change. The sideeffects of clicking a link is to unload the page and unexpected results will occur.

Use <A HREF="javascript:;" onClick="adjust('GoUp'); return false"><IMG NAME="GoUp" SRC="arrow_up.gif" border=0 ></A>

3. if you do not want to care about the naming, use a script to document.write the page

document.write('<A HREF="javascript:;" onClick="adjust(\''+imageName + '\'); return false"><IMG NAME="'+imageName+'" SRC="arrow_up.gif" border=0 ></A>');

Michel
0
 

Author Comment

by:babashri
ID: 2730085
mplungian, can you elaborate on the following , mainly the phrase 'named anchor'

In all other objects  NAME is an identifier but in the A tag, NAME is a named anchor used as a target for <a href="#target">go to target</a>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2730128
In HTML there are two uses of the <A></A> tag.

<html>
<body>
<a name="topofpage">This is the top of the page</a>
..
..
..
..
..
..
..
<a href="http://www.somewhere.com/">Go somewhere else</a>
..
..
..
..
..
<a href="#topofpage">go to top og page</a>


Now the browser will become confused if you have
<a name="bla" href="blbl.html">I do not know what I am</a>

and not report the name...
Perhaps using ID="..." in NS6 will work, but I doubt it works in NS<6

Michel

0
 

Author Comment

by:babashri
ID: 2730216
No ID also doesn't work , i just tried it .
0
 
LVL 10

Expert Comment

by:kollegov
ID: 2731348
Meanwhile answer exists... work in both
NN4+ and MIE4+.
You do not need <A > at all ( unless you need it for other purposes :-)

How about increasing points ?

Try this HTML (click on image)

<script>
 function dodo(e){
   var src;
   if(document.layers){
      src=e.target;
   }
   if(document.all){
      src=event.srcElement;
   }
   if(src){
      if(src.src){ //what better way to check this is image???
        alert(src);
      }
   }
  return true;
 }
 if(document.layers) document.captureEvents(Event.MOUSEUP);
 document.onmouseup=dodo;
</script>

<img src="some.gif">
 
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2732028
DOH! Keep forgetting that one. I even use it on my homepage;-)
Sorry, Babashri

Michel
0
 

Author Comment

by:babashri
ID: 2733392
I liked the solution, but Kollegov, there is an error coming at the line 11, where the '{' starts just after function dodo(e) , error is : Invalid Character ,

<BODY>
<img src="arrow_up.gif">
</BODY>
<script language="javascript">
function dodo(e)
{
 if(document.layers)
    src=e.target;
 if(document.all)
       src=event.srcElement;
 if(src)
  if(src.src)
        alert(src);
 return true;
}
if(document.layers)
   document.captureEvents(Event.MOUSEUP);
document.onmouseup=dodo;
</script>



Also is the solution better that the link tag stuff ....
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2733665
You Probably used wordpad to paste.

Use notepad and make sure there are no invisible chars

Michel
0
 
LVL 10

Expert Comment

by:kollegov
ID: 2734597
As for invalid char, Michel right,
this is jokes of editor you used to
paste/edit code

I think this solution is better than <A .. because it do not require link if you do not need link. NAME can be just in one place <IMG NAME="some" src="some.gif"> (you do not need to put it in event handlers), you do not need to access image by name, you have object to operate with.




0
 
LVL 10

Accepted Solution

by:
kollegov earned 5 total points
ID: 2737497
Guess it's time to lock the question..
5 points is funny, but better than nothing :-)
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question