Solved

Change image on click

Posted on 2009-04-06
4
691 Views
Last Modified: 2013-12-24
need to change this image on click this is not a form its simply an image that gets clcked for navigation.

Based on what i see above this is the part i put in header.

<script language = "javascript">
this.src='images/owners_small.gif';
</script>


This is code:


<p align="center"><img src="<cfoutput>#imagepath#</cfoutput>/signuptoday.gif" width="183" height="41" border="0" vspace="8" id = "affiliate" value = "Condo Affiliate: Fill out the form and you will be contacted soon." onclick="(this.src != 'images/owner_small.gif') "></p>

Open in new window

0
Comment
Question by:LeadCo
4 Comments
 
LVL 3

Assisted Solution

by:kingsob
kingsob earned 100 total points
ID: 24084109
here we go
<html>
  <head>
  </head>
  <body>
    <img src="1.png" onclick="this.src='2.png';"/>
  </body>
</html>

Open in new window

0
 
LVL 27

Accepted Solution

by:
azadisaryev earned 300 total points
ID: 24084231
no need for anything in the HEAD.
the below will change the image only if it is NOT already images/owners-small.gif

<p align="center"><img src="<cfoutput>#imagepath#</cfoutput>/signuptoday.gif" width="183" height="41" border="0" vspace="8" id = "affiliate" value = "Condo Affiliate: Fill out the form and you will be contacted soon." onclick="(this.src != 'images/owner_small.gif') this.src='images/owners_small.gif';"></p>

the js inside onclick event checks if the src of this image is 'images/owners_small.gif, and if it is not changes it to 'images/owners_small.gif'.

btw, there is no VALUE attribute for <img> tag. but there IS alt attribute, which you should always specify.

Azadi
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 100 total points
ID: 24084434
I do not see the point in changing the image unless you do something else when clicking

<p align="center">
  <img src="<cfoutput>#imagepath#</cfoutput>/signuptoday.gif" 
  width="183" height="41" border="0" vspace="8" id = "affiliate" 
  value = "Condo Affiliate: Fill out the form and you will be contacted soon." 
  onclick="(this.src = '<cfoutput>#imagepath#</cfoutput>/owner_small.gif') ">
</p>

Open in new window

0
 

Author Closing Comment

by:LeadCo
ID: 31567363
Thanks Guys!    to mplnqjan: The reason for hiding the image was because it is a naviagation image and when the ajax shows new content it is not neccessarry.
0

Featured Post

Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

Question has a verified solution.

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

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 …
This article discusses how to create an extensible mechanism for linked drop downs.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

730 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