Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 337
  • Last Modified:

Onclick event for IMG

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
babashri
Asked:
babashri
  • 6
  • 4
  • 3
  • +1
1 Solution
 
CJ_SCommented:
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
 
babashriAuthor Commented:
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
 
CJ_SCommented:
because with this.name inside an A tag you don't point to the image which you want.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
babashriAuthor Commented:
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
 
CJ_SCommented:
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
 
babashriAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
babashriAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
babashriAuthor Commented:
No ID also doesn't work , i just tried it .
0
 
kollegovCommented:
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
 
Michel PlungjanIT ExpertCommented:
DOH! Keep forgetting that one. I even use it on my homepage;-)
Sorry, Babashri

Michel
0
 
babashriAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
You Probably used wordpad to paste.

Use notepad and make sure there are no invisible chars

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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 6
  • 4
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now