[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

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

Replace image onclick

Hi,

I want to replace an image (name="test") with the file "files/test.gif" if I click on the image. Can someone tell me how to do that?

Thanks in advance!
0
Tagor
Asked:
Tagor
  • 8
  • 7
  • 5
  • +1
1 Solution
 
shaggy_the_sheepCommented:
Hi

to do that all you need to do is put an onclick event in the img tag so you would end with...

<img src="blahnlah.jpg" border="0" onclick="this.src='YOURNEWPIC.jpg'">

Richard
0
 
mvan01Commented:
Hi

Richard provides an excellent example.  Be sure to mind your single and double quotes, as he has correctly placed them.

Peace and joy.  mvan
0
 
TagorAuthor Commented:
Thanks a lot, is it also possible to toggle it? So if you click it again that it changes it back?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
mvan01Commented:
Sure!  To toggle, check the current value to decide on the next:

<img src="blahblah.jpg" border="0" onclick="this.src=(this.src=='blahblah.jpg')?'YOURNEWPIC.jpg':'blahblah.jpg'">

That syntax is:

variable = (test)?resultForTrue:resultForFalse

Peace and joy.  mvan
0
 
mvan01Commented:
Hey Tagor,

It might be prudent to end with a semi-colon:

<img src="blahblah.jpg" border="0" onclick="this.src=(this.src=='blahblah.jpg')?'YOURNEWPIC.jpg':'blahblah.jpg';">

I don't know how picky IE, FF, etc. are.  I think the ; is optional in the onclick= construct if you only have one action.  You know, you can do several, if separated by ;'s as in:

onclick="var a=1;var b=2;doSomethingElse();"

Peace and joy.  mvan
0
 
TagorAuthor Commented:
I tried this but when I click on the image nothing happens.
0
 
shaggy_the_sheepCommented:
You might want to put it into a function...clean things up within the html markup.

in the <head> section of you page insert this

<script language="javascript" type="text/javascript">
var currentPic;
function switchPic(){
if(currentPic=='YOUR ORIGINAL PIC'){
   currentPic = 'YOUR NEW PIC';
   }
else{
   currentPic = 'YOUR ORIGNAL PIC';
   }
document.getElementById('changePic').src = currentPic;
}
</script>
<img id="changePic" onclick="switchPic()">

Let me know if it works okay

Richard
0
 
shaggy_the_sheepCommented:
thinking about it...change the line
var currentPic;

to

var currentPic = 'YOUR ORIGINAL PIC';

Richard
0
 
ZvonkoSystems architectCommented:
Look at this:




<base href="http://www.experts-exchange.com/">

<img name="test" border="0" src="images/indexLogoPerson_01.gif" swap="images/indexLogoPerson_02.gif"
onClick="next=this.swap;this.swap=this.src;this.src=next">



0
 
TagorAuthor Commented:
Ok, thanks a lot. One last question:
Is it possible to build in a hidden field and change the data if the image is switched?

I have raised the points and I will split them after this question is answered.
0
 
shaggy_the_sheepCommented:
Yes quite easy...

Using the function method....

create a form

<form name="imageinfo">
<input type="hidden" value="YOUR ORIGINAL PIC" name="picName">
</form>

Now replace the original <script> section with this...

<script language="javascript" type="text/javascript">
var currentPic;
function switchPic(){
if(currentPic=='YOUR ORIGINAL PIC'){
   currentPic = 'YOUR NEW PIC';
   }
else{
   currentPic = 'YOUR ORIGNAL PIC';
   }
document.getElementById('changePic').src = currentPic;
document.imageinfo.picName.value = currentPic;
}
</script>

Richard
0
 
TagorAuthor Commented:
I also tried that. But then I have to click twice on the image to change it and if I submit the result to a php file then it says the hidden field is empty (default).
0
 
ZvonkoSystems architectCommented:
Look at this:

<html>
<head>
<title>Zvonko &#42;</title>
<base href="http://www.experts-exchange.com/">
</head>
<body>
<form>
<input type=text name="selVal" value="X" size="1">
<img name="test" border="0" src="mW.gif" swap="m.gif" sval="O"
onClick="next=this.swap;this.swap=this.src;this.src=next;f=document.forms[0].selVal;xval=f.value;f.value=this.sval;this.sval=xval">
<input type=submit>
</form>
</body>
</html>


0
 
ZvonkoSystems architectCommented:
And here a function based solution doing the same swap:

<html>
<head>
<title>Zvonko &#42;</title>
<base href="http://www.experts-exchange.com/">
<script>
function swapVal(theImg,fName){
  var theForm = document.forms[0];
  var theField = theForm[fName];
  var nVal = theImg.getAttribute("xval");
  var nImg = theImg.getAttribute("swap");
  theImg.setAttribute("swap",theImg.src);
  theImg.setAttribute("xval",theField.value);
  theImg.src=nImg;
  theField.value=nVal;
 
}
</script>
</head>
<body>
<form>
<input type=text name="selVal1" value="X" size="1">
<input type=text name="selVal2" value="X" size="1">
<input type=text name="selVal3" value="X" size="1">
<hr>
<img name="test" border="0" src="mW.gif" swap="mO.gif" xval="O" onClick="swapVal(this,'selVal1')"><br>
<img name="test" border="0" src="mW.gif" swap="mO.gif" xval="O" onClick="swapVal(this,'selVal2')"><br>
<img name="test" border="0" src="mW.gif" swap="mO.gif" xval="O" onClick="swapVal(this,'selVal3')"><br>
<input type=submit>
</form>
</body>
</html>


0
 
shaggy_the_sheepCommented:
Hi

i made an error just above my function...

where it says var currentPic; it should say var currentPic = 'YOUR ORIGINAL IMAGE';

does the php page not show a value even when the image has been changed?

Richard
0
 
TagorAuthor Commented:
Hi Richard,

I currently have this code:

----------------------------------------
<script language="javascript" type="text/javascript">
var bul = 'files/info_aand.jpg';
var info_aanhef = '';
function switchbulm() {
if (bul=='files/info_aand.jpg') {
bul = 'files/info_aans.jpg';
info_aanhef = '';
}
else {
bul = 'files/info_aand.jpg';
info_aanhef = 'mevr';
}
document.getElementById('info_mevr').src = bul;
document.informatie_aanvraag.info_aanhef.value = info_aanhef;
}
</script>

<form action="aanvraag_informatie.php" method="post" enctype="multipart/form-data" name="informatie_aanvraag">
<img src="files/info_aand.jpg" onclick="javascript:switchbulm();" alt="Mevr." width="13" height="13" border="0" class="tab1s1" name="info_mevr" />
<input name="info_aanhef" type="hidden" id="info_aanhef" value="" />
</form>
----------------------------------------

Now the image change works but still the variable info_aanhef outputs nothing if I submit it to a PHP script.
0
 
shaggy_the_sheepCommented:
Hi

I can see a couple of issues:

--------------------------------------------------------------------------
var info_aanhef = '';
function switchbulm() {
if (bul=='files/info_aand.jpg') {
bul = 'files/info_aans.jpg';
info_aanhef = '';
}
--------------------------------------------------------------------------
You have set the var unfo_aanhef to have no value..are you sure you want to do this?
The line "info_aanhef = '';" is setting your form field to ""

Just a quick troubleshooter...change the form method to get. That way you can see what the form is sending through the querystring. I just had a go with iton my pc and it worked okay, although it did send a blank value, but that is due to the line which sets info_aanhef to ""

Let me know if that helps

Richard
0
 
TagorAuthor Commented:
Then I still get an empty var. And yes it should be empty unless the image is 'info_aans.jpg'. It should be a custom designed HTML checkbox.
0
 
shaggy_the_sheepCommented:
Are you using firefox? if so i think ive found you problem...

the image you want to chnage has name attribute of "info_mevr", but not an id. IE works this out by firefox doesnt..so it was gettin to the stage of chaging the pic src and stopping the javascript function...

simply all you have to do is add id="info_mevr" to the <img> tag

Richard
0
 
TagorAuthor Commented:
No, I was using IE, but I will try that too.
0
 
mvan01Commented:
Hi Tagor,

If you want a checkbox that uses custom graphics, check this:
http:Q_20997852.html

Peace and joy.  mvan
0
 
mvan01Commented:
Hi Tagor,

An elegant implementation of graphical checkboxes was presented in a question last month:

http:Q_21817898.html

In daimo1's question, he presented a few JavaScript functions which find all of the checkboxes in the document (this could be limited to a specific form or div, if need be) and actually converts them to graphical checkboxes at runtime!  No special coding in the elements on the HTML page is necessary, as the code handles adding the required onclick statements and image swapping is implemented.

Maybe this is a little late in the above discussion, but I believe is worth a look.

Peace and joy.  mvan

PS - daimo1's question involved synching boxes with a 'check all / clear all' box, but the code itself worked as presented
0
 
TagorAuthor Commented:
Sorry for the late reply. What I actually need is this:

Two radiobuttons. So if I click the first image it should change the image so it looks like it is selected. It should change back the second image if it was also selected. And it should write to for example a hidden field which radiobutton is selected.

Anyone who can tell me how to do this?
0
 
ZvonkoSystems architectCommented:
Take this:

<html>
<head>
<title>Zvonko &#42;</title>
<base href="http://www.experts-exchange.com/">
<script>
function setVal(theImg,theValue){
  document.forms[0].selVal.value=theValue;
  if(self[theImg.name]){
    self[theImg.name].src = "images/vipAccess.gif";
  }
  self[theImg.name] = theImg;
  theImg.src = "images/signup/check.gif";
 
}
</script>
</head>
<body>
<form>
<input type=text name="selVal" value="" size="4">
<hr>
<img name="test" border="0" src="images/vipAccess.gif" onClick="setVal(this,'ValA')"><br>
<img name="test" border="0" src="images/vipAccess.gif" onClick="setVal(this,'ValB')"><br>
<img name="test" border="0" src="images/vipAccess.gif" onClick="setVal(this,'ValC')"><br>
<input type=submit>
</form>
</body>
</html>


0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 7
  • 5
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now