Replacing Javascript with CSS for Multi-level Mouseovers
Multi-level mouseovers? Yes, it’s pretty cool. Imagine moving your mouse over a picture and having it change. I’m sure you’ve seen that plenty of times. But having your mouse move to a certain spot on the picture and have it change yet again? That’s an extra dimension of interactivity with your visitor. To see an example of this effect, check out Multi-level Mouseovers Example.
I’m self-taught when it comes to web development. I’m sure I’m not the only one to use a technique like this. I read a lot, experiment and research online. My first website was AncientSuns.com, established 14 years ago, last month. Back then, I only knew a little HTML and developed the layout using tables. Yeah, right, I know. That’s so “old school,” but you have to start somewhere.
I couldn’t find any articles on doing this, so I created my own method in Javascript. The problem with Javascript is that some people turn it off.
Now, older and wiser, I have fallen in love with CSS. I’ve been using it for years, but keep learning more and more about it. My newest websites use CSS and the tag to handle layout for a better experience and easier management.
For my AncientSuns.com website, I used Javascript to create a number of special effects, especially for mouseovers. But I have been concerned that because some people turn off their Javascript, they won’t get the benefit of the mouseover effect. What kind of effect? It’s relatively easy to have a mouseover change from one picture to another. Javascript has done it. CSS does it. But I needed something more than a simple mouseover. I needed to have the picture change to a third image when the visitor moused over a specific region of the picture. And above is an example of that, done in CSS. I call it multi-level mouseovers.
It works just like the Javascript. The visitor won’t know the difference, unless they turn off Javascript. What’s cool about this, the user can’t turn off CSS, so everyone gets to experience the effect. Javascript is great for other things that CSS can’t do, so don’t give up on that technology. We still need it.
How It’s Done—Step-by-Step
The old method I’ve used for years involved the tag, Javascript mouseovers and 3 pictures. This method uses only the 3 pictures and some CSS. No more tag and no more Javascript. Let’s say we have 3 pictures in a folder called “pix.”
First, here are the 3 pictures, separately.
First, we set up our style by creating a container class for the big event. This will flow with the rest of the page by being set to a relative position. There are many other ways we could’ve handled this. For instance, we could’ve made it the width of the pictures and made it float: right.
.cu {
position: relative;
top: 0px;
left: 0px;
width: 750px;
}
The next container will hold our first picture. Instead of using the [image error] tag, we make the picture the background of our ID division.
#pic1a {
position: absolute;
background-image: url("pix/sky1a.gif");
width: 360px;
height: 360px;
top: 30px;
left: 30px;
}
This is set to an absolute position within our relative container, allowing us greater control. The width and height, of course, are the dimensions of the picture so we don’t have to worry about background-repeat issues. Regrettably, this doesn’t have an alt attribute, so be sure to put all the appropriate information in the picture caption.
The next style gives us the first level of mouseover effect.
#pic1a:hover {
background-image: url("pix/sky1b.gif");
}
Preparing for the Third Level of Multi-level Mouseover Action
Now, it starts to get interesting. We need the exact location of our “hotspot” within the picture. Where do we want the third picture to be triggered? If we open the second picture in a picture editor, we can find the location of the desired star. Then, we need to determine how wide and high our targeted “hotspot” area should be. Half of this width should be to the left of the targeted location. When we establish the left and top properties, the width and height will have the targeted point at its center.
#hotspot1 {
position: absolute;
width: 16px;
height: 16px;
left: 200px;
top: 121px;
/* border: 2px solid magenta; */
z-index: 100;
}
I chose to have the hotspot be 16 pixels wide and high. The z-index of 100 puts the hotspot on top of everything, unless I choose a higher number for something else.
Notice the commented-out border. I used this to ensure I got the location correct. But be warned. The thickness of the border (even 1 pixel) will throw it off a tiny amount, so this is only for close approximation.
Next, we insert the container for the third picture. Again, this will receive a background-image property, instead of an [image error] tag. This will happen when the mouse hovers over the hotspot, defined above.
#pic1c {
position: absolute;
width: 360px;
height: 360px;
top: 0px;
left: 0px;
z-index: 99;
}
Again, the dimensions are the width and height of the picture. For the last of our style, we create a hotspot:hover pseudo ID and adjacent sibling selector combinator. If you don’t know about combinators, that okay. I didn’t until recently, either. As a part-time programmer and web developer, I’m frequently looking at other topics. Glad I discovered this gem. For more on CSS Combinators, check out the article at W3Schools.com.
#hotspot1:hover + #pic1c {
background-image: url("pix/sky1c.gif");
}
I could’ve used a general sibling selector combinator, instead of the adjacent sibling, but I had only one background which needed changing. The general is for more than one, but it works in this case, too.
The HTML to Go with It All
Now, for the HTML which puts all that style programming to work. Even with the comments, it looks deceptively simple. But that’s the power of CSS.
Again, be sure to check out the multi-level mouseovers demonstration example.
I’d love to hear what you think about multi-level mouseovers. And, of course, if you have any questions, please let me know. Part of learning is sharing. Every time I teach someone something, I learn, too. So, don’t be shy.
The post Replacing Javascript with CSS for Multi-level Mouseovers appeared first on Rod Martin Jr.
