+DarkFlare Posted September 19, 2017 Share Posted September 19, 2017 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! Quote Link to comment
+arisoft Posted September 19, 2017 Share Posted September 19, 2017 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 Quote Link to comment
+DarkFlare Posted September 19, 2017 Author Share Posted September 19, 2017 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. Quote Link to comment
+The A-Team Posted September 19, 2017 Share Posted September 19, 2017 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. Quote Link to comment
+DarkFlare Posted September 19, 2017 Author Share Posted September 19, 2017 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. Quote Link to comment
+Team Microdot Posted September 19, 2017 Share Posted September 19, 2017 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. Quote Link to comment
+Team Microdot Posted September 19, 2017 Share Posted September 19, 2017 (edited) Hmmm... maybe it IS possible using inline css - take a look at this page Edited September 19, 2017 by Team Microdot Quote Link to comment
+thebruce0 Posted September 20, 2017 Share Posted September 20, 2017 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. Quote Link to comment
+Team Microdot Posted September 20, 2017 Share Posted September 20, 2017 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. Quote Link to comment
+DarkFlare Posted September 20, 2017 Author Share Posted September 20, 2017 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! Quote Link to comment
+thebruce0 Posted September 21, 2017 Share Posted September 21, 2017 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. Quote Link to comment
+arisoft Posted September 21, 2017 Share Posted September 21, 2017 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. Quote Link to comment
+Team Microdot Posted September 21, 2017 Share Posted September 21, 2017 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. Quote Link to comment
+arisoft Posted September 21, 2017 Share Posted September 21, 2017 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 Quote Link to comment
+thebruce0 Posted September 21, 2017 Share Posted September 21, 2017 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. Quote Link to comment
+arisoft Posted September 21, 2017 Share Posted September 21, 2017 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 Quote Link to comment
+thebruce0 Posted September 21, 2017 Share Posted September 21, 2017 Nice implementation! Have you helped VLADAMIR fix the cache? Quote Link to comment
+NYPaddleCacher Posted September 22, 2017 Share Posted September 22, 2017 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. Quote Link to comment
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.