Ruined My Life

Correct, Non Preloading CSS Image Rollovers

Blogged in Web Design, Internet by Matt on Thursday June 22, 2006

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% [?]

Restricting Access by IP Address and Referer Using .htaccess

Blogged in Web Design, Internet by Matt on Wednesday June 21, 2006

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: 67% [?]

New Design

Blogged in Web Design, Internet by Matt on Thursday May 25, 2006

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: 18% [?]

Spore Gameplay Video

Blogged in Computers, Games, Internet by Matt on Thursday March 2, 2006

I was browsing Google Videos and found this Spore Gameplay Video. Spore is a new game coming out that is created by Will Wright. You start out as a single celled organism and evolve on out from there. Simply amazing. Check out the video.

Popularity: 20% [?]

Image Preloading Script

Blogged in Programming, Web Design, Internet by Matt on Thursday December 1, 2005

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: 8% [?]

CSS Image Rollover Effects

Blogged in Web Design, Internet by Matt on Tuesday November 29, 2005

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: 21% [?]

Trackback · 4 Comments »

Ad Blocking Software may kill Free Content

Blogged in Internet by Matt on Wednesday July 6, 2005

So there’s an awesome little editorial column over at the The Inquirer about Doubleclick’s “Privacy Manager” making a claim that Ad Blocking software, such as Adblock will kill off the Internet’s free content. For a little exerpt:

Bernie Smith, the group’s privacy manager, whatever that is, claimed in an interview that tools like Adblock – an add-on to the Firefox browser - were linked to “a negative vibe against advertising in general”. ‘Vibe’? No, really, he actually used the V-word. Images of Oddball and Keanu flashed through my head, dude. Anyway, how much credence can you give an anti-ad blocking statement made by an ad man? Exactly.

And anyway, people’s reaction to ads – be they TV or Internet – is nothing to do a negative vibe. It’s hatred, pure and simple. A deep-seated, never-dimming rage at the way that advertising has become more prominent than the TV shows and sites they so-call sponsor. The average on the box is now closer to 20 minutes per hour which is why digital video recorders (DVRs) are such a nice idea. But what about on the Web? Does the arrival of ad blockers mean an end to free content? After all, this very site – a tower of newshound tenacity, innuendo and non-lethal spite – has ads framing and winking around its editorial gold.

Good stuff, be sure to check the full article out.

Popularity: 12% [?]

Why Firefox?

Blogged in Internet by Matt on Friday June 3, 2005

The good old browser war argument, and this one I can sum up with only one choice, Firefox. I know there are loads of people, who will call us strictly Firefox users, “elitists”, “web nazis”, “open source junkies”, among others. The fact of the matter is, Firefox is a completely free web brower that uterly desimates the others. Firefox is superior to IE in countless ways, safer, faster, less resource intensive, better page rendering and much more.

Being a web designer I’m always checking pages for constant consitency over various browsers and OS’s, and Firefox renders webpages to the strict rules of the W3. To keep the list of features coming in, Firefox is 99% safer then Internet Explorer. Firefox does not use ActiveX and any plugins that are needed for Firefox must be enabled by the end user, meaning users should not get spyware/adware unless they allow it to come through by enabling or disabling options.

The choice is clear, Get Firefox and take back the web!

Popularity: 15% [?]

FBI and U.S. Immigrations and Customs Enforcement raiding BitTorrent Sites

Blogged in Internet by Matt on Thursday May 26, 2005

It looks like today, the Gestapo err FBI and ICE have started to crack down on BitTorrent sites through out America. It Looks like EliteTorrents is gone, at first many people thought this was a DNS hack that brought down the site, now however more information has been released confirming this was done by the Government.

Building on the success of Operation Gridlock, a similar takedown announced by federal law enforcement last August that has already led to the felony convictions of three P2P copyright thieves, Operation D-Elite targeted the administrators and “first providers” or suppliers of copyrighted content to the Elite Torrents network. By utilizing BitTorrent, the newest generation of P2P technology, Elite Torrents members could download even the largest files-such as those associated with movies and software-far faster than was possible using more traditional P2P technology.

The content selection available on the Elite Torrents network was virtually unlimited and often included illegal copies of copyrighted works before they were available in retail stores or movie theatres. For example, the final entry in the Star Wars series, “Episode III: Revenge of the Sith,” was available for downloading on the network more than six hours before it was first shown in theatres. In the next 24 hours, it was downloaded more than 10,000 times.

On top of EliteTorrents going down, it looks like alot of other sites are closing their doors and trashing what they can, take BitAnce for example.

Popularity: 8% [?]