Solved

Onclick event for IMG

Posted on 2000-04-19
16
325 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
  • 6
  • 4
  • 3
  • +1
16 Comments
 
LVL 22

Expert Comment

by:CJ_S
Comment Utility
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
Comment Utility
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
Comment Utility
because with this.name inside an A tag you don't point to the image which you want.
0
 

Author Comment

by:babashri
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
Comment Utility
No ID also doesn't work , i just tried it .
0
 
LVL 10

Expert Comment

by:kollegov
Comment Utility
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
Comment Utility
DOH! Keep forgetting that one. I even use it on my homepage;-)
Sorry, Babashri

Michel
0
 

Author Comment

by:babashri
Comment Utility
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
Comment Utility
You Probably used wordpad to paste.

Use notepad and make sure there are no invisible chars

Michel
0
 
LVL 10

Expert Comment

by:kollegov
Comment Utility
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
Comment Utility
Guess it's time to lock the question..
5 points is funny, but better than nothing :-)
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now