Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Image  Array - OnClick problem

Posted on 1997-07-30
4
Medium Priority
?
195 Views
Last Modified: 2006-11-17
I have a table with images ranging from 1 to 10 images.When clicking the images they should change into anotherimage (Light and Dark). This is the code for one of the images:<A HREF="" TARGET=""
onClick="PictureClick(??)">
<img src="Image1.gif" align="bottom"
width="113" height="45" border=0></a>
And this is the code for PictureClick:function PictureClick(n){
  if (document.images[n].src==OnImages[n].src)
  {
     document.images[n].src=OffImages[n].src
  }
  else
  {
     document.images[n].src=OnImages[n].src
  }I need the PictureClick to send the current imagenumber as an argument.If that is impossible I need to find out which image was clicked in my function.Can anybody give me some help on this one?                     // Anders Karlsson, Sweden
0
Comment
Question by:Kalle 2
[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
  • 2
4 Comments
 

Expert Comment

by:dj|nn
ID: 1268767
ok, if i understand your question.  there are 10 images.  each image have a active and deactive.  you want the image to change when clicked?

if you want don't want to automatically set the number for picture click you will have to have the code for the images generated dynamically.

<head>

<script language=JavaScript>
<!---

function PictureClick(n) {
  s = document.images[n].src;
  if (s.indexOf('_l') != -1) {
    document.images[n].src = 'image' + eval(n+1) + '_d.gif';
  }
  else {
    document.images[n].src = 'image' + eval(n+1) + '_l.gif';
  }
}

var t;

for (i=0; i < 10; i++) {
  t = '<tr><td>'; // i'm guessing at your table formatting
                  // you will probably want to change that
  t += '<a href="javascript:PictureClick(' + i + ')" ';
  t += 'onClick="return false;">';
  t += '<img src=image' + eval(i+1) + '_l.gif align=bottom ';
  t += 'width=113 height=45 border=0></a>';
  t += '</td></tr>\n';
}

// --->
</script>

</head>

then in the body of your page:

<table>

<script language=JavaScript>
<!---
document.write(t);
// --->
</script>

</table>
0
 

Author Comment

by:Kalle 2
ID: 1268768
Thanks for your answer. Problem is I cant generate the HTML dynamically. I am dependant on another application(not written by me) that fills my HTML with differentimages (depending on the user logged on). The number ofimages can vary as well, from one to ten. And I do not knowwhich images it will be until I see the final HTML code.I found a new way of doing this though. But I have anothersmall problem and I will award you your points if you solvethis one (might be very easy).I need to know How many images there are in my document.I use this code:  ix=0;
  while (sImage != document.images[ix].src  && ix<99)
    ix=ix+1;
If I dont find the Image I need the while loop to quitwhen it has checked all of the images on the document.In this case I hardcoded it to 99 (above). Is there a propertythat tells me the number of images on the document?                                  // Anders Karlsson
0
 
LVL 1

Accepted Solution

by:
pmcintos earned 300 total points
ID: 1268769
This should solve your latest problem....
Use the property:
document.images.length
This will give you the length of the images array on your page.
so if your length property returns 10....to run through the array you could use a for loop like the following.
for ( var i = 0; i < document.images.length; i ++ ) {
.
.
.
}
in case you are not familiar with for loops this is the equivalent while loop:
var i = 0;
while ( i < document.images.length ) {
.
.
.
i ++;
}


This should solve your problem.
You may also want to examine the possibilty of puttin a name="imagename" property in each image tag....I don't know if this is possible or not.
This would allow you just use the name to acces what picture was clicked on.
you could use onClick="javascript:PictureClick(document.imagename)"
in the function examine the name property of the arguement and therefore eliminate the necessity of looping through the images array looking for the one that matches what you're looking for.

Hope this helps;
Pete
0
 

Author Comment

by:Kalle 2
ID: 1268770
Thank you!
             // Anders Karlsson
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

661 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