#82: CSS Image Switcher
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.
Comments
Remember, you can set the Image you want on top as z-index 1, and make the hover z-index be 2. This allows you control of what “default” image you want displayed on top (like in case of a portfoilio. My question is – How do you set an Image to be on top (until the roll-overs) that is not part of the rollovers. Say, a Logo is at z-index 1, and the rest of the images are at z-index 0 until the rollover state of z-index 2. So – 5 images, and 4 hover z-index changes. the 5th being a default image always on top. It’s a Great non javascript onhover trick. Thaks.
@Tim
Actually, that would be extremely easy. If you download his source code, add an a tag above the one with the id of “one”, and give the new one an id of logo. So you have this: a/> a/> and so on In the css create #logo, give it a background, and give IT the z-index of 2, and take the z-index off of #one. Nice little bit of css work there Chris. Personally I would have gone the javascript way, but I actually might use this sometime. What I like about this is, I didn’t even have to watch the screencast to get it. Made sense just looking at the css. I love seeing this kind of stuff.
nice one – really simple round-up yet again.
I know of variuos ways to accomplish this, but hav never seen one that’s so simple, with so little markup. Good job!
I have always been curious about a unique way to use z-index. Usually it’s just use to position layers on top of each other but… this is still doing that but having a better use. Great idea! 🙂
Great, many thanks for this! I recently tried to do a roll-over on an image that I have fade-in with JS — couldn’t get it to work. I’m going to try again with this technique.
Wow… Chris, what happened? Did you get religion or something? From the absolutely worst screencast you’ve ever done (Ajaxing WordPress) – and I’ve seen them all; to probably the best! From rambling, confusing, unorganized and sloppy to precise, concise, planned, organized and extremely focused and on task! Don’t know if you have been officially “baptized” into this new religion or if you are merely “taking the missionary lessons” but this was enjoyable and REALLY GOOD! Keep it up!
Ok – I noticed the difference first thing as well, but one of the things I love about Chris’ screencasts is they seem real and accessible. It almost seemed like someone had scolded him and he was trying too hard to be “better”. Granted the “Ajaxing WordPress” was one of the shakier, but today’s seemed just a little too rehearsed and formal. I miss the singing/humming figuring things out / troubleshooting stuff. This was a great screencast and great info, but don’t change too much. You’ve always been GREAT in these. Mikey P.S. Please don’t let it be that he “got religion”… 🙂
Something else I learned today was a better understanding of z-index. I thought that z-index incremented automatically for each item that was loaded in order. Now I understand that z-index is more like a series of glass shelves… shelf 0 is default – each item “placed” on that shelf covers the item below it, but on the same shelf. z-index really indicates a higher shelf to place things on. So, presumably if several items had the same z-index of 10, then they would be “placed” on shelf 10 above shelf 0 and each item would still cover the item below it on that same shelf based on the order that it was loaded. I don’t know if that makes sense to anyone else, but it completely clarified the z-index behavior for me. Another great reason to watch these screencasts… Thanks, Mikey
That would be really confusing if z-index updated for every element placed on the page, heh. You would have to work fairly closely with the document to get that one to work. Good analogy!
Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
WebComponents switch toggle between two images (SVG)
License
CICCIOSGAMINO/images-switch
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
Simple images-switch Lit component, you can switch between SVG image in background. Higly
--switch-width: 150px; --switch-height: 60px; --circle-margin: 15px; --switch-border: 4px solid #000; --switch-border-checked: 4px solid #00a2ed; --switch-bk-color: #fff; --switch-bk-ck-color: #00a2ed; --switch-bk-disabled-color: #ccc; --circle-bkcolor: #000; --circle-ck-bkcolor: whitesmoke; --text-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --text-font-size: 2rem; --text-font-weight: 300;
images-switch truetext pl-s">On" falsetext pl-s">Off">images-switch>
--switch-width: 160px; --switch-height: 80px; --circle-margin: 9px; --circle-bkcolor: whitesmoke; --circle-ck-bkcolor: whitesmoke; --switch-bk-ck-url: url(/images/dark_o.svg); --switch-bk-url: url(/images/light_o.svg); --switch-bk-disabled-url: url(/images/disabled_o.svg);
--switch-width: 160px; --switch-height: 80px; --switch-border: 4px solid #000; --switch-border-checked: 4px solid #faf614; --circle-url: url(/images/moon.svg); --color-scale-purple-6: #6e40c9; --color-scale-purple-9: #271052; --circle-margin: -7px; --bk-ck-color: var(--color-scale-purple-9); --circle-bkcolor: #040d21; --circle-ck-bkcolor: var(--color-scale-purple-6);
--switch-width: 160px; --switch-height: 80px; --circle-margin: 9px; --border: none; --switch-bk-color: #ff5683; --switch-bk-ck-color: #72e06f; --switch-bk-disabled-color: #bbb; --circle-bkcolor: whitesmoke; --circle-ck-bkcolor: whitesmoke; --switch-bk-ck-url: url(/images/check.svg); --switch-bk-url: url(/images/cross.svg); --switch-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6); --circle-shadow: 0 0 0px 2px rgba(100, 100, 100, 0.2); --circle-shadow-focus-on: 0 0 5px 6px #FFDE03; --circle-shadow-hover-on: 0 0 5px 6px #FFDE03; --text-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
npm install --save @cicciosgamino/images-switch
script type pl-s">module"> // Importing this module registers as an element that you // can use in this page. // // Note this import is a bare module specifier, so it must be converted // to a path using a server such as @web/dev-server. import '@cicciosgamino/images-switch' script> images-switch truetext pl-s">On" falsetext pl-s">Off">images-switch>
| Name | Type | Default | Description |
|---|---|---|---|
| value | String | » | Input value field |
| checked | Boolean | false | Input checked attribute |
| disabled | Boolean | false | Input diabled attribute |
| trueText | String | » | Property to set the text of the switch when true |
| falseText | String | » | Property to set the text of the switch when false |
| Name | Default | Description |
|---|---|---|
| —switch-width | 80px | Switch width |
| —switch-height | 40px | Switch height |
| —switch-border | none | Switch border when unchecked |
| —switch-border-checked | none | Switch border when checked |
| —switch-shadow | none | Switch shadow (out or inside switch border) |
| —switch-bk-color | transparent | Switch background-color when unchecked |
| —switch-bk-ck-color | transparent | Switch background-color when checked |
| —switch-bk-disabled-color | transparent | Switch background-color when disabled |
| —switch-bk-focus-color | transparent | Switch background-color when focus |
| —switch-bk-hover-color | transparent | Switch background-color when hover |
| —switch-bk-url | none | Switch background SVG url when unchecked |
| —switch-bk-ck-url | none | Switch background SVG url when checked |
| —switch-bk-disabled-url | none | Switch background SVG url when disabled |
| —circle-url | none | Circle SVG url |
| —circle-ck-url | none | Circle SVG url when checked (TODO) |
| —circle-disabled-url | none | Circle SVG url when disabled (TODO) |
| —circle-margin | 3px | Circle margin |
| —circle-bkcolor | transparent | Circle background-color when unchecked |
| —circle-ck-bkcolor | transparent | Circle background-color when checked |
| —circle-shadow | none | Circle shadow |
| —circle-shadow-focus-on | none | Circle shadow when focus |
| —circle-shadow-hover-on | none | Circle shadow when hover |
| —text-font-family | sans-serif | Font-family if text is used |
| —text-font-size | 2rem | Font-size if text is used |
| —text-font-weight | 300 | Font-weight if text is used |
| —text-absolute-top | -1.5rem | Absolute position top |
| —text-absolute-right | -7rem | Absolute position right |
🤖 Write HTML and JavaScript
Import the component’s JavaScript module, use the component in your HTML, and control it with JavaScript, just like you would with a built-in element such as :
> html> head> meta charset pl-s">utf-8"> title>My Example Apptitle> script src pl-s">./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js">script> head> body> images-switch>images-switch> script type pl-s">module"> // Importing this module registers as an element that you // can use in this page. // // Note this import is a bare module specifier, so it must be converted // to a path using a server such as @web/dev-server. import '@cicciosgamino/images-switch' // Standard DOM APIs work with Web Components just like they do for // built-in elements. const s = document.querySelector('images-switch') script> body> html>
Serve your HTML with any server or build process that supports bare module specifier resolution (see next section):
# use globally instelled npm install -g @web/dev-server # install the project dev-dependencies and npm run npm install npm run serve
All @cicciosgamino Lit components JavaScript modules that use bare module specifiers. Bare module specifiers are not yet supported by browsers, so it is necessary to use a tool that transforms them to a path (for example from @cicciosgamino/images-switch to ./node_modules/@cicciosgamino/images-switch/images-switch.js ).
Two great choices for tools that do this are:
- During local development, use open-wc’s @web/dev-server with the —node-resolve flag.
- For your production deployment, build your application with Rollup using the rollup-plugin-node-resolve plugin.
Got something interesting you’d like to share? Learn about contributing.
Actually acessibility is handled with the role=switch and mirrororing the checked and disabled attributes from the native checkbox input element to the web component.
The elements HTML structure is initialized in a Shadow DOM, so it is impossible to apply CSS to it. If you need to change the element’s default style for any reason, you should open up a new issue (or a pull request!), describing your use case, and we’ll work with you on solving the problem.
Browsers without native custom element support require a polyfill. Legacy browsers require various other polyfills. See [ examples/index.html ][example] for details.
Reach out to me at one of the following places:
Donate help and contibutions!