There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.
The background for the div is an image i.e. the background is the text ("Learn"), which is an img. When you hover over the img will switch from a gray looking img to a orange looking img.
How would you preload, because I can see how it would matter when you reload the page on IE7. There seems to be a little choppiness in the img.
Personally, I'd load the images in to the page and hide them using CSS. (display: hidden;) That way, it doens't rely on having Javascript turned on like a lot of the preloaders do.
There is still a chance that your visitors will notice some choppiness if they mouse over the images too soon, but this can't really be helped, unless you use one image for each menu item, and move it on mouseover. It's a technique I've used in the past very effectively.
The other way we used to do it is load them all at the bottom of the screen, like this --
<IMG SRC = "images/wbln.jpg" NAME = "img11" HEIGHT="1" WIDTH="1">
then use javascript to swap the images into the right place when mousing over. Either way works.
I did the joined picture trick where you take the rollover state and the non-rollover state and join them side by side so they are only 1 picture and just moved the position.
It fixed the loading choppiness and also fixed a bug in opera but it still did not fix the problem with IE6. The image loads but it will not move the position on rollover.
use javascript onMouseOver() to set any property of any link or image in the page after it is loaded, that is the easiest way to overcome CSS you can't change. If you can, then just change it to what you want.
if someone does not have javaScript enabled then this feature will not work. I'm trying to avoid it but I might have a fix for it using an htc file. It will scan the .css file and if it find the :hover it will run a function to take care of this problem. I'm just wondering if the htc is working like a javaScript.
So javascript was the solution then, not the one you accepted as the solution? You decided that my suggestion of on mouse over was the best solution -- just for the record?
I'm using the javaScript and the trick with loading one picture. The mouseover will just change the position to the picture.
Thats why I split up the points evenly. I figured you were both so helpful, should spread the wealth.
For the record. I didn't know about the accepted solution and assisted solution till now. If i had to do it again I would put your answer as the accepted solution and shonk as the assisted.
0
Featured Post
There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors.
Create your external css file by saving it as style.css then set up your style tags:
(CODE)
Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…