Change Javascript object image when an event occurs

Question

Change Javascript object image when an event occurs

Navigation

#1 by (2 votes)

1

I am designing a graphical interface for electrical circuits and I want to check the operation of a light bulb that I have defined as an object. The definition of the bulb object is as follows:

  /* Función para crear una bombilla */

  joint.shapes.electrics.elements.define('electrics.light', {

  attrs: {

  '.input': {ref: '.body', 'ref-x': 1, 'ref-y': 0.5, magnet: true, port: 
   'in'},
   '.output': {ref: '.body', 'ref-dx': -0.5, 'ref-y': 0.5, magnet: true, 
   port: 'out'},
   circle: {r: 5, stroke: 'black', fill: 'transparent', 'stroke-width': 1},
   image: {'xlink:href': 'Imágenes/bombilla.off.jpg'}}

   }, {

   markup: '<g class="rotatable"><g class="scalable"><image class="body"/> 
   </g><circle class="input"/><circle class="output"/></g>', }, 

   {

   operation: function(input) { 

   return input;

   }});

I would like to know how I could change the image defined to this object "bombilla.off.jpg" to another that I have called "bombilla.on.jpg".

Greetings.

I tried to test your program but it does not do anything to me hahaha I guess I'll be doing something wrong since I'm not really into javascript and html. Although I have found out a way to modify attributes of some objects, for example, if I want to modify a characteristic such as the position (I am going to take as a reference object the light bulb defined above) it would be something like this:

var light = joint.shapes.basic.Generic.define('electrics.light', {
size: {width: 80, height: 40},
attrs: {
    '.': {magnet: false},
    '.body': {width: 50, height: 25},
    '.input': {ref: '.body', 'ref-x': 1, 'ref-y': 0.5, magnet: true, port: 'in'},
    '.output': {ref: '.body', 'ref-dx': -0.5, 'ref-y': 0.5, magnet: true, port: 'out'},
    circle: {r: 5, stroke: 'black', fill: 'transparent', 'stroke-width': 1},
    image: {'xlink:href': 'bombilla.off.jpg'}}
}, {
    markup: '<g class="rotatable"><g class="scalable"><image class="body"/></g><circle class="input"/><circle class="output"/></g>',
}, {
    operation: function(input) {
        return input;
}});

**var light_off = (new light).position(50,0);**
graph.addCell(light_off);

I tried to use the same structure but changing the image, something like this:

var light_on = (new light).position(50,50).attr("xlink:href","bombilla.on.jpg") ; 
graph.addCell(light_on);

However, it does not generate the same object with the changed image, it generates two objects with the same image. I tried to use the structure of the function that you mentioned above but I do not know how it could be for my object. Greetings:)

javascript html

asked by Manuel Bueno Mora 19.04.2018 в 16:17

source

1 answer

property map () How to remove an element added by the append method according to the selected option of a select multiple?

score 2 · Accepted Answer

A similar problem has appeared to me and I have found a solution putting an id to the object and then assigning a new image whenever you want by means of a script. Example:

<script type="text/javascript">
  var n-anterior = 1;
  function changeImage(n){
    $("#changeable-image").attr("xlink:href", "changeable-img" + n + ".jpg");
    n-anterior = n;
  }
</script>

<div class="column col-lg-2 col-md-2 col-sm-2 col-xs-2" style="display: flex; flex-direction: column; justify-content: center; z-index: 1; height: 100% !important;">
    <div style="padding-top: 10%; padding-bottom: 10%" onclick="changeImage(1);">
      <img src="ico1.png" width="50px">
    </div>
    <div style="padding-top: 10%; padding-bottom: 10%" onclick="changeImage(2);">
      <img src="ico2.png" width="50px">
    </div>
    <div style="padding-top: 10%; padding-bottom: 10%" onclick="changeImage(3);">
      <img src="ico3.png" width="50px">
    </div>
    <div style="padding-top: 10%; padding-bottom: 10%" onclick="changeImage(4);">
      <img src="ico4.png" width="50px">
    </div>
  </div>

<svg height="100%" width="100%" style="position: absolute; top: 0; left: 0; z-index: 0;">
    <clipPath id="id1">
      <polygon points="" style="fill: grey; stroke: grey; stroke-width: 1;"/>
    </clipPath>
    <image id="changeable-image"
      clip-path="url(#id1)"
      xlink:href="changeable-img1.jpg"
      x="0"
      y="0"
      preserveAspectRatio="xMidYMin slice">
    </image>
  </svg>

Then you modify it as you wish, in my case I needed it every time I clicked on an icon. Maybe it is not a solution because I do not know in what language you are doing it but at least I hope it will help if it gives you any idea. Greetings:)