CODEWITHSUNDEEP
jqueryhtmlcssbuttoncolors
Gosik
Gosik

Reputation: 11

HTML: changing image onclick?

I have two html codes: one is a table with black images and the other one is the same table but the only difference is that the images are orange (but the only thing that changes is the color).

When I click on a black image , I'd like it to be orange and stay orange. Please, how can I do this?

This is the part of my code where the black images are (Alarm.jpg, Alarm-17.jpg, and the other Alarm are the buttons):

<tr>
    <td colspan="2">
        <img src="Alarm.jpg" width="153" height="159" alt=""></td>
    <td>
        <img src="Alarm-17.jpg" width="142" height="159" alt=""></td>
    <td>
        <img src="Alarm-18.jpg" width="141" height="159" alt=""></td>
    <td colspan="3">
        <img src="Alarm-19.jpg" width="161" height="159" alt=""></td>
    <td>
        <img src="espacio.gif" width="1" height="159" alt=""></td>
</tr>

And this is the part of my other code where the orange images are:

<tr>
    <td colspan="2">
        <img src="AlarmOrange.jpg" width="153" height="159" alt=""></td>
    <td>
        <img src="AlarmOrange-17.jpg" width="142" height="159" alt=""></td>
    <td>
        <img src="AlarmOrange-18.jpg" width="141" height="159" alt=""></td>
    <td colspan="3">
        <img src="AlarmOrange-19.jpg" width="161" height="159" alt=""></td>
    <td>
        <img src="espacio.gif" width="1" height="159" alt=""></td>
</tr>

I guess it's something like when I click on a black image it should change the picture to the picture of the orange image but i don't know how to do this.

I DONT KNOW MUCH ABOUT HTML, CAN SOMEONE PLEASE HELP ME?

Upvotes: 1

Views: 3558

Answers (3)

Talmid
Talmid

Reputation: 1401

Here is an idea for a pure CSS solution. I am changing the background-color, but you can change the background-image instead to your images.

.target {
  display: inline-block;
  background-color: black;
  color: white;
  padding: 4px 8px;
}
.hidden-target {
  display: none;
}
.hidden-target:checked + .target {
  background-color: orange;
}
<table>
  <tr>
    <td>
      <input id="hidden-flag1" type="radio" class="hidden-target">
      <label for="hidden-flag1" class="target">Click</label>
    </td>
    <td>
      <input id="hidden-flag2" type="radio" class="hidden-target">
      <label for="hidden-flag2" class="target">Click</label>
    </td>
    <td>
      <input id="hidden-flag3" type="radio" class="hidden-target">
      <label for="hidden-flag3" class="target">Click</label>
    </td>
    <td>
      <input id="hidden-flag4" type="radio" class="hidden-target">
      <label for="hidden-flag4" class="target">Click</label>
    </td>
  </tr>
</table>

Upvotes: 0

Balaji Viswanath
Balaji Viswanath

Reputation: 1684

$(function(){
	$('.imagewrapper').on('click', 'img.black', function(){
		$(this).next('img.orange').fadeIn();
	});
	$('.imagewrapper').on('click', 'img.orange', function(e){
		e.stopPropagation();
		$(this).fadeOut();
	});
});
.imagewrapper{
	position: relative;
}
img.black{
	position: relative;
	z-index: 1;
	background-color: black;
}
img.orange{
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	background-color: orange;
	display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table>
	<tr>
	    <td colspan="2">
	    	<div class="imagewrapper">
		        <img src="Alarm.jpg" width="153" height="159" alt="" class="black">
		        <img src="AlarmOrange.jpg" width="153" height="159" alt="" class="orange">
		    </div>
	    </td>
	    <td>
	    	<div class="imagewrapper">
		        <img src="Alarm-17.jpg" width="142" height="159" alt="" class="black">
		        <img src="AlarmOrange-17.jpg" width="142" height="159" alt="" class="orange">
		    </div>
	    </td>
	    <td>
	    	<div class="imagewrapper">
		        <img src="Alarm-18.jpg" width="141" height="159" alt="" class="black">
		        <img src="AlarmOrange-18.jpg" width="141" height="159" alt="" class="orange">
		    </div>
	    </td>
	    <td colspan="3">
	    	<div class="imagewrapper">
		        <img src="Alarm-19.jpg" width="161" height="159" alt="" class="black">
		        <img src="AlarmOrange-19.jpg" width="161" height="159" alt="" class="orange">
		    </div>
	    </td>
	    <td>
	        <img src="espacio.gif" width="1" height="159" alt="">
	    </td>
	</tr>
</table>

Upvotes: 0

Kolban
Kolban

Reputation: 15276

You can attach an event handler to your <img> elements such that when they are clicked, a JavaScript function is called that replaces the "src" attribute resulting in a replaced image.

Here is some sample HTML

<img width="128" height="128"
src="http://www.neilkolban.com/stackexchange/images/greenButton.png"
onclick="changeColor(event);" />

And some sample JavaScript:

function changeColor(event) {
    $(event.target).attr("src", "http://www.neilkolban.com/stackexchange/images/redButton.png");
}

A jsFiddle is also available.

(Changed to "event.target" from "event.srcElement" as suggested by comment poster).

The jQuery plugin will also need to be loaded for this to work.

Upvotes: 2

Related Questions