Question

I am trying to find a way to switch an image on click.

I have two images.

I have one page, on this page I have one of the images displayed.

If I click on the image, I would like the other image to be loaded in its place.

I know a bit about html and css, and a bit less about php. I am assuming the correct way to go about this would be the use of javascript. Unfortunately, I know nothing about this.

Here is my code so far, what I want to do, is have …/page-2.jpg loaded when this image is clicked.

$pageContent = '
<h2>Promotions</h2>
<div class="promo-img">
<img src="'.$docPath.'/page-1.jpg" alt="Page 1" name="Page 1" width="100%" height="150%" id="page1" style="background: #FFF; display:block;" />
</div>
';

Any input here would be greatly appreciated, Thanks!

@Dennis

Where am I going wrong with this?

$pageContent = '
<h2>Promotions</h2>
<div class="promo-img"><img id="promoImage" src="'.$docPath.'/page-1.jpg" alt="Page 1" width="100%" height="150%" style="background: #FFF; display:block;" 
onClick="document.getElementById(\'promoImage\').onclick = function() {
if(this.src == \''.$docPath.'/page-1.jpg\'){
    this.src = \''.$docPath.'/page-2.jpg\';
} else {
    this.src = \''.$docPath.'/page-1.jpg\';
}
};" /></div>
';

Okay, This does not seem to have an onclick effect?

$pageContent = '
<h2>Promotions</h2>
<div class="promo-img"><img id="promoImage" src="'.$docPath.'/page-1.jpg" alt="Page 1" width="100%" height="150%" style="background: #FFF;" /></div>
<script type="text/javascript">
document.getElementById(\'promoImage\').onclick = function() {
if(this.src == \''.$docPath.'/page-1.jpg\'){
    this.src = \''.$docPath.'/page-2.jpg\';
} else {
    this.src = \''.$docPath.'/page-1.jpg\';
}
};
</script>
';

Answer 1

HTML:

<img id="image" src="first.jpg">

Javascript: (click to switch)

document.getElementById("image").onclick = function() {
    if(this.src == "first.jpg"){
        this.src = "second.jpg";
    } else {
        this.src = "first.jpg";
    }
};

Javascript: (hover to switch)

document.getElementById("image").onmouseover = function() {
    this.src = "second.jpg";
};
document.getElementById("image").onmouseout = function() {
    this.src = "first.jpg";
};

These are the simplest techniques. There are “better” solutions using jQuery or CSS that separate code from the HTML.