Bootstrap 4 + figure tag

[bostjan]

Hi,

I'm trying to use clickable image with <figure> tag. If I put a picture and clickable coordinates, everything works correctly.
The problem started when I tried to change picture with new clickable coordinates. Instead of replaced picture I'm getting a new picture below original picture. I'm attaching an example.
Can please somebody checked what I'm doing wrong?

Kind regards,
Bostjan



  FigureTest.zip (Size: 39.07 KB / Downloads: 15)

[Alexandre Machado]

I got your project... but I'm failing to understand your requirements... you want just to replace pict1.png with pict2.png, in the same place where the other was, is that correct?

[bostjan]

I got your project... but I'm failing to understand your requirements... you want just to replace pict1.png with pict2.png, in the same place where the other was, is that correct?

Yes, that is correct. Also on first picture there are 2 clickable bars and on second should be 3 clickable bars.

[bostjan]

I got your project... but I'm failing to understand your requirements... you want just to replace pict1.png with pict2.png, in the same place where the other was, is that correct?

Yes, that is correct. Also on first picture there are 2 clickable bars and on second should be 3 clickable bars.

Hi, Alexandre,

any chance you managed to check my problem?

Kind regards,
Bostjan

[bostjan]

Can please somebody help?

[Alexandre Machado]

I got the image replacement working correctly. 

First I moved your pictures to the wwwroot folder. Do not use the Files folder anymore. This has been discontinued and part of its functionality is kept in new IW versions for backward compatibility only.

Second, the id of the image does not contain the IWCL suffix. It should be only:

  ATag.AddStringParam('id', 'IWBS4IMAGE1');

However, the trick that you are using to respond to a click event won't work correctly given that the link is not rendered at all when the page is rendered the first time.

A viable alternative is to replace it by a direct JavaScript call. Is that ok for you? If so, I can fix that

Please have a look at the demo attached.

[bostjan]

I got the image replacement working correctly. 

First I moved your pictures to the wwwroot folder. Do not use the Files folder anymore. This has been discontinued and part of its functionality is kept in new IW versions for backward compatibility only.

Second, the id of the image does not contain the IWCL suffix. It should be only:

  ATag.AddStringParam('id', 'IWBS4IMAGE1');

However, the trick that you are using to respond to a click event won't work correctly given that the link is not rendered at all when the page is rendered the first time.

A viable alternative is to replace it by a direct JavaScript call. Is that ok for you? If so, I can fix that

Please have a look at the demo attached.

Hi, Alexandre!

Thank you for fixing my code. And yes, I would like to know how to use direct JavaScript call for clickable areas to function even after I change picture?

[Alexandre Machado]

I'll change it and get back to you...

thanks

[bostjan]

I'll change it and get back to you...

thanks

Hi, Alexandre!

It's been a while now. Any chance you manage to arrange replacement with direct Java calls?

Kind regards,
Bostjan

[bostjan]

I'll change it and get back to you...

thanks

Hi, Alexandre!

It's been a while now. Any chance you manage to arrange replacement with direct Java calls?

Kind regards,
Bostjan