Ruined My Life

Correct, Non Preloading CSS Image Rollovers

In a previous post I touched on and provided some code for CSS Image Rollovers. That code worked properly in Internet Explorer, with a pre-loading script. Through doing some more reading and tinkering I’ve decided to share the “best” way to implement the effect for cross browser compatibility.

This time around we’re going to use Unordered Lists to hold our “navigation header” while also holding the individual rollover effects per link. In fact if you take a glance over to the right side of this page, the menu uses the same technique, except I’m not using a background image for the rollover effect. This time around instead of switching images based on element state (hover, active, so forth) we are going to move the background images position to give us a “rollover” effect.

The advantages to using a single image and moving its background position for Image Rollovers are numerous. First of all there is no preloading necessary as only one image is used. CSS Based Image rollovers that use multiple images work “fine” in most browsers, however with Internet Explorer the site will “load” each time that rollover is used, and if images haven’t loaded with other browsers the rollover effect may be missing. Now that we understand the reasoning behind using a single image, let’s get started!
(more…)

Popularity: 100% [?]

Share This

Restricting Access by IP Address and Referer Using .htaccess

Anyone running a blog or a website that has an open commenting system is sure to be more then familiar with spam. WordPress’s Akismet service works great, however if you have content on your blog or any website that isn’t protected by Akismet you’re bound to be hit by spam.

There are numerous ways to restrict access to your website PHP, .htaccess, mod_rewrite and so forth, however in this example we’re going to use a .htaccess file to deny acccess by IP Address. Below you will find the code to paste into your .htaccess file to restrict access. Whenever a user visits your website from the IP or IP Blocks listed below they will be redirected to your 403 Forbidden page.

order allow,deny

deny from 59.34.113.
deny from 60.176.134.
deny from 60.178.66.
deny from 61.149.45.
allow from all

To make the above function correctly simply copy and paste the above text into your .htaccess file, once updated upload the file to your webserver. How the above code work is as follows; the user connects to your website, .htaccess tells Apache to deny the IP addresses listed in the “deny from xxx.xxx.xxx.xxx” line, once denied the web server send them to your 403 Forbidden page. By adding a full IP range of XXX.XXX.XXX.XXX you block from that IP only, however by adding only XXX.XXX.XXX. you block from that the entire range that follows the XXX.XXX.XXX. . Basically the “blank space” is a wild card. Be careful when you begin blocking large ranges of IP Addresses, as some countries/telecomms may only have a few IP Blocks.

By using the same syntax as the code above you can also block users based by referer. Many spammers crosslink between numerous sites to boost their search engine rankings. So in short to block by referer we use the following code.

order allow,deny

deny from www.nasty.com
deny from .nasty.com
allow from all

Just as before we’ve blocked users coming from the above referer. Before you implement any of these changes be sure you double check all referers as well as IP’s that you plan to block. By making a small typo you can eliminate access to your website all together.

If you’d like a semi-thorough list of IP Addresses that are of confirmed spammers that have got around Akismet, you can click here to get a copy of the current .htaccess I use on all of my websites. Use this at your own discretion!

Popularity: 68% [?]

Share This

New Design

So I finally decided it was time for a new look after almost two years using the same old rather dull layout. It was neat when I first downloaded the theme and installed, but over time it got very old and boring. The design will be under constant tweaking for the next couple days I’d reckon. Decided to sit my ass down and implement a layout with Wordpress. Really, I must say it really wasn’t that bad, just pretty damn monotenous.

Popularity: 25% [?]

Share This

Image Preloading Script

In my previous post regarding CSS Image Rollovers there was question asked whether or not the image is preloaded or not. The image is not preloaded, so on the first visit to the page the image will have to load, causing a brief blank spot to be where the button is. To resolve this we simply need to use a JavaScript based Image Preloading Script which can be found below.

var imageload=new Array()
function preload(){
for (i=0;i
imageload[i]=new Image()
imageload[i].src=arguments[i]
}
}

preload(”http://www.name.com/name.jpg”,”http://www.name.com/name2.jpg”, “http://www.name.com/name3.jpg”)

When you use the above script, be sure to change the location of the images in the above URLs to reflect where your images are located.

Popularity: 10% [?]

Share This

CSS Image Rollover Effects

Note: This is a technique to develop CSS Image Rollovers, however it isn’t the most effective nor correct, for a more indepth, correct technique please use the following to create CSS Image Rollovers.

So I’ve been working on a layout for a website a couple of guys and I are putting together to sell independent games online with. I, myself tend to try and stick with XHTML when designing a site. I’ve heard of people creating Image Rollovers using CSS, and decided to try and figure this out myself, and what do you know, I suceeded! Good bye days of using JavaScript to complete such a feature, and hello my good friend Cascading Style Sheets.

The process for creating image rollovers in CSS is simple, and I’m gonna throw the code and technique in here so all who want to see can. If there are any questions drop a comment and I’ll see what I can do for you.

Cascading Style Sheet (CSS) Image Rollover Code

/* This is the Default Button */
div#button a{
font-family: Arial, Helvetica, Verdana;
font-size: 12px;
color: black;
text-align: center;
width: 100px;
height: 20px;
background-image:url(images/button1.jpg);
background-repeat: no-repeat;
}

/* This is the Highlighted Button */
div#button a:hover, div#button a.current{
background-image:url(images/button2.jpg);
color: black;
}

Pop the above code in your style sheet. In this case, create a DIV with the name of “button”. Inside of the DIV named button you will want to put each element you want to have an Image Rollover on inside of an anchor, you know the good ol “a href” tag. Once that’s done, tweak the CSS to your likings, make sure you change the image names to reflect what you are doing, and you’ll be good to go.

Popularity: 23% [?]

Share This