On my website SolidGames.com I use this html code to display every game: <a href="http://www.solidgames.com/arcuz.html" class="gameo"> <img src="http://www.solidgames.com/games/images/arcuz.jpg" alt="" /> Arcuz</a> Code (markup): Where the CSS class "gameo" looks like this: .gameo { display: block; float: left; width: 80px; height: 100px; margin: 5px; background: #FDE425; border: 2px solid #E69D00; text-align:center; font-size: 11px; color: #404C9A; text-decoration: none; font-family: Arial, Helvetica, sans-serif; line-height: 14px; overflow: hidden; outline: none; } .gameo:hover { display: block; float: left; width: 80px; height: 100px; margin: 5px; background: #3372B4; border: 2px solid #86BCE2; text-align:center; font-size: 11px; color: #fff; text-decoration: none; font-family: Arial, Helvetica, sans-serif; line-height: 14px; overflow: hidden; outline: none; } Code (markup): You can try it on the site you'll see that when you put your mouse over the games it changes the color of the background, the border and text. The problem is that SEO wise it would be better to remove the image tag from the <a> tag and put the image tag before of after the <a> tag like this: <a href="http://www.solidgames.com/arcuz.html" class="gameo">Arcuz</a> <img src="http://www.solidgames.com/games/images/arcuz.jpg" alt="" /> Code (markup): Would it be possible to format it with CSS so that it would still have the exact same behaviors when the mouse is over? Any help would be greatly appreciated!
Yes, with operators like +, :after, or something like that (I can't remember which exactly, sry). But these doesn't work well in all browsers. What about javascript?
Hey. First of all you can "shrink" your css code on gameo:hover like this: gameo:hover { background: #3372B4; border: 2px solid #86BCE2; } Code (markup): since only those 2 properties are changing on hover, the others will be "taken" from the class .gameo. There is no need to declare them again. Try it and you will see. If you do this on every "CSS part" you have, I have not checked your CSS, you can improve loading time a little bit and you will save bandwidth I think your site you need some optimization. Use a cookieless domain for static contents and you will improve your speed a lot, believe me. I have an example here: http://special.studenten-vermittlung.com Nearly all static resources (images,css,javascript) are on a cookieless domain (Apache 2.2 server and I have tweaked the settings for that domain) and the Google Page Speed Score is 99/100. Combining all CSS/JS is a speed improvement too and very important. If you need more informations I could do a "small" report about your site. I can not confirm this because I do not know exactly. I could ask our SEO partner company, if really needed. What I can tell you is that a title="game title" and alt="game title" for your <img> tags would help you, too. First time I heard about "removing <img> from <a> tags". If anyone could confirm this (with proof if possible) then gimme a note. Back later, Michael
Hi AKnogood, I am not sure where you heard that it is better not to have an image inside an anchor for SEO? I don't see how it would make much difference to be honest. However, you could just have the image as a background of the anchor tag? That way the link will just be the text and no image involved. Have a look in to image sprites.
Zeh: It looks like IE doesnt support :after so I'll have to find another solution... CSM: Thanks for the "shrink" tip. I'll also try this cookieless domain thing and see how it goes. pmek: I tried to use the image as background but didnt manage to set the proper padding/margin to center the image but still have the colored background in all of the box... I'll give it another try...
@AKnogood I will start a service to offer webspace from a cookieless domain soon. In the meantime read here: http://code.google.com/intl/de-DE/speed/page-speed/docs/request.html#ServeFromCookielessDomain I'll give you a shout