Is it possible to create Rollover Buttons on geocache pages?

[+DarkFlare]

Hello Everyone! I'm hoping someone can help me. I've been trying to create a simple, image based rollover button in HTML for a geocaching series. But whenever I add in code for it, the coding tends to disappear once the page is saved. (leaving only the basic image link code) I'm not sure if it means I can't create it in this way or if i'm just missing something. 

Basically I'm hoping that someone can help me create the coding so that when a user runs their mouse over the image, it changes to a second image to make it look like the text lights up. I have included an example of two images i want to flip between. At the moment I only have a basic image link which is ok but i think it would really stand out as buttons if i can do a rollover.

My basic image link coding

<a href="http://www.geocaching.com/geocache/GCXRHE_great-white-north-geotour-victoria-vistas?guid=3d88eb59-845e-44de-90bc-760c76feddbf" target="_blank"><img src="https://i.imgur.com/H9OWpXO.png" border="0" alt="image link British Colombia" /></a>

If it's not possible, then i'll just stick with my image links. Figured before I give up, i could throw it out here and see if an expert is watching. Thanks!

[+arisoft]

22 minutes ago, DarkFlare said:

whenever I add in code for it, the coding tends to disappear once the page is saved

This happens when you are using some tag or attribute which is not allowed in the cache description.

Do you mean something like this ?

http://www.table2css.com/articles/how-create-rollover-image-button-html-and-css-without-any-javascript

[+DarkFlare]

20 minutes ago, arisoft said:

This happens when you are using some tag or attribute which is not allowed in the cache description.

Do you mean something like this ?

http://www.table2css.com/articles/how-create-rollover-image-button-html-and-css-without-any-javascript

That's what I thought.

Unfortunately I don't think they allow CSS (like your example) in cache descriptions as any time i've tried it gets stripped out. Any example I could find of pure HTML code also got stripped out so i'm at a loss. 

[+The A-Team]

28 minutes ago, DarkFlare said:

Any example I could find of pure HTML code also got stripped out so i'm at a loss. 

Are you sure the box is ticked to indicate "The descriptions below are in HTML"? It's on the cache edit page about halfway between the terrain rating and short description sections.

[+DarkFlare]

49 minutes ago, The A-Team said:

Are you sure the box is ticked to indicate "The descriptions below are in HTML"? It's on the cache edit page about halfway between the terrain rating and short description sections.

Yup! I checked and most of the HTML is working. (font colours, static images, image links, URLs etc. all work fine) It's simply any rollover related coding that seems to get pulled out. 

[+Team Microdot]

I very highly doubt you'll be able to achieve your objective.

javascript isn't an option here and the only css styles that are supported are inline.

 

 

[+Team Microdot]

Hmmm... maybe it IS possible using inline css - take a look at this page

Edited September 19, 2017 by Team Microdot

[+thebruce0]

Those examples all use onmouseover and onmouseout to change the image. That's javascript. There's no way to do it using purely inline CSS styles.

[+Team Microdot]

9 hours ago, thebruce0 said:

Those examples all use onmouseover and onmouseout to change the image. That's javascript. There's no way to do it using purely inline CSS styles.

Good catch.

[+DarkFlare]

20 hours ago, thebruce0 said:

Those examples all use onmouseover and onmouseout to change the image. That's javascript. There's no way to do it using purely inline CSS styles.

I had a feeling this would be the case. Oh well I guess I will just have to stick with my static image buttons. Thank you for confirming. 

And thank you to everyone else for your responses! 

[+thebruce0]

As a side note, you can dynamically serve different images to a cache page if you host the image and script it But that's just a fun trick and completely unrelated to mouse interaction on the browser side.

[+arisoft]

56 minutes ago, thebruce0 said:

As a side note, you can dynamically serve different images to a cache page if you host the image and script it But that's just a fun trick and completely unrelated to mouse interaction on the browser side.

I tried this once but the script did not run after the image was inserted to the cache description unless the image was opened to a separate tab.

[+Team Microdot]

4 minutes ago, arisoft said:

1 hour ago, thebruce0 said:

As a side note, you can dynamically serve different images to a cache page if you host the image and script it But that's just a fun trick and completely unrelated to mouse interaction on the browser side.

I tried this once but the script did not run after the image was inserted to the cache description unless the image was opened to a separate tab.

it does indeed almost certainly rely on the page being refreshed.

[+arisoft]

35 minutes ago, Team Microdot said:

it does indeed almost certainly rely on the page being refreshed.

Refresh does not change the image source. Scripting was blocked somehow. You can try with this rollovering image

http://www.petercollingridge.co.uk/sites/files/peter/Blank Africa Map.svg

[+thebruce0]

4 hours ago, arisoft said:

I tried this once but the script did not run after the image was inserted to the cache description unless the image was opened to a separate tab.

There's nothing else relevant in the listing other than the IMG tag. It would all be done on server-end script on the image host. And the page would need to be force-refreshed (so the image isn't cached by the browser).  Otherwise you'd need to play with HTTP headers to have a browser-compatible no-cache image served so that everyone who just opens the cache page would always see a fresh dynamically created image.  I used this trick on one of my caches, and it took some fiddling to ensure the image would actually refresh on a simple page reload, across all major browsers.

SVG can work the same but only on browsers that support the SVG image/file type in the IMG tag.  Note that SVG in the IMG tag is non-interactive so mouse hovers won't work there either.

[+arisoft]

55 minutes ago, thebruce0 said:

SVG can work the same but only on browsers that support the SVG image/file type in the IMG tag.  Note that SVG in the IMG tag is non-interactive so mouse hovers won't work there either.

That's it. It does not work inside IMG.

Refrehing works very well. Shall we play a game?   https://www.geocaching.com/geocache/GC60P4D_tic-tac-toe

[+thebruce0]

Nice implementation!

Have you helped VLADAMIR fix the cache?

[+NYPaddleCacher]

14 hours ago, arisoft said:

15 hours ago, thebruce0 said:

SVG can work the same but only on browsers that support the SVG image/file type in the IMG tag.  Note that SVG in the IMG tag is non-interactive so mouse hovers won't work there either.

That's it. It does not work inside IMG.

Refrehing works very well. Shall we play a game?   https://www.geocaching.com/geocache/GC60P4D_tic-tac-toe

I came across that cache a couple of weeks ago and probably played 20 games before I gave up.  I'll be staying in a hotel just down the road a week from this Saturday.