input:hover

Here is the HTML markup. Note that I wrapped the button input inside a DIV:

<div id="buy"><input id="regButton" type="submit" name="buy" value="Add to Cart" class="submit" /></div>

In order to try it yourself, you’ll need to create a button in Photoshop that can reflect the static AND the rollover state, like this:

It is critical that the height of the Photoshop file is exactly twice as high as the button. IN the case above, the file is 88px high, while the button is 44px high. In this way you can use background positioning to move the image UP by exactly 44px when the user hovers over the button, revealing the “hover” part of the button.

Now, let’s look at the CSS styling to make it all work:

#buy {
	position: absolute;
	display: block;
	top:100px;
	left: 20px;
}
#regButton {
	position: relative;
	background: url(button.jpg) no-repeat;
	width: 125px;
	height: 44px;
	border: none;
	cursor: pointer;
	text-indent: -9999px;
}
#buy input:hover {
	background-position: 0 -44px;
}

The key is to set the button image inside the input ID via the ‘background’ CSS property. Then use the pseudo class of ‘hover’ for the ‘input’ CSS selector ON THE ENCLOSING DIV, and use the ‘background-position’ property to expose the “hover” part of the image. If you try and set the “hover” pseudo class via the input ID itself, which would make perfect sense, IT WON’T WORK! I have no idea why, because it should, but it won’t. You must make sure to target the hover state for the input tag from the enclosing DIV! So in this case, I used:

#buy input:hover

Instead of:

#regButton input:hover

I have to say, this drove me crazy, and I discovered the key to it quite by accident. I had intended to use the enclosing DIV, #buy, to position the button, not having a clue I was about to stumble upon the solution to making an input rollover work! DOH!

Anyway, setting a negative pixel amount to -44 on the y-axis (background-position: x y) tells the browser to move the image UP by 44 pixels, exposing the lower part of the image inside of the “window” created with the width and height properties on the #regButton DIV.

Either way, as you can see it’s pretty simple stuff. I looked high and low for a solution, so I decided to write this article to save the rest of you from the frustration and time I spent on this.

This is an e-commerce site for hair care products. We developed a completely new look for New Options. In addition to the design and development of the website itself, we designed a new logo, new product labels, and handled all of the photography (I am a professional photographer too) for the site. That included a model shoot, as well as individual product shots.

In terms of e-commerce, since there was relatively small number of products, we created a 2-tier platform whereby all the products are displayed on one page, and then individual products can be access and purchased by clicking on any one product. By leveraging the power of WordPress, we were able to easily build the online store.The actual transaction is handled by Foxy Cart as the shopping cart solution.

Finally, we intergrated the client’s social media presence into the site, so the visitor can easily participate in the various social media options for New Options.

This is yet another WordPress site. It is primarily asite featuring the music of Gordon James, renowned flugelhornist. This site leverages many social media sites such as YouTube and Facebook, among others, as well as CD Baby. The beauty of this strategy is that by utilizing resources from other websites, the bandwidth of the hosting server is not taxed.

In real terms, this means that, for example, the videos on Gordon’s site are stored and accessed on YouTube, even though the videos are embedded in Gordon’s site pages. The same holds true for iTunes and CD Baby. There is an iTunes “widget” that allows the user to puchase Gordon;s CDs directly from iTunes. iTunes handles the entire sales transaction, as well as allowing the user to hear a clip of the songs, and none of this uses the server where Gordon’s site is hosted. The same is true for the CD Baby “widget” found on the Music page of the site, except in this case the user can purchase the CDs from CD Baby instead of iTunes.

This strategy not only preserves server bandwidth, but cuts development costs as well, since there is no need to set up a shopping cart on Gordon’s site. All of the “heavy lifting” is accomplished by 3rd party sites, at no cost to Gordon!

If anything is unclear or you still have questions, post a comment under “Leave A Reply”, and I’ll respond with the answer.

Direct download: Quicktime M4V Format

Well, yes! Here is how the dictionary defines “fad”; noun – an interest followed with exaggerated zeal.” There is no judgement in this definition. We tend to imbue things with positive or negative qualities. Yes, Social media is a fad. It also happens to be an effective tool to get your message out to thousands of people!

You can effectively use a Facebook page, a Twitter feed, YouTube Videos, and many other more targeted social networks to increase your brand awareness! We can consolidate all of these disparate networking options into a more unified marketing strategy for your brand.

The Fear Factor

Most people of a “certain age” have some preconceived negative notions about the web, social media, and computers in general. At the root of these feelings is fear….fear of the unknown, fear of having to learn something new, fear of having to invest yet more time n an already too-full schedule, etc.

Personally, while I feel most of these fears are unfounded, I think they are very real to the person who harbors them. It is a given that the web is only going to grab an increasingly larger share of the business of buying and selling goods and services. therefor, you cannot afford to ignore the impact that social media is having across the web. If you don’t somehow begin to use it to increase your brand awareness, you will loose market share……period. Your competitors are taking advantage of social media. You need to as well. We can help.

If anything is unclear or you still have questions, post a comment under “Leave A Reply”, and I’ll respond with the answer.

Direct download: Quicktime M4V Format

If anything is unclear or you still have questions, post a comment under “Leave A Reply”, and I’ll respond with the answer.

Direct download: Quicktime M4V Format

Valerie Frost-Lewis, MS Ed. (“Miss Val”)
Owner/Director
The Peppermint Tree Child Development Center
1571 Partridge Street
Toms River, NJ 08753
732-929-2500

Candy Galekovic
Candy’s Cottage
Long Branch, NJ