Recently asked on Yahoo! Answers:

Divide photo in 5,000 pieces with rollover text?
we are raising money and selling support tickets. To show our progress we are going to start with a black and white image split in 5,000 pieces then as each piece is sold we want to turn it into color.

When you roll over each piece the person who purchased that support ticket will have their name show up as well as a personal message.

any opinions on how this should be built? The admin section will all be managed manually, so we’ll just need a backend for the admin person to go in and make the changes manually.

This seemed an interesting challenge to me; not difficult, but with multiple steps that no beginner could hope to properly tackle on his own without some help.

This project calls on almost all the basic skills a competent Web developer should possess: Image editing; database design and simple queries; DOM manipulation; security and back-end systems, and therefore, it gives me my first real opportunity in quite some time to address a project in full scope.

As always, I’ll have a link to a working demo and code you can download at the end of this entry.

Read the rest of this entry »

I use Firefox because it is a vastly superior Web browser compared to Internet Explorer, Opera and all the other minor browsers out there. But I do check my Web work in all three browsers, and I’ve noticed, for quite a while, that the TypoXP theme has never quite looked right in IE.

Namely, the sidebar links section — which appears fine in Mozilla-based browsers — has been indented improperly in IE. Look at this screencap to see what I mean:

I have been of two minds about the problem. Mostly, I felt I should fix it, because I don’t want my blog to look like it is run by an incompetent. But I also felt that hey, screw people who use IE; I hate it, I don’t care if things look bad to them, and not fixing it is just another way to encourage people to graduate to a better product.

My urges to be professional have won out over my personal animosities. I’ve identified the source of this problem and how to fix it.

Read the rest of this entry »

Recently asked on Yahoo! Answers:

Is it possible to create a mouse over image that doesn’t use javascript?
And if not, is it possible to create one that doesn’t use the <a> link tag? I need to insert a mouse over image into a product page but the module I’m using already defines the <a> link for the potential button/mouse over image. ??? I just need to create a no-hassle, simple mouse over image that doesn’t use the <a> tag. If I use the <a> tag, it will override the link in the module. Help!

This is fairly easy to do with CSS alone, except rather than placing your image with an IMG tag, you use a DIV tag, and set the background-image property of that DIV to be the image you want to use.

Let’s start with the DIV itself, which calls a class we will call myRollover:

To make this work, we need a base style for the myRollover class that sets the height and width of the DIV to be those of the image; I’m also going to place a black scribe around the image.

Finally, the image is set as the background image of the DIV. So long as we don’t put any text or other content inside the containing DIV, it will appear like any other image on the page. To prove that, I’m going to float this “image” to the left, wrapping text around it, and set the margin of the DIV to 10px on the right and bottom to set the text off.

div.myRollover {
	float: left;
	margin: 0 10px 10px 0;
	width: 376px;
	height: 490px;
	border: solid 1px #000;
	background-image: url(3.jpg);
}

And finally, we need a CSS class that changes the background image when we hover over the image:

div.myRollover:hover {
	background-image: url(2.jpg);
}

You can see this in action here:

http://www.dougv.com/demo/css_image_swap_mouseover/

I distribute all code under the latest version of the Creative Commons Attribution / Share-Alike License.

A common question on Yahoo! Answers is where to find good, free Web hosting companies. More often than not, the request is that they also be ad-free.

I can recommend the following Web hosts because I have used them all for various purposes. Each has its limitations, but remember, you get what you pay for, even on the Internet.

A quick aside on free domain names: There are no free domain names. At least, none that are worth the aggravation. (For total n00bs, a “domain name” is like this site’s dougv.com, or yahoo.com, youtube.com, whatever.com.)

Read the rest of this entry »

The old saw says the only certain things in life are death and taxes. Well, I now feel confident enough to add “requests on Yahoo! Answers to review awful Web sites.”

I’ve been participating in Yahoo! Answers for about a year now, and in that time, I’ve seen hundreds of requests from people to review their Web sites.

Without fail, they’re all God-awful. I don’t mean just ugly, or poorly executed, or incomplete, or silly; I mean, genuine affronts to aesthetics and intelligence.

Here are some examples. Brace yourself.

Read the rest of this entry »