I'm playing around with Active Desktop on an old WinXP machine.
I have my background set up with an iframe and links pointing it to certain folders to make it easier/faster to navigate. I'd like a link to change the background-image of the iframe without having to resort to make a new page everytime I find a new image I want as a background-image. While I have no clue how, I'm fairly sure it's something CSS ought be able to handle.
The catch is that Active Desktop refuses to run Javascript.
So is it possible to change the background image of a page by clicking a link without using javascript?
via CSS you could use the pseudo :hover
However, that would only last for as long as you hover. If I understand you correct, you want a permanent change of image without scripting, or just without JS? You could try WSH. Perhaps there is some useful function in there, or maybe VB?
Related
I'm trying to make a lightweight website using no (or just a little) of JavaScript. So just HTML and CSS.
I'm working on a page where I'm summarizing images and when we click on that image it scrolls to the end of the summary where I display every image on large scale and explain what it's about.
So everything is working with a href to an anchor but the problem is that since I want to make the website as light as possible, I'm using loading=lazy on my images but the href anchor trigger every loading on the way...
Is there a way to use both href anchor and lazy loading without JavaScript (or in a lightweight version)?
I found out that scroll-behavior: smooth; in css trigger the loading of every image on the way
So if I don't that use that transition I don't have to put JS on that page !
But if it's something you really want, you can hide divs with large images and write a simple function to display it when you click on the thumb.
So, basically I am trying to make an overlay for a website, like a sidebar, but I don't want the css of a website to interact with my HTML.
Up to now I tried to do that with the help of an iframe (in the foreground), but the user can't click through that.
The next thing I would try is to load the webpage into an iframe and my HTML as the actual website.
But I am certain that there is a more "clean" way to do what I am trying to do.
Well, the best approach to isolate styles, which is also suggested by the comments, is to just make use of the Shadow DOM to isolate styles. But of course, the simplest approach would have been to move the iframe out of the viewport and to just have an event handler on the parent window. If I remember correctly I had the event handler for the animation of the sidebar inside the Iframe itself which is why the event didn't propagate properly, and thinking back it's kinda obvious. But maybe this helps someone... 🙂
Like #Burhan suggested in the comments, here is a link to my repo with an example approach in vanilla Typescript using the Shadow DOM: https://github.com/grievouz/chrome-extension-sidebar-example.
And here is another one in Javascript using React and an Iframe: https://github.com/segmentio/chrome-sidebar.
I would like to ask whether it's possible to have a code for image change on hover without CSS and without the function onmouseover
For my web, I need a simple html code, unfortunately, the eshop system does not support the onmouseover function
Is it possible?
Thank you very much
Ok, so im creating a website and to make it look fancier, I need to make the image responsive to the mouse (i.e. when the cursor is over the image, when the image is click, etc.) Does anyone know the code or another way of doing it? I am using google sites. Thanks!
I would recommend using JQuery to select and add some actions to your images have a look at this tutorial it is quite good.
You can take the idea and change it to your liking.
I have a few "a href" image links and hovers on a website for navigation (www.byrdnick.com, in the non-mobile version of the site). It seems that these image links confuses iOS browsers. When you tap the image link once, it changes to the hover image. When you tap the hover image, nothing happens. When you tap the hover image a second time, you are finally redirected to the link.
Is there any way I can make these image links work or am I going to have to try a whole new method like a map or something?
Thanks in advance to all you gurus who help guys like me out!
This is because of all the strange stuff your psd2css.js javascript does to tweak your divs and links.
I never used this tool, but it seems that your Web page was generated using an tool called psd2cssonline? This tool seems to add some obscure treatments behind the scenes to all your <a href> links. This is easy to see in the psd2css.js file, once the document is loaded, the script adds some magic to all your <img> hover functions.
I didn't study the whole javascript added by this tool, but I'm pretty sure that it is the reason of the problems. This tools does not seem to be compatible with touch-screen devices or somehow does mess with touch events in a mobile environment where "hover" are non-sense (you can't "hover" an item on a touch-screen!), and will probably need to be updated to be able to manage mobile versions of the web sites it generates.
Meanwhile, you may try to disable this script (and everything else that may be generated by this tool to automatically add behavior to your links) when your website is accessed on mobile, to avoid messing with the "hover" events in such cases and simply keep the standard behavior that you have without any similar script.
As long as it's something similar to what I have below and you don't have any odd class that is conflicting, you should be ok.
<img src="some image" />