little help with switch case staement

hi the user can change a selected image by choosing an option from a menu ive got that complete but what i want to do now is when the user clicks that image something happens for each different image i am trying to use the following code to do this but its giving me problems throwing me errors. is it way off or just need a wee bit of tweaking?

<img border="2" src="Buchaille_Etive_Mor.jpg" name="bigpic" align="top" width="120" height="90"
onclick ="
picture = (bigpic.src)
<SCRIPT LANGUAGE="JavaScript">
switch (picture)
 {
   case "aonach_egach.jpg": 
      alert("still")
      break;
  
   default : 
   alert("still 2")
 }
 </SCRIPT>
">

Code (markup):

i will add more case statements once i get it up and running

thanks

 

You should do something like this:

HTML:

<img [...] onclick="imageSwitch(this.src)" />

Code (markup):

JS:

<script type="text/javascript">
<!--
function imageSwitch(src)
{
  // switch statement goes here
}
// -->
</script>

Code (markup):

 

hi thnaks for your reply i have changed it to what you said

<img border="2" src="Buchaille_Etive_Mor.jpg" name="bigpic" align="top" width="120" height="90" onclick="imageSwitch(bigpic.src)">

<script type="text/javascript">
<!--
function imageSwitch(src)
{
case "aonach_egach.jpg": 
      alert("still")
      break;
  
   default : 
   alert("still 2")
}
// -->
</script>

Code (markup):

but its still giving me an error what am i doing wrong?

 

You had a few errors, try this revision:

<img border="2" src="Buchaille_Etive_Mor.jpg" name="bigpic" align="top" width="120" height="90" onclick="imageSwitch(this.src)">

<script type="text/javascript">
<!--
function imageSwitch(src)
{
  switch(src)
  {
  case "aonach_egach.jpg": 
    alert("still");
    break;
  default: 
    alert("still 2");
  }
}
// -->
</script>

Code (markup):

 

ahhh thanks (complete nooby if you hadnt worked that out)

cheers again

 

hmmm actually one more question it now seems to always be saying the case else statment "still 2" all the time even if the right image is showing i know the filename aonach_egach.jpg is definiatley correct
in your code where it says (this.src) i put in my name of my image "bigpic" in there yeh ? so itll be (bigpic.src) thats still giving the problem above but just wondered if that should be done anyway?

thanks for you time

 

You need to learn to use a good advice. this.src is not the same as bigpic.src. Run the code nullbit gave and once you see that it works (and it will), then try to work your way to whatever modification you want to implement based on this working example.

J.D.

 

it does work but theres just one small problem it always goes to the default option of the switch statement but i dont know why as the case statements im giving the function are definetly correct.
ive tried it with lots of different images all doing the same thing.

 

It's because this.src is a fully-qualified path. You need either to change your case statement or pass image name or ID instead of the src attribute. Add this code to see for yourself:

function imageSwitch(src)
{
alert(src);
switch(src)
...

I would change this code to use name/ID instead.

J.D.

 

thanks for the advice i see what you mean now but the way i have set it up so that when the user changes the image the picture has the same name just a different src if you know what i mean?

like user clicks a hyperlink bigpic.src = "blabla"

so i dont think i can use youe method of passing out the image name ( mayby im on the wrong end of the stick )

i know in VB you can strip off part of a filename just to reveal the last part something.jpg can this be done in Javascript?

sorry if my terminology is way off

 

It's easy in JS:

src = src.replace(new RegExp("^.*/([^\\.]+\\.[a-z]+)$", "i"), "$1");

J.D.

 

thanks for your help

p.s thats the weirdest looking thing ive ever seen dont have a scooby what it means but does the job.

 

It's called regular expression. It's really powerful and works like this:

^   : start at the beginning of the line
.*  : zero or more (*) occurrences of any character (.)
/   : (/)
(   : begin a group that may be later references by $1
[^\\.]+  : one or more (+) occurence of any character except (.)
\\.  : escaped (.)
[a-z]+  : one or more (+) characters from (a) to (z)
)   : end of the group
$   : end of the line

Code (markup):

The second argument to replace is $1, which is assigned by JS to whatever is between the first group of parenthesis (you can have more than one group).

J.D.