Hey guys, I Useually have no problems with css/html but im having trouble with the hover attribute, I know how it works and whats going on so heres the problem I have a class of images that vary such as <img class="movimg" src="1.gif" /> <img class="movimg src="2.gif" /> <img class="movimg src="3.gif" /> <img class="movimg src="4.gif" /> Basically I want to apply 1 hover image to all these images. I know I can do it by applying a id to each image and control the images via css like Background-image: url('1.gif'); but by doing this my css file will be very large. If I do it by adding a .movimg:hover { background-image: url('mo.gif'); } it works BUT the mouseover image appears under my images, therefore you dont see the mouseover, Are there any css experts in this forum that can help me solve this? Maybe there is a "overlay" type property that I dont know about? Thanks in advance
I´ve recommended this before to people. It uses only one image http://www.alistapart.com/articles/sprites/ You can do almost anything with it.
I knew this way and I belive its the incorect way to do what I want to acheive, Thanks anyway, Why its not the best way? I have 20 images. To do this im gona have to remake the 20 images and also make 20 seperate css ids, then 20 seperate ids for the hover, thats around 400 lines of css.
What you are trying to do is 'swaping' image. This can not be done the way you are trying to do. Even if by fluke you succeed with a browser, the other browsers could give you some problems. If you want to swap images which are placed 'inline', it could be achieved with a little JavaScript. Check dynamicdrive dot com slash dynamicindex15 slash domroll.htm If you want to do it with css, you will have to use both the image as background images and swap on rollover. Also, for this I would advice you to use a p, li or any other block element than the img tag itself. 400 lines of css will add only a few KBs for your users to download. Also, it will be a one time download. If you try to do it with inline images, the images will be downloaded every time the page is loaded. which is more pain.
If your CSS file gets crowded make a seperate one for the images. Just call two CSS files to do this: <link rel="stylesheet" type="text/css" href="/library/shared/css/master.css"> <link rel="stylesheet" type="text/css" href="/library/shared/css/mouseover.css"> Put all the image ids in the mouseover.css. Should keep you organized better.
Ok thanks, Didnt know about the "one time download" Yeh I was thinking more of the actual size of all the text, but still thanks
Actually, it's better to have a single huge CSS file than multiple smaller ones. This is because there's time taken for servers to talk to each other, ask for files and get the ok to download files and then downloading only x-number files at the same time. 10kb file will get loaded faster than 2 5kb files. So, stuff 'em all together. People seem to be pointing you in the right direction. Your original idea was swapping a foreground image (the HTML img element) with background images. Indeed it's smarter to keep all of the images in the background and just slide them around. Another link: http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites <sean connery>YESH</sean connery> What I said for CSS files goes for image files too. A single 100kb image file will load faster than 2 50kb images. Each separate file needs to spend time asking and waiting for the ok. Images can also be cached by the browser, if they are reused throughout a site (in a menu, for instance). I can has menus: http://stommepoes.nl/Kyle/practice.html Kyle's design, my ugly girly font. This is Gilder-Levin image replacement and "sprites" (a single image holding both normal and :hover states).