Solved

Change image on click

Posted on 2009-04-06
4
688 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

U.S. Department of Agriculture and Acronis Access

With the new era of mobile computing, smartphones and tablets, wireless communications and cloud services, the USDA sought to take advantage of a mobilized workforce and the blurring lines between personal and corporate computing resources.

Question has a verified solution.

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

Introduction This article explores the design of a cache system that can improve the performance of a web site or web application.  The assumption is that the web site has many more “read” operations than “write” operations (this is commonly the ca…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

831 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