Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 12, 2020 at 11:59 am #1222005
    CADCOM

    Hello,

    For the needs of my client, I would like to change the numbers on the hotspots. Each hotspot represents an apartment, and these apartments are numbered, so the apartment number must match the hotspot number.
    Take a look at the screenshot of what I need : https://www.dropbox.com/s/k1zj14ux0muys7t/whatIneed.jpg?dl=0

    Site : https://lesterrassesdu6.fr/

    I tried this:
    Blank hotspot with this piece of code in a code block: 

    <style type = "text/css">
.av-hotspot-container-inner-wrap > .av-image-hotspot:nth-child(3) .av-image-hotspot_inner::after {
  color: black;
  content: "A";
  position: relative;
  right: 3px;
}
</Style.

    If I put “blank hotspot” nothing shows up : https://www.dropbox.com/s/k80nwgbsbkz6u1s/blank-hotspot.jpg?dl=0
    If I put numbered hotspot, the A (from “content”) and the number of the hotspot is displayed (and that changes all the hotspots with the number 3) : https://www.dropbox.com/s/ia1id1qo93w9xfe/numbered-hotspot.jpg?dl=0

    Can you help me?

    Thanks ;)

    • This topic was modified 4 years, 2 months ago by CADCOM.
    June 15, 2020 at 11:20 am #1222602
    CADCOM

    Can you help me ? ;)

    June 18, 2020 at 4:19 pm #1223777
    Ismael

    Hi,

    Sorry for the delay. What do you mean by “blank hotspots”? Your code above looks fine and should append the extra content beside the default number.

    .av-image-hotspot_inner::after {
        content: '';
	color: black;
	left: -3px;
	position: relative;
}

div .av-image-hotspot:nth-child(1) .av-image-hotspot_inner::after {
	content: '3A';
}

div .av-image-hotspot:nth-child(2) .av-image-hotspot_inner::after {
	content: '2A';
}

    You can hide the default content with this one:

    .av-image-hotspot_inner {
    color: transparent !important;
}

    Make sure to add it above this css:

    .av-image-hotspot_inner::after {
        content: '';
	color: black;
	left: -3px;
	position: relative;
}

    Best regards,
    Ismael

    March 19, 2021 at 1:46 pm #1289167
    jannnnnneke

    Hi! Your css code above is working, only the numbers are now next to the original numbers (1,2,3,4). When I add this code:

    .av-image-hotspot_inner {
    color: transparent !important;
    }

    It hides the numbers, but also the letters I’ve added with the code.

    Can you help me?

    Thanks a lot!

    Janneke

    March 23, 2021 at 5:06 am #1289755
    Rikard

    Hi Janneke,

    I can see 1A, 2B and so on, on your actual site. Could you try to explain the problem you are having a bit further please?

    Best regards,
    Rikard

    March 23, 2021 at 9:11 am #1289790
    jannnnnneke

    Hi! Yes, that’s true. But I don’t want the numbers 1 2 3 4. I can’t remove them! I added A B C D, but when I add the code to remove the standard 1-4 nothing happens and I still see 1A etc.

    So I just want the numbers to be A B C D!

    March 24, 2021 at 4:36 pm #1290166
    jannnnnneke

    When I add this code:

    .av-image-hotspot_inner {
    color: transparent !important;
    }

    All the letters and numbers are gone. So also the letters A B C D I’ve added in the after.

    Any ideas?

    March 26, 2021 at 7:18 am #1290484
    Rikard

    Hi,

    Thanks for the clarification. Please try this CSS instead:

    .av-image-hotspot_inner {
  color: transparent;
}

.av-image-hotspot_inner:after {
  color: white;
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.