Ambiera Forum

Discussions, Help and Support.

Ambiera Forum > RocketCake
How to create overlay image?

ivarforkbeard
Registered User
Quote
2022-08-07 18:00:16

I have a client that would like an image to be fixed over their website with a promotional "offer" showing until they either click on the image itself (and are taken to the offer page), or click off the image in which case it disappears and lets them just peruse the index page as normal. What would be a straightforward way to do this? I've tried a floating image with the position:fixed; attribute, but I'm not sure how to make it vanish when someone clicks elsewhere?

Thanks for your clever thoughts in advance!

Peace.


niko
Moderator
Quote
2022-08-08 10:22:10

Yes, it would work with that fixed attribute.
For making it go away when someone is clicking elsewhere, change it's visibility using JavaScript on the handler of the document, something like this:

document.on click = function() 
{
document.getElementById('yourimage').style.display = 'none';
}



ivarforkbeard
Registered User
Quote
2022-08-08 23:19:05

Rats, I guess I'm not understanding. I've got my picture, and then I added your code on the main page in HTML between <script></script>, which didn't work, so then I put it in as a javascript insert, still didn't work. Can you give me another hint?


ivarforkbeard
Registered User
Quote
2022-08-09 15:04:29

Okay, I think I managed to use some Google fu along with my Javascript textbook to get further along.

I don't think there should be a space between on and click.

That first line should be in the HTML of just the image element.

The rest of the script I found worked best between <script> and </script> in the header of the index.html page itself.

Now to fiddle to see if I can get it to disappear on a click anywhere, but to also open a new page if you actually click on the image element.


niko
Moderator
Quote
2022-08-10 12:16:24

Yes, sorry, right, the space is wrong between on and click You can put the code anywhere, it should just work.


micaelo
Registered User
Quote
2022-10-22 13:08:33

@ ivarforkbeard

In case you haven't solved the problem yet, here is my solution in a similar situation, i.e. close an info box on click.
🔎︎

Assume my info box was your image.
- Put the link to the offer page behind the image.
- Place a styled button inside the image.
- Style it as you want, just an X or Close or whatever
- Add the code as shown to the button
- Replace my container ID with your image specs
- Save and enjoy


Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "Internatio?al" (you are not logged in)


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


   






Copyright© Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact